/* ============================================================================
   Ticker Lab — Design Tokens (D6-F2)
   Operator-locked design system. Single source of truth for every colour,
   type, spacing, radius, shadow, motion, and z-index value the FastAPI/HTMX
   surface consumes. Nothing below this file should hard-code a hex/px value
   that has a token here.
   ============================================================================ */

:root {
  /* --- Brand + semantic colours ------------------------------------------ */
  --color-accent:          #2563EB;   /* royal blue — CTAs, active, links     */
  --color-accent-hover:    #1D4ED8;   /* darker royal blue — hover/pressed    */
  --color-accent-text:     #9BB4FF;   /* accent text legible on dark (active tab) */
  --color-accent-soft:     rgba(37, 99, 235, 0.16);  /* tints, active bg (mockup) */
  --color-growth:          #16A34A;   /* green — positive / bullish           */
  --color-growth-soft:     rgba(22, 163, 74, 0.16);
  --color-danger:          #DC2626;   /* red — negative / bearish             */
  --color-danger-soft:     rgba(220, 38, 38, 0.16);
  --color-neutral:         #9898A8;   /* grey — neutral signal                */
  --color-neutral-soft:    rgba(152, 152, 168, 0.16);
  --color-warning:         #D97706;   /* amber — stale / caution              */
  --color-warning-soft:    rgba(217, 119, 6, 0.16);
  --color-gold:            #E0B341;   /* warning/stat highlight + chart line */

  /* --- Surfaces + structure ---------------------------------------------- */
  --color-bg:              #0A0A0F;   /* near-black — primary surface         */
  --color-surface:         #111118;   /* dark grey — cards, panels            */
  --color-surface-raised:  #16161F;   /* elevated panels, popovers, hover     */
  --color-border:          #1E1E2E;   /* subtle borders                       */
  --color-border-strong:   #2A2A3C;   /* emphasised borders / dividers        */
  --color-zebra:           #0F1219;   /* table row striping (dark)            */

  /* --- Text -------------------------------------------------------------- */
  --color-text:            #E8E8F0;   /* primary text                         */
  --color-text-secondary:  #9898A8;   /* secondary / muted text               */
  --color-text-faint:      #5C5C6E;   /* placeholders, disabled, captions     */
  --color-text-on-accent:  #FFFFFF;   /* text on royal-blue fills             */

  /* --- Typography -------------------------------------------------------- */
  /* Single typeface across the app (operator directive, 17-Jun): Inter for
     UI, headings, AND data/numbers — one consistent voice everywhere. The
     --font-mono token NAME is kept (100+ call sites) but now resolves to Inter;
     numeric columns stay aligned via `font-variant-numeric: tabular-nums`.
     JetBrains Mono survives ONLY for literal code + the brand tagline via
     --font-code (and the landing page, carved out below). Space Grotesk is
     retired from the platform (brief 00 task 2). */
  --font-heading: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-code:    "JetBrains Mono", "SF Mono", "Consolas", monospace;

  --text-2xs:  0.6875rem;  /* 11px — micro labels, badges                     */
  --text-xs:   0.75rem;    /* 12px — captions, table meta                     */
  --text-sm:   0.8125rem;  /* 13px — secondary body, dense tables             */
  --text-base: 0.9375rem;  /* 15px — body default                            */
  --text-md:   1.0625rem;  /* 17px — emphasised body                          */
  --text-lg:   1.25rem;    /* 20px — card titles                              */
  --text-xl:   1.5rem;     /* 24px — section headings                         */
  --text-2xl:  2rem;       /* 32px — page headings                           */
  --text-hero: clamp(2.5rem, 5vw, 3.375rem);  /* 40-54px -- landing hero H1 only */

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --tracking-tight: -0.01em;
  --tracking-wide:  0.04em;
  --tracking-mono:  0.02em;   /* // SECTION HEADER spacing                    */

  /* --- Spacing scale (4px base) ------------------------------------------ */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* --- Border radius ----------------------------------------------------- */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* --- Shadows ----------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px var(--color-accent-soft);

  /* --- Motion ------------------------------------------------------------ */
  --transition-fast:  120ms ease;
  --transition-base:  180ms ease;
  --transition-slow:  280ms ease;

  /* --- Layout ------------------------------------------------------------ */
  --sidebar-width: 248px;
  --content-max:   1280px;

  /* --- Z-index scale ----------------------------------------------------- */
  --z-base:      0;
  --z-sticky:    100;
  --z-sidebar:   200;
  --z-dropdown:  300;
  --z-popover:   400;
  --z-overlay:   500;
  --z-toast:     600;
}

