/* ============================================================
   flinq Design System — tokens.css
   ============================================================
   THE single source of truth for every flinq design token.
   Variables only — no @font-face (see fonts.css), no element
   styles, no components. Synced verbatim into each surface:

     apps/console  → public/brand-tokens.css   (npm run sync:tokens)
     apps/docs     → src/styles/brand-tokens.css (npm run sync:tokens)

   Edit HERE, then re-run the sync scripts. Never edit a synced copy.

   Light-first. Dark mode is the opt-in tinted-navy secondary,
   keyed on [data-theme="dark"] — never a black void.
   ============================================================ */

:root {
  /* ----- Brand constants (STRICT — never substitute) -------- */
  --flinq-primary:    #01203F;  /* navy — anchor: headings, primary action, wordmark */
  --flinq-secondary:  #5A86E3;  /* blue — links, focus, active; never a large fill */
  --flinq-accent:     #BCD9AB;  /* soft green — success only */
  --flinq-highlight:  #FF6678;  /* coral — warning/destructive ONLY, ≤1 per view */

  /* Tinted ramps (mixes toward white) */
  --primary-50:   #EDF1F6;
  --primary-100:  #D0DAE5;
  --primary-200:  #99ADC3;
  --primary-300:  #5C7795;
  --primary-400:  #2E4F73;
  --primary-700:  #001A33;
  --secondary-50:  #EEF3FC;
  --secondary-100: #DCE7F8;
  --secondary-300: #8FAEE9;
  --secondary-700: #3D67C2;
  --highlight-100: #FFD8DD;
  --highlight-700: #D94654;
  --accent-100:   #E1ECD6;
  --accent-700:   #7BA363;

  /* Navy-tinted neutrals (never pure gray) */
  --white:    #FFFFFF;
  --gray-50:  #FAFBFC;
  --gray-100: #F8F9FA;
  --gray-200: #E9ECEF;
  --gray-300: #DEE2E6;
  --gray-400: #CED4DA;
  --gray-500: #ADB5BD;
  --gray-600: #6C757D;
  --gray-700: #495057;
  --gray-800: #343A40;
  --gray-900: #212529;

  /* Extended data-viz palette — charts with >4 categorical hues ONLY */
  --flinq-emerald: #22C55E;
  --flinq-violet:  #8B5CF6;
  --flinq-cyan:    #06B6D4;
  --flinq-amber:   #F59E0B;

  /* ----- Semantic surface / text --------------------------- */
  --color-bg:            var(--gray-100);
  --color-surface:       var(--white);
  --color-surface-2:     var(--gray-50);
  --sidebar-bg:          var(--gray-50);
  --color-fg:            var(--gray-900);
  --color-fg-body:       var(--gray-700);
  /* Muted TEXT must still pass WCAG AA (≥4.5:1) on the gray-100 page bg,
     not just on white — #68717A does (4.7:1); gray-500/600 do not. gray-500
     is reserved for non-text uses (disabled strokes). */
  --color-fg-muted:      #68717A;
  --color-border:        var(--gray-200);
  --color-border-strong: var(--gray-300);
  --code-bg:             #F3F5F7;

  /* ----- Semantic action / state ---------------------------- */
  --primary:             var(--flinq-primary);   /* CTA fill (blue in dark) */
  --primary-foreground:  var(--white);
  /* Link TEXT is the darker blue step (raw #5A86E3 fails 4.5:1 on white);
     the brand blue itself stays for focus rings, strokes and dark mode. */
  --link:                var(--secondary-700);
  --link-hover:          #25467F;
  --destructive:         var(--flinq-highlight);
  --destructive-foreground: var(--white);
  /* Readable coral for TEXT (raw coral and highlight-700 both fail 4.5:1). */
  --destructive-text:    #C43B49;
  --success:             var(--flinq-accent);
  --success-fg:          #2D5A1B;
  --ring:                rgba(90, 134, 227, 0.30);
  --nav-hover-bg:        rgba(1, 32, 63, 0.045);
  --nav-active-fg:       var(--flinq-primary);

  /* ----- Charts (Recharts reads these at runtime) ----------- */
  --chart-grid:           #E9ECEF;
  --chart-axis:           #68717A;
  --chart-stroke:         #01203F;
  --chart-fill-opacity:   0.07;
  --chart-budget:         #5A86E3;
  --chart-active-fill:    #FFFFFF;
  --chart-tooltip-bg:     #FFFFFF;
  --chart-tooltip-border: #E9ECEF;
  --chart-tooltip-text:   #01203F;

  /* ----- Type ------------------------------------------------ */
  /* Self-hosted trio, no fallback faces (bare generic as last resort).
     Space Grotesk is DISPLAY-ONLY (headings, meta labels, buttons, stat
     numerals) at weight extremes: 380 numerals / 600–700 headings.
     Body is Hanken Grotesk; all data/IDs/code are JetBrains Mono. */
  --font-display: "Space Grotesk", sans-serif;
  --font-body:    "Hanken Grotesk", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;

  --fs-meta: 11px;
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-body: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;

  --fw-stat:     380;   /* the editorial numeral — a touch heavier than Light */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-meta:   0.08em;

  /* ----- Spacing / radii ------------------------------------ */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;    /* controls */
  --radius-lg: 12px;   /* cards */
  --radius-xl: 16px;   /* standalone diagram deliverables */
  --radius-pill: 9999px;

  /* ----- Shadows — navy-tinted, never plain black ------------ */
  --shadow-card: 0 1px 2px rgba(1, 32, 63, 0.05);
  --shadow-xs:   0 1px 2px rgba(1, 32, 63, 0.05);
  --shadow-sm:   0 2px 6px rgba(1, 32, 63, 0.08);
  --shadow-md:   0 4px 12px rgba(1, 32, 63, 0.10);
  --shadow-lg:   0 12px 32px rgba(1, 32, 63, 0.12);
  --shadow-xl:   0 24px 48px rgba(1, 32, 63, 0.14);

  /* ----- Motion — entrances only, no bounce ------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ----- Layout ---------------------------------------------- */
  --sidebar-w: 220px;
  --content-max: 1100px;
}

