/* =========================================================================
   tokens.css — design token layer (DESIGN.md v2 §1, §4, §5)
   shadcn/ui canonical zinc dual-mode, OKLCH. SINGLE SOURCE OF COLOUR.
   No hardcoded colour/spacing values may exist outside this :root / .dark.
   Dependency: none (this is the base layer; everything else only reads these).
   ========================================================================= */

/* ---------- Fonts (CDN, variable woff2 — DESIGN.md v2 §5) ---------- */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@latest/files/geist-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@latest/files/geist-mono-latin-wght-normal.woff2') format('woff2');
}

/* ============================ TOKENS — LIGHT ============================ */
:root {
  /* --- §1A shadcn/ui canonical core (light, zinc) --- */
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);   /* v2 new: configures Button destructive variant */
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --radius: 0.625rem; /* 10px base radius (shadcn canonical) */

  /* card-internal divider (head bottom / integrate top / tabs underline).
     Light: equals --border (no visual change). Dark: stronger than the global
     10% --border so the line stays visible without strengthening every border. */
  --card-divider: oklch(0.92 0.004 286.32);

  /* --- §1B extended: license hue signal (bright — icon/dot only) --- */
  --license-free: oklch(0.723 0.219 149.579);
  --license-attrib: oklch(0.769 0.188 70.08);
  --license-paid: oklch(0.552 0.016 285.938);
  /* darkened LABEL text so small text meets AA on the faint tint (HARD CONSTRAINT) */
  --license-free-text: oklch(0.5 0.15 149.579);
  --license-attrib-text: oklch(0.5 0.12 70.08);
  --license-paid-text: oklch(0.45 0.012 285.938);
  --badge-muted-text: oklch(0.52 0.016 285.938); /* 5.02:1; raw 0.552 = 4.39 fails AA */

  /* --- §1B accent-live: the single selected/active colour switch for
         ToggleGroup / Slider track+thumb / Tabs underline. Hero is locked to
         direction A, so this stays --primary (the Hero C indigo override was
         removed with the switcher; see DESIGN.md §9). --- */
  --accent-live: var(--primary);

  /* --- §5 typography --- */
  --font-sans: 'Geist', Inter, -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Noto Sans TC', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 36px;  --lh-display: 1.1;
  --fs-h1: 24px;       --lh-h1: 1.2;
  --fs-h2: 18px;       --lh-h2: 1.3;
  --fs-body-lg: 16px;  --lh-body-lg: 1.6;
  --fs-body: 14px;     --lh-body: 1.55;
  --fs-body-sm: 13px;  --lh-body-sm: 1.5;
  --fs-caption: 12px;  --lh-caption: 1.4;
  --fs-mono: 13px;     --lh-mono: 1.6;
  /* §4 letter-spacing (was described but had no token in v1) */
  --ls-display: -0.02em;
  --ls-caption: 0.01em;

  /* --- spacing 4/8 grid --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-30: 120px;

  /* --- radius scale --- */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 9999px;

  /* --- §1C elevation (semantic names; legacy aliases kept 1 version for non-breaking) --- */
  --elevation-card-hover: 0 1px 2px rgb(0 0 0 / 0.05);
  --elevation-popover:    0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);
  --elevation-toast:      0 10px 24px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08);
  --shadow-2: var(--elevation-card-hover);   /* legacy alias */
  --shadow-3: var(--elevation-popover);      /* legacy alias */
  --shadow-4: var(--elevation-toast);        /* legacy alias */

  /* --- §1B motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 150ms; --dur-mid: 200ms; --dur-card: 250ms; --dur-sheet: 300ms;

  /* --- §4 icon font-size scale (was hardcoded px) --- */
  --icon-fs-xs: 13px;
  --icon-fs-sm: 14px;
  --icon-fs-base: 15px;
  --icon-fs-md: 16px;
  --icon-fs-lg: 18px;
  --icon-fs-xl: 24px;
  --icon-fs-2xl: 28px;
  --icon-fs-3xl: 48px;

  /* --- §4 component scale (was magic px) --- */
  --slider-w: 108px;
  --slider-hit: 44px;
  --slider-track-h: 4px;
  --slider-thumb: 18px;
  --btn-icon-sm: 32px;        /* codeblock copy 30 -> 32 */
  --switch-w: 36px; --switch-h: 20px; --switch-thumb: 16px;
  --badge-pad-y: 3px;
  --swatch-size: 24px;

  /* --- layout --- */
  --container-max: 1400px;
  --toolbar-h: 64px;
  --search-min-w: 220px;   /* §8/§8C: toolbar search group min-width floor at every breakpoint */
  --scrim: rgb(0 0 0 / 0.4);
}

/* ============================ TOKENS — DARK ============================ */
.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --card-divider: oklch(1 0 0 / 20%); /* > 10% border so card-internal lines stay visible on dark cards */

  --license-free: oklch(0.696 0.17 162.48);
  --license-attrib: oklch(0.828 0.189 84.429);
  --license-paid: oklch(0.705 0.015 286.067);
  /* dark: label can be the bright shade (light text on dark tint passes AA) */
  --license-free-text: oklch(0.8 0.16 162.48);
  --license-attrib-text: oklch(0.86 0.17 84.429);
  --license-paid-text: oklch(0.78 0.015 286.067);
  --badge-muted-text: oklch(0.74 0.015 286.067);
}