/* AUTO-SYNCED from ui/tokens.css — edit there, run make ui-sync */
/* ============================================================
   Gantry design tokens — SINGLE SOURCE OF TRUTH
   ------------------------------------------------------------
   Consumed by every surface:
     web/       <link href="/ui/tokens.css">          (nginx /ui/ location)
     admin/     <link href="/ui/tokens.css">          (same nginx server)
     extension/ bundled copy at extension/tokens.css  (`make ui-sync`)
     landing/   bundled copy at landing/tokens.css    (`make ui-sync`, deploy script)
     storybook  imported by .storybook/preview.js

   Edit HERE only. Run `make ui-sync` after changes so the bundled
   copies (extension, landing) pick them up. Brand palette definitions
   live in brand/README.md; logo geometry in brand/generate.py.

   2026-07-05: --brand moved from amber #d4a017 to Signal/Bright Teal to
   match the 5g3 logo. Amber survives as --warn (same value it always had).
   ============================================================ */

:root {
  /* Type */
  --font-sans: "Geist", "Space Grotesk", "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Accent (status) palette — shared across themes */
  --good: #16b977;
  --good-glow: #16b97733;
  --warn: #d4a017;
  --warn-glow: #d4a01733;
  --bad: #d94a4a;
  --bad-glow: #d94a4a33;

  /* Brand — teal pair from the logo (node diamond). Structure colors
     for rendering the mark on light/dark surfaces. */
  --brand-teal: #0FA394;      /* Signal Teal — accent on light */
  --brand-teal-bright: #3ADBC5; /* Bright Teal — accent on dark */
  --brand-ink: #0C2231;       /* Graphite Petrol — mark strokes on light */
  --brand-mist: #EAF2F4;      /* Mist — mark strokes on dark */

  /* Radii / motion */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- Dark (default) ---- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --brand: var(--brand-teal-bright);
  --brand-glow: #3adbc533;
  --on-brand: #0C2231;        /* text/icon color on brand-filled surfaces */
  --brand-text: var(--brand-teal-bright); /* brand-colored SMALL text on surfaces (AA-safe) */

  --bg: #0a0b0c;
  --bg-1: #0f1113;
  --bg-2: #15181b;
  --bg-3: #1c2024;
  --bg-hover: #1f2429;

  --line: #23272c;
  --line-2: #2c3137;
  --line-strong: #3a4047;

  --fg: #e8ebee;
  --fg-2: #b8bdc4;
  --fg-3: #7e858d;
  --fg-4: #555c64;

  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,.6), 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-md: 0 10px 30px -10px rgba(0,0,0,.55);

  --grid: rgba(255,255,255,.04);
}

/* ---- Light ---- */
[data-theme="light"] {
  color-scheme: light;

  --brand: var(--brand-teal);
  --brand-glow: #0fa39433;
  --on-brand: var(--brand-ink);  /* white on #0FA394 fails AA; ink clears it */
  --brand-text: #0B7A6E;         /* darker teal: 4.5:1+ on --bg/--bg-2 for small text */

  --bg: #f6f5f1;
  --bg-1: #fbfaf7;
  --bg-2: #ffffff;
  --bg-3: #f1efe9;
  --bg-hover: #ece9e1;

  --line: #e3dfd6;
  --line-2: #d6d1c5;
  --line-strong: #b9b2a3;

  --fg: #1a1a18;
  --fg-2: #3d3d39;
  --fg-3: #6b6a64;
  --fg-4: #93918a;

  --shadow-lg: 0 24px 60px -22px rgba(40,30,10,.18), 0 6px 18px -8px rgba(40,30,10,.12);
  --shadow-md: 0 8px 22px -10px rgba(40,30,10,.18);

  --grid: rgba(0,0,0,.05);
}