/*
Falcon Syslog design tokens. Harvested from the live Falcon Ex platform's
built CSS bundle (netstrata.falconng.com) 2026-08-11, not from source, not
from memory. See falcon-discovery/syslog-ui-build/notes/token-harvest.md for
the full harvest method and every value's origin.

CONTRACT (do not violate, see CLAUDE.md in this directory):
- This file is the ONLY place a colour literal (hex, oklch, rgb) may appear
  anywhere in this application. Every template, every partial, every inline
  SVG chart references a var(--token) and nothing else.
- Semantic tokens (--c-*) are named by what a number MEANS, not by its hue.
  Polarity wins: a number is quantity, currency, warning, negative or
  positive by meaning, never "the blue one" or "the red one" in code.
- --ds-chart-series-1..6 are for workflow states and multi-series charts that
  carry NO polarity (e.g. distinct pipeline stages, distinct hosts). Never use
  a data-series token where a semantic token applies.
- No purple, anywhere, in either theme. The live Ex platform's own token set
  currently has purple in series slots 5/6/10 (StatTile.js even names
  accent="purple" as a first-class prop) - this file deliberately does NOT
  copy that. See token-harvest.md section "Deviated deliberately".
*/

:root {
  /* ---- semantic status/quantity tokens (light) ---- */
  --c-quantity: #1D1934;
  --c-quantity-strong: #0F0C1E;
  --c-quantity-fg: #FFFFFF;
  --c-quantity-bg: #ECEAF4;
  --c-quantity-border: #C8C4E6;

  --c-currency: #9F6A43;
  --c-currency-strong: #855838;
  --c-currency-fg: #FFFFFF;
  --c-currency-bg: #F6ECE2;
  --c-currency-border: #E4CBB3;

  --c-warning: #C9851B;
  --c-warning-strong: #8E5C0E;
  --c-warning-fg: #1A140C;
  --c-warning-bg: #FCEFD0;
  --c-warning-border: #EFCE8A;

  --c-negative: #C0392B;
  --c-negative-strong: #8F2A20;
  --c-negative-fg: #FFFFFF;
  --c-negative-bg: #F7E4E1;
  --c-negative-border: #E8B3AA;

  --c-positive: #1E8E5A;
  --c-positive-strong: #14633F;
  --c-positive-fg: #FFFFFF;
  --c-positive-bg: #D7EFE3;
  --c-positive-border: #9FD6BB;

  --c-muted: #6B6880;
  --c-muted-strong: #57546A;
  --c-muted-fg: #FFFFFF;
  --c-muted-bg: #ECEBF0;
  --c-muted-border: #D3D0DC;

  /* ---- data series, non-polar (light). Deliberately no purple. ---- */
  --ds-chart-series-1: #1D1934; /* navy */
  --ds-chart-series-2: #9F6A43; /* copper */
  --ds-chart-series-3: #4A90C4; /* blue */
  --ds-chart-series-4: #2D6B5E; /* teal */
  --ds-chart-series-5: #90B4CE; /* pale blue */
  --ds-chart-series-6: #E67E22; /* orange */

  --ds-chart-axis: #6B6880;
  --ds-chart-grid: #E2E0EA;
  --ds-chart-tooltip-bg: #1D1934;
  --ds-chart-tooltip-border: #393152;
  --ds-chart-tooltip-text: #ECEAF4;
  --ds-chart-legend-text: #4A4663;

  /* ---- surfaces, borders, text (light) ---- */
  --surface-page: #F4F3F8;
  --surface-card: #FFFFFF;
  --surface-card-border: #E2E0EA;
  --surface-card-shadow: 0 1px 2px rgba(29, 25, 52, .06), 0 1px 1px rgba(29, 25, 52, .04);
  --surface-sidebar: #1D1934;
  --surface-input: #FFFFFF;
  --surface-subtle: #F0EFF6;
  --surface-hover: #F0EFF6;

  --border-subtle: #ECEAF2;
  --border-default: #E2E0EA;
  --border-strong: #CFCBDA;

  --text-primary: #1D1934;
  --text-secondary: #4A4663;
  --text-muted: #6B6880;
  --text-label: #6B6880;
  --text-on-dark: #ECEAF4;

  --action-primary: #9F6A43;
  --action-primary-hover: #B07F5B;
  --action-primary-text: #FFFFFF;
  --accent: #9F6A43;

  /* ---- spacing, radius, shadow, typography (theme-agnostic) ---- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;   --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;  --space-24: 6rem;

  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px;
  --radius-xl: 14px; --radius-2xl: 20px; --radius-pill: 999px;

  --shadow-flat: 0 0 0 1px var(--border-default);
  --shadow-low: 0 1px 3px rgba(29, 25, 52, .08);
  --shadow-mid: 0 4px 16px rgba(29, 25, 52, .12);
  --shadow-high: 0 20px 60px -20px rgba(29, 25, 52, .24);

  --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .875rem; --fs-md: 1rem;
  --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.55; --lh-relaxed: 1.7;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --bp-xs: 320px; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;
  --t-fast: .12s;
}

/* ---------------------------------------------------------------------- */
/* Dark theme. Two rule sets, deliberately:                               */
/*  1. System preference, when no explicit choice has been made (guarded  */
/*     so it never fires once data-theme="light" is set explicitly).      */
/*  2. Explicit toggle (data-theme="dark" on <html>), which always wins   */
/*     regardless of system preference. Mirrors Ex's dual html.dark /     */
/*     html[data-theme=dark] hook (this app sets both together too - see  */
/*     app.js - so either selector alone would work, but both are kept    */
/*     for defence in depth against a future template only setting one).  */
/* ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-quantity: #C8C4E6; --c-quantity-strong: #ECEAF4; --c-quantity-fg: #12101C;
    --c-quantity-bg: rgba(200, 196, 230, .12); --c-quantity-border: #393152;

    --c-currency: #CD9664; --c-currency-strong: #E0B487; --c-currency-fg: #12101C;
    --c-currency-bg: rgba(205, 150, 100, .14); --c-currency-border: #4A3A2A;

    --c-warning: #E0A540; --c-warning-strong: #ECC069; --c-warning-fg: #12101C;
    --c-warning-bg: rgba(224, 165, 64, .14); --c-warning-border: #4A3E22;

    --c-negative: #E86E60; --c-negative-strong: #F0998E; --c-negative-fg: #12101C;
    --c-negative-bg: rgba(232, 110, 96, .16); --c-negative-border: #4A2A26;

    --c-positive: #4CBF8A; --c-positive-strong: #7FD3AC; --c-positive-fg: #12101C;
    --c-positive-bg: rgba(76, 191, 138, .14); --c-positive-border: #234A38;

    --c-muted: #A8A2C0; --c-muted-strong: #C2BCD6; --c-muted-fg: #12101C;
    --c-muted-bg: rgba(168, 162, 192, .14); --c-muted-border: #3A3552;

    --ds-chart-series-1: #C8C4E6; --ds-chart-series-2: #CD9664; --ds-chart-series-3: #34D399;
    --ds-chart-series-4: #F87171; --ds-chart-series-5: #67E8F9; --ds-chart-series-6: #FB7185;

    --ds-chart-axis: #A8A2C0; --ds-chart-grid: #2A2440;
    --ds-chart-tooltip-bg: #211C33; --ds-chart-tooltip-border: #393152;
    --ds-chart-tooltip-text: #ECEAF4; --ds-chart-legend-text: #C9C4DC;

    --surface-page: #12101C; --surface-card: #211C33; --surface-card-border: #393152;
    --surface-card-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .3);
    --surface-sidebar: #0C0A14; --surface-input: #12101C;
    --surface-subtle: #2A2440; --surface-hover: #2A2440;

    --border-subtle: #2A2440; --border-default: #393152; --border-strong: #4A4170;

    --text-primary: #ECEAF4; --text-secondary: #C9C4DC; --text-muted: #A8A2C0;
    --text-label: #A8A2C0; --text-on-dark: #ECEAF4;

    --action-primary: #C58E5A; --action-primary-hover: #D6A271; --action-primary-text: #1A140C;
    --accent: #C58E5A;
  }
}

:root[data-theme="dark"] {
  --c-quantity: #C8C4E6; --c-quantity-strong: #ECEAF4; --c-quantity-fg: #12101C;
  --c-quantity-bg: rgba(200, 196, 230, .12); --c-quantity-border: #393152;

  --c-currency: #CD9664; --c-currency-strong: #E0B487; --c-currency-fg: #12101C;
  --c-currency-bg: rgba(205, 150, 100, .14); --c-currency-border: #4A3A2A;

  --c-warning: #E0A540; --c-warning-strong: #ECC069; --c-warning-fg: #12101C;
  --c-warning-bg: rgba(224, 165, 64, .14); --c-warning-border: #4A3E22;

  --c-negative: #E86E60; --c-negative-strong: #F0998E; --c-negative-fg: #12101C;
  --c-negative-bg: rgba(232, 110, 96, .16); --c-negative-border: #4A2A26;

  --c-positive: #4CBF8A; --c-positive-strong: #7FD3AC; --c-positive-fg: #12101C;
  --c-positive-bg: rgba(76, 191, 138, .14); --c-positive-border: #234A38;

  --c-muted: #A8A2C0; --c-muted-strong: #C2BCD6; --c-muted-fg: #12101C;
  --c-muted-bg: rgba(168, 162, 192, .14); --c-muted-border: #3A3552;

  --ds-chart-series-1: #C8C4E6; --ds-chart-series-2: #CD9664; --ds-chart-series-3: #34D399;
  --ds-chart-series-4: #F87171; --ds-chart-series-5: #67E8F9; --ds-chart-series-6: #FB7185;

  --ds-chart-axis: #A8A2C0; --ds-chart-grid: #2A2440;
  --ds-chart-tooltip-bg: #211C33; --ds-chart-tooltip-border: #393152;
  --ds-chart-tooltip-text: #ECEAF4; --ds-chart-legend-text: #C9C4DC;

  --surface-page: #12101C; --surface-card: #211C33; --surface-card-border: #393152;
  --surface-card-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .3);
  --surface-sidebar: #0C0A14; --surface-input: #12101C;
  --surface-subtle: #2A2440; --surface-hover: #2A2440;

  --border-subtle: #2A2440; --border-default: #393152; --border-strong: #4A4170;

  --text-primary: #ECEAF4; --text-secondary: #C9C4DC; --text-muted: #A8A2C0;
  --text-label: #A8A2C0; --text-on-dark: #ECEAF4;

  --action-primary: #C58E5A; --action-primary-hover: #D6A271; --action-primary-text: #1A140C;
  --accent: #C58E5A;
}

body { background: var(--surface-page); color: var(--text-primary); font-family: var(--font-sans); }