/* Design tokens: the only file allowed to hold a color literal.
 *
 * Every color does one of four jobs and is assigned by that job, last:
 * categorical (identity), sequential (magnitude), diverging (polarity),
 * status (state). Values are the documented reference palette, validated
 * per mode with validate_palette.js; the reports are in docs/design-tokens.md.
 * Dark values are selected from the same ramps against the dark surface,
 * never an inversion of the light ones. Surfaces and action follow the
 * company palette (navy, amber); data and status colours stay the
 * validated ones.
 *
 * The surfaces, the text and hairline inks and two radii first read the
 * variables a host passes in hostContext.styles.variables and fall back to
 * the kit's own value when it passes none. The data colors never do: the host
 * cannot know the palette was validated against these surfaces. The fonts are
 * self-hosted Geist and Geist Mono (OFL), declared below; applying a host's
 * --font-sans or --font-mono replaces the kit's declaration of the same name.
 *
 * The type scale and the three close surface greys follow a dense-console
 * reference: 14 px body text, one mono face for identifiers and numbers,
 * pill-shaped controls and almost no shadows, so hierarchy comes from
 * hairlines and surface steps rather than elevation.
 *
 * The dark block appears twice, under the OS preference and under the host's
 * explicit theme. A test keeps the two identical.
 */
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --surface-1: var(--color-background-primary, #ffffff);
  --surface-2: var(--color-background-secondary, #f4f6fa);
  --surface-3: #ffffff;
  --ink-1: var(--color-text-primary, #00102e);
  --ink-2: var(--color-text-secondary, #5d6675);
  --mark-muted: #7d8794;
  --hairline: var(--color-border-secondary, #dde3ee);
  --axis: #b3bac6;

  --action: #00102e;
  --accent: var(--series-1);
  --on-action: #ffffff;
  /* Yellow reaches 1.6:1 on white: on light surfaces it is a fill (navy
     text on it) or a rule, never text, a link or the focus ring. */
  --focus-ring: #00102e;
  --brand-navy: #00102e;
  --brand-amber: #fcbe36;

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  --seq-1: #86b6ef;
  --seq-2: #5598e7;
  --seq-3: #2a78d6;
  --seq-4: #1c5cab;
  --seq-5: #104281;

  --div-neg: #e34948;
  --div-mid: #f0efec;
  --div-pos: #2a78d6;

  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  --status-info: #2a78d6;
  --status-neutral: var(--ink-2);
  --on-status: #ffffff;
  --selected: #00102e;
  --rail-width: 3px;

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-hero: 44px;
  --leading-tight: 1.25;
  --leading-body: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-1: var(--border-radius-sm, 4px);
  --radius-2: var(--border-radius-md, 8px);
  --radius-pill: 999px;
  --radius-control: 999px;
  --shadow-raised: none;
  --mark-line: 2px;
  --mark-gap: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --surface-1: var(--color-background-primary, #0a1a3a);
    --surface-2: var(--color-background-secondary, #00102e);
    --surface-3: #14264e;
    --ink-1: var(--color-text-primary, #ffffff);
    --ink-2: var(--color-text-secondary, #9fb0cb);
    --mark-muted: #7c8aa5;
    --hairline: var(--color-border-secondary, #1f3158);
    --axis: #44598a;

    /* Amber is kept distinct from --status-warning (which stays as is) by hue;
       it is an action/accent colour, not a status level. */
    --action: #fcbe36;
    --accent: var(--series-1);
    --on-action: #00102e;
    --focus-ring: #fcbe36;
    --brand-navy: #00102e;
    --brand-amber: #fcbe36;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;

    --seq-1: #184f95;
    --seq-2: #256abf;
    --seq-3: #3987e5;
    --seq-4: #6da7ec;
    --seq-5: #9ec5f4;

    --div-neg: #e66767;
    --div-mid: #383835;
    --div-pos: #3987e5;

    --status-good: #34c26a;
    --status-warning: #f5a142;
    --status-serious: #f08a62;
    --status-critical: #ef6b6b;
    --status-info: #6da7ec;
    --status-neutral: var(--ink-2);
    --on-status: #0b0b0b;
    --selected: #fcbe36;
    --rail-width: 3px;
    --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.35);
  }
}

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

  --surface-1: var(--color-background-primary, #0a1a3a);
  --surface-2: var(--color-background-secondary, #00102e);
  --surface-3: #14264e;
  --ink-1: var(--color-text-primary, #ffffff);
  --ink-2: var(--color-text-secondary, #9fb0cb);
  --mark-muted: #7c8aa5;
  --hairline: var(--color-border-secondary, #1f3158);
  --axis: #44598a;

  /* Amber is kept distinct from --status-warning (which stays as is) by hue;
     it is an action/accent colour, not a status level. */
  --action: #fcbe36;
  --accent: var(--series-1);
  --on-action: #00102e;
  --focus-ring: #fcbe36;
  --brand-navy: #00102e;
  --brand-amber: #fcbe36;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;

  --seq-1: #184f95;
  --seq-2: #256abf;
  --seq-3: #3987e5;
  --seq-4: #6da7ec;
  --seq-5: #9ec5f4;

  --div-neg: #e66767;
  --div-mid: #383835;
  --div-pos: #3987e5;

  --status-good: #34c26a;
  --status-warning: #f5a142;
  --status-serious: #f08a62;
  --status-critical: #ef6b6b;
  --status-info: #6da7ec;
  --status-neutral: var(--ink-2);
  --on-status: #0b0b0b;
  --selected: #fcbe36;
  --rail-width: 3px;
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.35);
}