/* ===== DESIGN TOKENS v2 ===== */
:root {
  /* Type scale */
  --text-xs:   clamp(0.68rem, 0.63rem + 0.25vw, 0.78rem);
  --text-sm:   clamp(0.78rem, 0.73rem + 0.28vw, 0.88rem);
  --text-base: clamp(0.88rem, 0.83rem + 0.25vw, 1rem);
  --text-lg:   clamp(1rem,    0.9rem  + 0.5vw,  1.25rem);
  --text-xl:   clamp(1.2rem,  1rem    + 1vw,    1.75rem);
  --text-2xl:  clamp(1.6rem,  1.2rem  + 2vw,    2.4rem);
  --text-3xl:  clamp(2.2rem,  1.4rem  + 3vw,    3.2rem);

  /* Spacing */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;

  /* Radius */
  --r-sm: 0.375rem; --r-md: 0.625rem; --r-lg: 1rem;
  --r-xl: 1.25rem;  --r-2xl: 1.75rem; --r-full: 9999px;

  /* Fonts */
  --font-body:    'Noto Sans TC', 'Inter', sans-serif;
  --font-display: 'Inter', 'Noto Sans TC', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --transition: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-max: 1360px;
  --nav-h: 56px;
}

/* ── LIGHT ── */
:root, [data-theme="light"] {
  --bg:           #f0f3f7;
  --surface:      #ffffff;
  --surface-2:    #f7f9fc;
  --surface-3:    #eef1f6;
  --border:       #d0d7e2;
  --divider:      #e5e9f0;

  --text:         #0f172a;
  --text-muted:   #475569;
  --text-faint:   #94a3b8;
  --text-inv:     #ffffff;

  --primary:      #0070c0;
  --primary-h:    #004f8a;
  --primary-lt:   rgba(0,112,192,0.1);
  --primary-glow: rgba(0,112,192,0.15);

  --teal:         #0e7490;
  --teal-lt:      rgba(14,116,144,0.1);

  --success:      #16a34a;
  --success-bg:   rgba(22,163,74,0.1);
  --warning:      #b45309;
  --warning-bg:   rgba(180,83,9,0.1);
  --error:        #dc2626;
  --error-bg:     rgba(220,38,38,0.1);
  --info:         #2563eb;
  --info-bg:      rgba(37,99,235,0.1);

  --shadow-sm: 0 1px 3px rgba(15,23,42,0.07);
  --shadow-md: 0 4px 14px rgba(15,23,42,0.09);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.12);
}

/* ── DARK ── */
[data-theme="dark"] {
  --bg:           #0b0f17;
  --surface:      #131929;
  --surface-2:    #1a2236;
  --surface-3:    #212c42;
  --border:       #2a3550;
  --divider:      #1e2a40;

  --text:         #e2e8f4;
  --text-muted:   #7a8aaa;
  --text-faint:   #3d4f6e;
  --text-inv:     #0b0f17;

  --primary:      #60a5fa;
  --primary-h:    #93c5fd;
  --primary-lt:   rgba(96,165,250,0.12);
  --primary-glow: rgba(96,165,250,0.18);

  --teal:         #22d3ee;
  --teal-lt:      rgba(34,211,238,0.1);

  --success:      #4ade80;
  --success-bg:   rgba(74,222,128,0.1);
  --warning:      #fbbf24;
  --warning-bg:   rgba(251,191,36,0.1);
  --error:        #f87171;
  --error-bg:     rgba(248,113,113,0.1);
  --info:         #60a5fa;
  --info-bg:      rgba(96,165,250,0.1);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#0b0f17;--surface:#131929;--surface-2:#1a2236;--surface-3:#212c42;
    --border:#2a3550;--divider:#1e2a40;--text:#e2e8f4;--text-muted:#7a8aaa;
    --text-faint:#3d4f6e;--text-inv:#0b0f17;--primary:#60a5fa;
    --primary-h:#93c5fd;--primary-lt:rgba(96,165,250,0.12);
    --primary-glow:rgba(96,165,250,0.18);--teal:#22d3ee;
    --teal-lt:rgba(34,211,238,0.1);--success:#4ade80;
    --success-bg:rgba(74,222,128,0.1);--warning:#fbbf24;
    --warning-bg:rgba(251,191,36,0.1);--error:#f87171;
    --error-bg:rgba(248,113,113,0.1);--info:#60a5fa;
    --info-bg:rgba(96,165,250,0.1);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.35);
    --shadow-md:0 4px 14px rgba(0,0,0,0.5);
    --shadow-lg:0 12px 32px rgba(0,0,0,0.65);
  }
}