/* ============================================================================
   Brief-00 design-system tokens (master_design_brief §2) — the redesign palette
   consumed by components.css (the global .side/.nav sidebar chrome + the .tlx
   page surface) and the shared partials. ADDITIVE: these names are distinct
   from the --color-* set above, so existing pages keep their current look.
   Dark is the default; light overrides are defined below.
   ============================================================================ */
:root {
  --bg:#0b0d12;  --surface:#12141c;  --surface-2:#0F1219;
  --border:#232838;  --border-2:#1E1E2E;  --zebra:#0F1219;
  --text:#E8E8F0;  --text-2:#9aa0b4;  --text-3:#6b7186;
  --accent:#2563EB;  --accent-text:#9BB4FF;  --accent-soft:rgba(37,99,235,.16);  --on-accent:#FFFFFF;
  --green:#34E0A1;  --green-soft:rgba(52,224,161,.14);
  --red:#F26D6D;    --red-soft:rgba(242,109,109,.12);
  --neutral:#5b6175;
  --amber:#D9A441;  --amber-soft:rgba(217,164,65,.14);
  /* Font aliases the lifted mockup component CSS references verbatim. --mono now
     resolves to Inter (operator: one font everywhere); --code keeps JetBrains for
     literal code only. Number alignment holds via font-variant-numeric. */
  --display:"Inter",sans-serif;  --body:"Inter",sans-serif;  --mono:"Inter",sans-serif;  --code:"JetBrains Mono",monospace;
}

/* --- Logo + landing carve-out (operator: "don't change the landing or logo") --
   The brand tagline pins --font-code directly (see base.css). The public landing
   re-points BOTH mono tokens back to JetBrains so its hero eyebrow / sample-row /
   stat accents render exactly as before, unaffected by the app-wide Inter switch.
   .is-landing is set on the shell only for the guest landing (base.html). */
.is-landing {
  --font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;
  --mono: "JetBrains Mono", monospace;
}

/* --- Light theme overrides (html.light) - palette from operator mockup ----- */
:root.light {
  --color-bg:             #F3F5F9;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-border:         #E3E6EC;
  --color-border-strong:  #D4D8E0;   /* derived; mockup gives no light strong-border */
  --color-text:           #1A1D24;
  --color-text-secondary: #555B66;
  --color-text-faint:     #8B919C;
  --color-accent-text:    #2563EB;
  --color-accent-soft:    rgba(37, 99, 235, 0.10);
  --color-zebra:          #F7F8FA;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
}

/* --- Light overrides for the brief-00 redesign tokens ---------------------- */
/* Mirrors the html.light mechanism the app already uses, and also matches a
   [data-theme="light"] attribute (master brief §2 wording / mockup markup) so
   either toggle resolves the redesign palette. Accent stays #2563EB; the data
   colours (green/red/amber) do not flip — they encode direction, not chrome. */
:root.light,
:root[data-theme="light"] {
  --bg:#F3F5F9;  --surface:#FFFFFF;  --surface-2:#FFFFFF;
  --border:#E3E6EC;  --border-2:#E8EBF0;  --zebra:#F7F8FA;
  --text:#1A1D24;  --text-2:#5a6072;  --text-3:#8B919C;
  --accent-text:#2563EB;  --accent-soft:rgba(37,99,235,.10);
  /* Data-direction colours darkened for the white surface. The §2 dark tones
     drop to ~1.7:1 (green) / 2.2:1 (amber) / 2.9:1 (red) on white — WCAG-fail,
     i.e. the marks/chg%/bias arrows would be nearly invisible in light mode.
     Same hues; direction semantics unchanged. JUDGMENT CALL: §2 specifies no
     light-theme data colours (the mockups are dark-only) — these satisfy §11
     "readable" / the "light clean" gate item. Revert to keep identical hexes if
     preferred. Soft tints stay (subtle tag/chip backgrounds). */
  --green:#128A63;  --red:#DC2626;  --amber:#A86A1E;
}