/* =====================================================================
   Olympus design system: tokens (v1.0, 29 October 2026)
   The ONLY file with raw colour values. Everything else uses roles.
   Contrast for every text/background pair is computed in DESIGN.md
   (control-plane/gui/design/contrast.py regenerates the table).
   Dark is the primary theme; light is equally finished.
   Theme: <html data-theme="dark|light">, absent = follow the OS.
   ===================================================================== */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
/* Metric-matched fallbacks: text set in the fallback occupies the same box, so the swap does not move layout. */
@font-face {
  font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.48%; line-gap-override: 0%;
}
@font-face {
  font-family: "Mono Fallback"; src: local("Consolas"), local("Menlo"), local("Courier New");
  size-adjust: 109%; ascent-override: 93%; descent-override: 25%; line-gap-override: 0%;
}

:root {
  /* ------------------------------------------------------------ type */
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Mono Fallback", ui-monospace, Consolas, Menlo, monospace;

  --text-display: 600 2rem/2.375rem var(--font-sans);     /* 32/38: sign-in wordmark, hero figure */
  --text-title-1: 600 1.5rem/2rem var(--font-sans);       /* 24/32: page title */
  --text-title-2: 600 1.0625rem/1.5rem var(--font-sans);  /* 17/24: section title */
  --text-title-3: 600 0.9375rem/1.25rem var(--font-sans); /* 15/20: card title, agent name */
  --text-body: 400 0.875rem/1.25rem var(--font-sans);     /* 14/20: default UI text */
  --text-body-sm: 400 0.8125rem/1.125rem var(--font-sans);/* 13/18: secondary lines, table cells */
  --text-caption: 500 0.75rem/1rem var(--font-sans);      /* 12/16: labels, chips */
  --text-micro: 500 0.6875rem/0.875rem var(--font-sans);  /* 11/14: axis ticks */
  --text-stat: 600 1.75rem/2rem var(--font-sans);         /* 28/32: stat tile value */
  --text-mono: 400 0.75rem/1rem var(--font-mono);         /* 12/16: ids, hosts */
  --tracking-tight: -0.011em;
  --tracking-display: -0.022em;

  /* ------------------------------------------------------------ space (4 px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --gutter: 16px;            /* page side gutter on phones; 24 / 32 on wider screens (components.css) */
  --target: 44px;            /* minimum touch target */
  --sidebar-w: 240px; --rail-w: 64px; --tabbar-h: 64px; --topbar-h: 56px;
  --content-max: 1320px;

  /* ------------------------------------------------------------ shape */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;

  /* ------------------------------------------------------------ motion */
  --dur-1: 150ms; --dur-2: 200ms; --dur-3: 250ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --pulse-period: 2400ms;

  /* ------------------------------------------------------------ fixed (theme-independent) */
  --white: #ffffff;
  --black: #000000;
  /* brand mark (same in both themes: the mark sits on its own night tile) */
  --mark-tile: #0e1020; --mark-peak-hi: #c3c9ff; --mark-peak-lo: #5b66d6;
  --mark-far-hi: #7c86e8; --mark-far-lo: #2e3596; --mark-snow: #ffffff; --mark-sun: #f5d58a; --mark-horizon: #9aa5ff;
}

/* ================================================================ DARK (primary) */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0a0b0e;        /* page plane */
  --surface-1: #101217;     /* sidebar, cards, table */
  --surface-2: #161920;     /* hover, popovers, palette */
  --surface-3: #1d2029;     /* inputs, meter tracks, pressed */
  --sidebar-bg: #101217;    /* navigation surface (dark: same as surface-1) */
  --sidebar-line: #22252e;
  --line: #22252e;          /* hairline */
  --line-strong: #31353f;   /* dividers that must be seen */
  --line-input: #5f6575;    /* input and control boundaries (3:1, WCAG 1.4.11) */
  --ink-1: #edeef2;         /* primary text */
  --ink-2: #aeb3c0;         /* secondary text */
  --ink-3: #858b9a;         /* muted text: meta, axis labels */
  --ink-on-accent: #ffffff;

  --accent: #9aa5ff;        /* links, focus ring, active nav, selected */
  --accent-fill: #5b66d6;   /* primary button background (white text) */
  --accent-fill-hover: #525dcc;
  --accent-wash: #1a1d36;   /* selected row, active nav background */
  --focus-ring: #9aa5ff;

  --ok: #3dd68c;     --ok-wash: #0f241a;     --ok-ink: #3dd68c;
  --warn: #f5b547;   --warn-wash: #2a2110;   --warn-ink: #f5b547;
  --crit: #ff6b6b;   --crit-wash: #2d1517;   --crit-ink: #ff8080;
  --quiet: #6e7483;  --quiet-wash: #1a1d24;  --quiet-ink: #a2a8b5;

  /* charts: one series wears --viz-single (the accent hue); categories use the dataviz reference
     palette in its fixed order, dark steps, validated against --surface-1 (DESIGN.md) */
  --viz-single: #8e9bff;
  --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
  --viz-5: #d55181; --viz-6: #008300; --viz-7: #9085e9; --viz-8: #e66767; --viz-other: #5b6170;
  --viz-grid: #1f222a; --viz-axis: #3a3f4b; --viz-target: #edeef2;
  --meter-track: #1d2029;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px #22252e;
  --shadow-3: 0 24px 64px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px #2f333e;
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --scrim: rgba(5, 6, 8, 0.64);
  --skeleton-a: #161920; --skeleton-b: #1f232c;
  --brand-glow-a: rgba(122, 134, 255, 0.20);
  --brand-glow-b: rgba(61, 214, 140, 0.06);
  --contour: rgba(154, 165, 255, 0.07);
}

