/* ═══════════════════════════════════════════════════
   CET-4/6 Learning App — Design System & Themes
   ═══════════════════════════════════════════════════ */

/* ─── Light Theme (default) ─── */
:root {
  /* Brand colors */
  --primary: #1B3A5C;
  --primary-light: #2D5F8A;
  --accent: #4A90D9;
  --accent-light: #7AB8F5;
  --accent-warm: #E85D04;

  /* Semantic colors */
  --success: #16A34A;
  --success-light: #DCFCE7;
  --danger: #EF4444;
  --danger-light: #FEE2E2;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;

  /* Backgrounds */
  --bg-body: #F5F6FA;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F0F4F8;
  --bg-input: #FAFBFC;
  --bg-header: var(--primary);
  --bg-nav: #FFFFFF;

  /* Text */
  --text-primary: #1A1A2E;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --text-on-primary: #FFFFFF;
  --text-link: var(--accent);

  /* Borders */
  --border: #E2E8F0;
  --border-light: #F1F5F9;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

  /* Typography */
  --font-sans: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Consolas', 'Source Code Pro', 'Cascadia Code', monospace;

  /* Transitions */
  --ease: 0.2s ease;
  --ease-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --header-h: 56px;
  --nav-h: 48px;
  --content-max-w: 1100px;
  --side-padding: 20px;
}

/* ─── Dark Theme ─── */
[data-theme="dark"] {
  --bg-body: #0F172A;
  --bg-card: #1E293B;
  --bg-card-hover: #334155;
  --bg-input: #1E293B;
  --bg-header: #0F172A;
  --bg-nav: #1E293B;

  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-on-primary: #F1F5F9;

  --border: #334155;
  --border-light: #1E293B;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.6);

  --primary: #3B82F6;
  --primary-light: #60A5FA;
  --accent: #60A5FA;
  --accent-light: #93C5FD;
  --accent-warm: #F97316;

  --success-light: #052E16;
  --danger-light: #450A0A;
  --warning-light: #451A03;
}

/* ─── Global Reset ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-body);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  transition: background var(--ease-slow), color var(--ease-slow);
}

/* ─── Typography ─── */
h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.3; }
h2 { font-size: 1.4rem; font-weight: 700; line-height: 1.3; }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Focus ─── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ─── Selection ─── */
::selection {
  background: var(--accent-light);
  color: var(--text-on-primary);
}