/* ============================================================
   Dark — refined "instrument at night" (tinted navy, opt-in)
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:            #0E1A2C;
  --color-surface:       #13243C;
  --color-surface-2:     #162944;
  --sidebar-bg:          #0B1626;
  --color-fg:            #E8ECF2;
  --color-fg-body:       #A6BAD2;
  --color-fg-muted:      #8296B4;  /* ≥4.5:1 on the dark surfaces */
  --color-border:        #1E3252;
  --color-border-strong: #284065;
  --code-bg:             #0C1828;

  /* navy CTA disappears on navy → connector-blue fill in dark */
  --primary:             var(--flinq-secondary);
  --primary-foreground:  #07101F;
  --link:                #7C9DEC;
  --link-hover:          #9FBAF2;
  --destructive-text:    #FF8A98;
  --success-fg:          #9BD089;
  --ring:                rgba(90, 134, 227, 0.40);
  --nav-hover-bg:        rgba(255, 255, 255, 0.05);
  --nav-active-fg:       #E8ECF2;

  --chart-grid:           #1B2D49;
  --chart-axis:           #5E7798;
  --chart-stroke:         #5A86E3;
  --chart-fill-opacity:   0.14;
  --chart-budget:         #7C9DEC;
  --chart-active-fill:    #13243C;
  --chart-tooltip-bg:     #13243C;
  --chart-tooltip-border: #1E3252;
  --chart-tooltip-text:   #E8ECF2;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.50), 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.50);
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md:   0 6px 18px rgba(0, 0, 0, 0.50);
  --shadow-lg:   0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-xl:   0 24px 56px rgba(0, 0, 0, 0.55);
}