/* ============================================================
   AAP — AI實戰先鋒會 / AI Action Pioneers
   Design tokens (CSS custom properties)
   ============================================================ */
:root {
  /* ---- Color: ink (near-black neutral) ---- */
  --ink-900: #16181C;
  --ink-700: #2A2E34;
  --ink-500: #565C66;
  --ink-400: #6E747E;

  /* ---- Color: accent (institutional blue 點綴) ---- */
  /* --action-* drives text accents (eyebrows, links, highlights); flips lighter on dark via components.css */
  --action-500: #2A66D9;
  --action-600: #1E50B5;
  --action-100: #E8EEFC;
  /* --accent-* is a FIXED blue for fills (buttons, open pill) — readable on both light & dark, never flips */
  --accent: #2A66D9;
  --accent-600: #1E50B5;
  --accent-100: #E8EEFC;

  /* ---- Color: paper (neutral canvas) ---- */
  --paper-0: #FFFFFF;
  --paper-50: #F6F7F8;
  --paper-100: #EAEBEE;
  --paper-200: #DBDDE1;

  /* ---- Color: slate (muted) ---- */
  --slate-400: #898E97;
  --slate-300: #B0B5BD;

  /* ---- Color: status (monochrome — differentiated by fill darkness + label) ---- */
  --success-500: #16181C;
  --warn-500: #6E747E;

  /* ---- Alt accent (unused in mono build) ---- */
  --teal-500: #1FB6C9;

  /* ---- Typography ---- */
  --font-cjk: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-latin: "Inter", system-ui, -apple-system, sans-serif;
  --font-sans: var(--font-latin), var(--font-cjk);
  --font-cjk-stack: var(--font-cjk), var(--font-latin);

  /* type scale */
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem); /* 44–72 */
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem);           /* 32–48 */
  --fs-h2: clamp(1.6rem, 1.3rem + 1.3vw, 2.125rem);     /* 26–34 */
  --fs-h3: 1.4rem;                                       /* 22–24 */
  --fs-body: 1.0625rem;                                  /* 17 */
  --fs-body-lg: 1.125rem;                                /* 18 */
  --fs-small: 0.9375rem;                                 /* 15 */
  --fs-eyebrow: 0.8125rem;                               /* 13 */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.75;

  /* ---- Spacing (8px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-wide: 1280px;
  --gutter: 24px;

  /* ---- Radius ---- */
  --r-btn: 7px;
  --r-card: 11px;
  --r-pill: 999px;
  --r-sm: 6px;

  /* ---- Elevation (soft, low, diffuse) ---- */
  --sh-1: 0 1px 2px rgba(22,24,28,.04), 0 2px 8px rgba(22,24,28,.05);
  --sh-2: 0 2px 6px rgba(22,24,28,.05), 0 12px 28px rgba(22,24,28,.08);
  --sh-3: 0 8px 24px rgba(22,24,28,.10), 0 24px 60px rgba(22,24,28,.12);
  --sh-dark: 0 12px 40px rgba(0,0,0,.4);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 360ms;
}