/* BigIron theme: the tokens (colours, type, radii, shadows), light and dark (specs/frontend.md).
   Linked before kit/kit.css, which holds the shared component styles. Components use the tokens by name
   (var(--color-...)); never a hex value. The older short names (--bg, --card, --fg, --muted, --accent, ...) are kept as aliases. */

:root {
  color-scheme: light dark;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Surfaces */
  --color-bg: #f7f2ef;            /* top bars, rails */
  --color-canvas: #fcfaf8;        /* content area under the top bar: lighter than the bar */
  --color-sunk: #eee5e0;          /* recessed: table wells, tab tracks, hover */
  --color-surface: #fffcfa;       /* cards, drawers, inputs */
  --color-line: #2a161d17;        /* hairlines, dividers */
  --color-line-strong: #2a161d2e; /* input borders */

  /* Ink (tinted toward the brand) */
  --color-ink: #21141a;           /* headings, values */
  --color-ink-2: #44333a;         /* body, labels */
  --color-ink-3: #6a5a60;         /* secondary text: the lightest level allowed for text */
  --color-ink-4: #9d9095;         /* placeholders, decoration only */

  /* Brand: burgundy */
  --color-brand: #7c1f3f;
  --color-brand-strong: #5a1530;  /* hover / pressed; text on brand-soft */
  --color-brand-soft: #f4e1e7;    /* badges, icon discs */
  --color-brand-tint: #faf0f3;    /* selected nav row, outline-button hover */
  --color-on-brand: #ffffff;      /* text on brand, ink, rail */
  --color-rail: #2b0d18;
  --color-avatar: #7a4a5a;
  --color-accent: #a8742a;        /* sparing: at most one highlight per screen */
  --color-accent-soft: #f5e9d3;

  /* Chart series: validated (lightness band, chroma, CVD separation, 3:1 on surface) */
  --color-chart-1: #8e2a4c;
  --color-chart-2: #b07a1e;
  --color-chart-3: #3d6db3;

  /* Status: reserved for state, always shown with a label */
  --color-ok: #1d7049;   --color-ok-soft: #e1f1e8;
  --color-warn: #8f5a0c; --color-warn-soft: #f8ecd6;
  --color-err: #b3361f;  --color-err-soft: #f8e2dc;
  --color-info: #2f68a8; --color-info-soft: #e3ecf6;

  --radius-xs: 6px;   /* pills, kbd */
  --radius-sm: 10px;  /* inputs, nav rows */
  --radius-md: 14px;  /* menus, table wells */
  --radius-lg: 20px;  /* cards, KPI tiles */
  --radius-xl: 28px;

  --shadow-xs: 0 1px 2px #21141a0d;
  --shadow-sm: 0 1px 2px #21141a0a, 0 4px 12px -2px #21141a0f;
  --shadow-md: 0 2px 4px #21141a08, 0 12px 32px -8px #21141a1f;
  --shadow-lg: 0 4px 8px #21141a08, 0 32px 64px -16px #2b0d1833;
  --shadow-brand: 0 8px 22px -8px #7c1f3f80;
  --veil: #21141a66;

  /* Aliases used by the existing pages */
  --bg: var(--color-bg); --card: var(--color-surface); --fg: var(--color-ink);
  --muted: var(--color-ink-3); --mut: var(--color-ink-3); --line: var(--color-line); --chip: var(--color-sunk);
  --accent: var(--color-brand); --accent-soft: var(--color-brand-tint); --accent-ink: var(--color-brand);
  --acc: var(--color-brand); --acc-fg: var(--color-on-brand);
  --pos: var(--color-ok); --neg: var(--color-err); --ok: var(--color-ok); --err: var(--color-err); --warn: var(--color-warn);
  --warn-bg: var(--color-warn-soft); --warn-fg: var(--color-warn);
  --err-bg: var(--color-err-soft); --err-fg: var(--color-err); --err-line: color-mix(in srgb, var(--color-err) 35%, transparent);
  --grp: color-mix(in srgb, var(--color-sunk) 55%, transparent);
  --spd: var(--color-chart-1); --inc: var(--color-chart-2); --net: var(--color-ink);
}

/* Dark: its own validated steps, not a flip. Follows the OS unless data-theme says otherwise. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #181214; --color-canvas: #1c1518; --color-sunk: #110c0e; --color-surface: #211a1d;
    --color-line: #ffffff14; --color-line-strong: #ffffff26;
    --color-ink: #f5ecef; --color-ink-2: #d8c9ce; --color-ink-3: #ab9aa0; --color-ink-4: #7a6b70;
    --color-brand: #e88aa8; --color-brand-strong: #f2b0c4; --color-brand-soft: #4a1d2d; --color-brand-tint: #2d1820;
    --color-on-brand: #1c0f14; --color-rail: #12070b; --color-avatar: #8a5a6a;
    --color-accent: #d9a548; --color-accent-soft: #3a2a10;
    --color-chart-1: #cc5f84; --color-chart-2: #b98a33; --color-chart-3: #6a95d8;
    --color-ok: #7fd3a6; --color-ok-soft: #173226; --color-warn: #f0c06a; --color-warn-soft: #3a2a10;
    --color-err: #ff9d8a; --color-err-soft: #431c16; --color-info: #9cc2f2; --color-info-soft: #1a2a40;
    --shadow-xs: 0 1px 2px #0000004d; --shadow-sm: 0 1px 2px #0000004d, 0 4px 12px -2px #00000066;
    --shadow-md: 0 2px 4px #00000040, 0 12px 32px -8px #000000a0; --shadow-lg: 0 4px 8px #00000040, 0 32px 64px -16px #000000b3;
    --shadow-brand: 0 8px 22px -10px #e88aa866; --veil: #000000a6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #181214; --color-canvas: #1c1518; --color-sunk: #110c0e; --color-surface: #211a1d;
  --color-line: #ffffff14; --color-line-strong: #ffffff26;
  --color-ink: #f5ecef; --color-ink-2: #d8c9ce; --color-ink-3: #ab9aa0; --color-ink-4: #7a6b70;
  --color-brand: #e88aa8; --color-brand-strong: #f2b0c4; --color-brand-soft: #4a1d2d; --color-brand-tint: #2d1820;
  --color-on-brand: #1c0f14; --color-rail: #12070b; --color-avatar: #8a5a6a;
  --color-accent: #d9a548; --color-accent-soft: #3a2a10;
  --color-chart-1: #cc5f84; --color-chart-2: #b98a33; --color-chart-3: #6a95d8;
  --color-ok: #7fd3a6; --color-ok-soft: #173226; --color-warn: #f0c06a; --color-warn-soft: #3a2a10;
  --color-err: #ff9d8a; --color-err-soft: #431c16; --color-info: #9cc2f2; --color-info-soft: #1a2a40;
  --shadow-xs: 0 1px 2px #0000004d; --shadow-sm: 0 1px 2px #0000004d, 0 4px 12px -2px #00000066;
  --shadow-md: 0 2px 4px #00000040, 0 12px 32px -8px #000000a0; --shadow-lg: 0 4px 8px #00000040, 0 32px 64px -16px #000000b3;
  --shadow-brand: 0 8px 22px -10px #e88aa866; --veil: #000000a6;
}
:root[data-theme="light"] { color-scheme: light; }