/* Fini8 design tokens · v1.0 draft · October 2026
   Source of truth: brand/DESIGN.md and the "Fini8 Brand Guidelines" canvas.
   Hex values equal Tailwind's zinc / indigo / violet / pink scale, so a class
   in a template and a token here always agree. Dark theme is the default. */

:root {
  /* Neutrals (zinc) */
  --black:    #000000;  /* logo panels, app icon */
  --ink:      #09090B;  /* zinc-950 · the page */
  --graphite: #18181B;  /* zinc-900 · cards, chips, popovers */
  --line:     #27272A;  /* zinc-800 · borders, active nav */
  --steel:    #3F3F46;  /* zinc-700 · hover borders, strong dividers */
  --fog:      #71717A;  /* zinc-500 · icons at rest, placeholders (NOT text on Ink) */
  --mist:     #A1A1AA;  /* zinc-400 · secondary text on Ink */
  --paper:    #FAFAFA;  /* zinc-50  · primary text, primary button */

  /* Light surfaces (print, documents, light pages) */
  --cloud:    #F4F4F5;  /* zinc-100 · cards on Paper */
  --hairline: #E4E4E7;  /* zinc-200 · borders on Paper */

  /* The one brand colour: Intelligence. AI elements only. */
  --ai-grad:       linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #DB2777 100%); /* fills, strokes, hairlines */
  --ai-grad-light: linear-gradient(135deg, #818CF8 0%, #A78BFA 50%, #F472B6 100%); /* text and icons on Ink */
  --ai-indigo:  #4F46E5;  --ai-violet:  #7C3AED;  --ai-magenta: #DB2777;
  --ai-indigo-light: #818CF8;  --ai-violet-light: #A78BFA;  --ai-pink-light: #F472B6;
  --ai-spot:    #7C3AED;  /* one-colour fallback for the whole gradient */
  --ai-ring:    #7C3AED;  /* agent avatar ring */

  /* Status · product only · always paired with a word or icon */
  --ok:      #34D399; --ok-fill:    #022C22; --ok-border:    #065F46;  /* emerald 400 / 950 / 800 */
  --todo:    #FBBF24; --todo-fill:  #451A03; --todo-border:  #92400E;  /* amber   400 / 950 / 800 */
  --block:   #F87171; --block-fill: #450A0A; --block-border: #991B1B;  /* red     400 / 950 / 800 */
  --info:    #60A5FA; --info-fill:  #172554; --info-border:  #1E40AF;  /* blue    400 / 950 / 800 */

  /* Semantic aliases (dark theme) */
  --bg:            var(--ink);
  --bg-elevated:   var(--graphite);
  --border:        var(--line);
  --border-strong: var(--steel);
  --text:          var(--paper);
  --text-muted:    var(--mist);
  --text-disabled: var(--fog);

  /* Type */
  --font-sans: Geist, 'Geist Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
  --text-display: 600 64px/68px var(--font-sans);
  --text-title:   600 40px/44px var(--font-sans);
  --text-h1:      600 28px/34px var(--font-sans);
  --text-h2:      600 20px/28px var(--font-sans);
  --text-body-lg: 400 18px/28px var(--font-sans);
  --text-body:    400 16px/24px var(--font-sans);
  --text-small:   500 14px/20px var(--font-sans);
  --text-caption: 400 13px/18px var(--font-sans);
  --text-label:   500 11px/16px var(--font-mono);   /* upper case, letter-spacing .08em */
  --tracking-display: -0.03em;
  --tracking-label:    0.08em;

  /* Space (4 px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* Radius */
  --radius-sm: 6px;    /* small tiles, inline tags */
  --radius-md: 8px;    /* buttons, inputs, nav items */
  --radius-lg: 12px;   /* panels, popovers, screenshots */
  --radius-xl: 16px;   /* cards */
  --radius-pill: 999px;

  /* Controls */
  --control-h: 36px;        /* buttons and inputs */
  --control-h-touch: 44px;  /* phones */
  --control-px: 14px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-mark: 900ms;        /* the mark drawing itself */

  /* AI surface: two soft glows on Ink, each under 10 % */
  --ai-surface: radial-gradient(60% 40% at 80% 0%, rgba(124, 58, 237, .08), transparent 70%),
                radial-gradient(50% 35% at 0% 100%, rgba(219, 39, 119, .06), transparent 70%),
                var(--ink);
}

/* Light theme: print, documents, light pages. Same tokens, swapped. */
[data-theme="light"], .theme-light {
  --bg:            var(--paper);
  --bg-elevated:   var(--cloud);
  --border:        var(--hairline);
  --border-strong: #D4D4D8;        /* zinc-300 */
  --text:          var(--ink);
  --text-muted:    var(--fog);     /* 4.9:1 on Paper */
  --text-disabled: var(--mist);
  --ai-surface:    var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-mark: 0ms; }
}