/* CodeBrix design tokens, v1: the one place every color, font and radius is set.
   Every page and every brick loads this file (through /ui/v1/styles.css, or on
   its own), so a change here reaches the whole product.

   Theme: graphite with a cyan accent. Charts: the Jewel palette, checked for
   colorblind separation and contrast in both modes. Each token is one
   light-dark() pair, so light and dark can't drift apart; the page follows the
   system unless <html data-theme="light|dark"> pins it.

   Customer branding (white-label) overrides only the --brand-* variables below,
   on :root, in a stylesheet loaded after this one. Anything else is ours: chart
   and status colors stay fixed so colorblind safety and alert meaning hold for
   every customer. */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/lato-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root {
  /* Brand: the only overridable set. Unset, they fall back to CodeBrix's own. */
  --accent:        var(--brand-accent, light-dark(#0e7490, #22d3ee));
  --accent-hover:  var(--brand-accent-hover, light-dark(#155e75, #67e8f9));
  --on-accent:     var(--brand-on-accent, light-dark(#ffffff, #08323a));
  --font-sans:     var(--brand-font, "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --text-accent:   var(--accent);
  --accent-soft:   color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line:   color-mix(in srgb, var(--accent) 40%, transparent);
  --focus-ring:    0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);

  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  /* Surfaces: 0 is the page, 1 a card or panel, 2 a well or hover inside one. */
  --surface-0:        light-dark(#f7f7f8, #111113);
  --surface-1:        light-dark(#ffffff, #18181b);
  --surface-2:        light-dark(#f1f1f3, #212125);
  --surface-hover:    light-dark(#18181b0a, #ffffff0d);
  --surface-selected: color-mix(in srgb, var(--accent) 12%, transparent);
  --border:           light-dark(#e4e4e7, #27272a);
  --border-strong:    light-dark(#d4d4d8, #3f3f46);

  --text-primary:   light-dark(#18181b, #ededef);
  --text-secondary: light-dark(#52525b, #a1a1aa);
  --text-muted:     light-dark(#6b6b73, #8b8b93);

  /* Status: always shown with an icon or a word, never color alone. */
  --live:       light-dark(#16a34a, #4ade80);
  --success:    light-dark(#1a7f37, #56d364);
  --warning:    light-dark(#9a6700, #e3b341);
  --danger:     light-dark(#cf222e, #f87171);
  --info:       light-dark(#0584b8, #06a0dd);
  --success-bg: color-mix(in srgb, var(--success) 13%, transparent);
  --warning-bg: color-mix(in srgb, var(--warning) 15%, transparent);
  --danger-bg:  color-mix(in srgb, var(--danger) 13%, transparent);

  /* Charts, categorical (Jewel). Assign in this order, never cycled: a 7th
     series folds into "other" (--chart-other). */
  --chart-1: light-dark(#078e7d, #05ab96);
  --chart-2: light-dark(#6963ec, #8182fe);
  --chart-3: light-dark(#be5904, #e46c07);
  --chart-4: light-dark(#b740b1, #d45ccd);
  --chart-5: light-dark(#907904, #ae9203);
  --chart-6: light-dark(#0584b8, #06a0dd);
  --chart-other: light-dark(#a1a1aa, #52525b);
  --chart-grid:  var(--border);
  --chart-axis:  var(--border-strong);

  /* Charts, sequential (cyan, low to high) for heatmaps and density. */
  --seq-1: light-dark(#e0f6fa, #012f37);
  --seq-2: light-dark(#b5e9f2, #044550);
  --seq-3: light-dark(#82d6e6, #01606e);
  --seq-4: light-dark(#4bbdd3, #067c8e);
  --seq-5: light-dark(#1a9db6, #0c9aaf);
  --seq-6: light-dark(#067c8e, #04b9d2);
  --seq-7: light-dark(#044550, #0adcf9);

  /* Charts, diverging (worse / baseline / better). */
  --div-neg-3: light-dark(#c0392b, #d95544);
  --div-neg-2: light-dark(#e07a6c, #a04034);
  --div-neg-1: light-dark(#f3c4bc, #5e362f);
  --div-mid:   light-dark(#ececee, #313335);
  --div-pos-1: light-dark(#b5e9f2, #05515d);
  --div-pos-2: light-dark(#4bbdd3, #037687);
  --div-pos-3: light-dark(#067c8e, #08a4bb);

  /* Terminal and code blocks: dark in both modes. */
  --term-bg:     #0c0c0e;
  --term-head:   #17171a;
  --term-line:   #26262b;
  --term-text:   #e4e4e7;
  --term-dim:    #8b8b93;
  --term-ok:     #56d364;
  --term-err:    #ff7b72;
  --term-accent: #22d3ee;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow:    0 1px 2px light-dark(rgb(24 24 27 / 0.06), rgb(0 0 0 / 0.4));
  --shadow-popover: 0 16px 40px -14px light-dark(rgb(24 24 27 / 0.22), rgb(0 0 0 / 0.75));
}