/* ================================================================ LIGHT */
:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #f6f7f9;
  --surface-1: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #eef0f3;
  --sidebar-bg: #eff1f4;
  --sidebar-line: #d7dbe2;
  --line: #e4e6eb;
  --line-strong: #cfd3db;
  --line-input: #878d99;
  --ink-1: #0e1014;
  --ink-2: #474d5a;
  --ink-3: #646a78;
  --ink-on-accent: #ffffff;

  --accent: #4650c8;
  --accent-fill: #4f5ad4;
  --accent-fill-hover: #4550c4;
  --accent-wash: #eef0ff;
  --focus-ring: #4f5ad4;

  --ok: #1f9d5c;     --ok-wash: #e7f6ee;     --ok-ink: #12703f;
  --warn: #bd820f;   --warn-wash: #fcf2dc;   --warn-ink: #8a5600;
  --crit: #d93636;   --crit-wash: #fcebeb;   --crit-ink: #b42323;
  --quiet: #9399a6;  --quiet-wash: #eff0f3;  --quiet-ink: #555b68;

  --viz-single: #5b66d6;
  --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100;
  --viz-5: #e87ba4; --viz-6: #008300; --viz-7: #6250d6; --viz-8: #e34948; --viz-other: #a3a8b3;
  --viz-grid: #eceef1; --viz-axis: #cfd3db; --viz-target: #0e1014;
  --meter-track: #eceef2;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 12px 32px -8px rgba(16, 24, 40, 0.18), 0 0 0 1px #e4e6eb;
  --shadow-3: 0 24px 64px -12px rgba(16, 24, 40, 0.28), 0 0 0 1px #e4e6eb;
  --highlight: none;
  --scrim: rgba(14, 16, 20, 0.32);
  --skeleton-a: #eef0f3; --skeleton-b: #f6f7f9;
  --brand-glow-a: rgba(79, 90, 212, 0.14);
  --brand-glow-b: rgba(31, 157, 92, 0.05);
  --contour: rgba(70, 80, 200, 0.08);
}

/* System preference when no explicit choice is stored. Same values as the light block above. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --canvas: #f6f7f9; --surface-1: #ffffff; --surface-2: #f9fafb; --surface-3: #eef0f3; --sidebar-bg: #eff1f4; --sidebar-line: #d7dbe2;
    --line: #e4e6eb; --line-strong: #cfd3db; --line-input: #878d99;
    --ink-1: #0e1014; --ink-2: #474d5a; --ink-3: #646a78; --ink-on-accent: #ffffff;
    --accent: #4650c8; --accent-fill: #4f5ad4; --accent-fill-hover: #4550c4; --accent-wash: #eef0ff; --focus-ring: #4f5ad4;
    --ok: #1f9d5c; --ok-wash: #e7f6ee; --ok-ink: #12703f;
    --warn: #bd820f; --warn-wash: #fcf2dc; --warn-ink: #8a5600;
    --crit: #d93636; --crit-wash: #fcebeb; --crit-ink: #b42323;
    --quiet: #9399a6; --quiet-wash: #eff0f3; --quiet-ink: #555b68;
    --viz-single: #5b66d6;
    --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100;
    --viz-5: #e87ba4; --viz-6: #008300; --viz-7: #6250d6; --viz-8: #e34948; --viz-other: #a3a8b3;
    --viz-grid: #eceef1; --viz-axis: #cfd3db; --viz-target: #0e1014;
    --meter-track: #eceef2;
    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-2: 0 12px 32px -8px rgba(16, 24, 40, 0.18), 0 0 0 1px #e4e6eb;
    --shadow-3: 0 24px 64px -12px rgba(16, 24, 40, 0.28), 0 0 0 1px #e4e6eb;
    --highlight: none; --scrim: rgba(14, 16, 20, 0.32);
    --skeleton-a: #eef0f3; --skeleton-b: #f6f7f9;
    --brand-glow-a: rgba(79, 90, 212, 0.14); --brand-glow-b: rgba(31, 157, 92, 0.05);
    --contour: rgba(70, 80, 200, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}