/* SecSight design tokens - "Signal box".
 *
 * Railway signalling lends three things and only these: type, density and
 * one signature move (the pipeline line diagram). Layout, navigation and
 * controls stay standard web.
 *
 * The palette is black and white: neutral greys with no hue, and white or
 * black ink as the one accent. Colour appears only as a verdict, so a red,
 * yellow or green mark on screen always means something.
 *
 * Verdict colours are signal aspects, and each one has a shape as well as a
 * colour, so meaning never rides on colour alone (WCAG 1.4.1):
 *   danger  red disc        malicious
 *   caution yellow chevron  suspicious
 *   clear   green bar       clean
 *   unlit   white ring      no data - a source that did not answer is shown
 *                           as unlit, never as clear.
 */

@font-face {
  font-family: "Atkinson Next";
  src: url("../fonts/atkinson-next-latin-wght.woff2") format("woff2-variations");
  font-weight: 200 800;
  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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Next";
  src: url("../fonts/atkinson-next-latin-ext-wght.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Next";
  src: url("../fonts/atkinson-next-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Mono";
  src: url("../fonts/atkinson-mono-latin-wght.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* type */
  --font-ui: "Atkinson Next", "Segoe UI", system-ui, sans-serif;
  --font-data: "Atkinson Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* 1.2 scale on a 15px body; headline numbers jump for wall screens */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.3125rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;
  --fs-figure: clamp(2.25rem, 1.6rem + 1.6vw, 3.5rem);

  /* strict 4px 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;

  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 10px;

  --rail-w: 248px;
  --topbar-h: 56px;
  --content-max: 1480px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  color-scheme: dark;

  /* Dark: ink black. Neutral greys only; colour is kept for verdicts. */
  --ground: oklch(13% 0 0);
  --surface-1: oklch(16.5% 0 0);
  --surface-2: oklch(20% 0 0);
  --surface-3: oklch(24.5% 0 0);
  --rail: oklch(9.5% 0 0);
  --rail-ink: oklch(93% 0 0);
  --rail-ink-2: oklch(70% 0 0);
  --rail-hover: oklch(16% 0 0);
  --rail-current: oklch(21% 0 0);

  --rail-accent: oklch(97% 0 0);
  --rail-accent-ink: oklch(12% 0 0);

  --seam: oklch(26% 0 0);
  --seam-strong: oklch(35% 0 0);

  --ink: oklch(96% 0 0);
  --ink-2: oklch(84% 0 0);
  --ink-3: oklch(71% 0 0);
  --ink-4: oklch(55% 0 0);

  /* the accent (named amber for history): white ink on black. Primary
   * actions, focus, the current place. */
  --amber: oklch(96% 0 0);
  --amber-strong: oklch(100% 0 0);
  --amber-ink: oklch(13% 0 0);
  --amber-wash: oklch(100% 0 0 / 0.09);

  /* aspects */
  --danger: oklch(66% 0.205 27);
  --danger-ink: oklch(17% 0.03 27);
  --danger-wash: oklch(66% 0.205 27 / 0.16);
  --caution: oklch(86% 0.165 95);
  --caution-text: var(--caution);
  --caution-wash: oklch(86% 0.165 95 / 0.14);
  --clear: oklch(76% 0.16 152);
  --clear-wash: oklch(76% 0.16 152 / 0.14);
  --unlit: oklch(88% 0 0);
  --unlit-wash: oklch(88% 0 0 / 0.07);
  --info: oklch(80% 0 0);
  --info-wash: oklch(80% 0 0 / 0.1);

  --shadow-pop: 0 12px 32px -8px oklch(0% 0 0 / 0.65), 0 2px 6px oklch(0% 0 0 / 0.45);
  --scrim: oklch(5% 0 0 / 0.6);
}

/* Light: white paper, black ink, the same black rail. */
:root[data-theme="light"] {
  color-scheme: light;

  --ground: oklch(98.5% 0 0);
  --surface-1: oklch(100% 0 0);
  --surface-2: oklch(96.5% 0 0);
  --surface-3: oklch(93% 0 0);
  --rail: oklch(13% 0 0);
  --rail-ink: oklch(95% 0 0);
  --rail-ink-2: oklch(72% 0 0);
  --rail-hover: oklch(19% 0 0);
  --rail-current: oklch(24% 0 0);

  --rail-accent: oklch(97% 0 0);
  --rail-accent-ink: oklch(12% 0 0);

  --seam: oklch(89% 0 0);
  --seam-strong: oklch(78% 0 0);

  --ink: oklch(15% 0 0);
  --ink-2: oklch(30% 0 0);
  --ink-3: oklch(44% 0 0);
  --ink-4: oklch(60% 0 0);

  /* the accent: black ink on white */
  --amber: oklch(15% 0 0);
  --amber-strong: oklch(30% 0 0);
  --amber-ink: oklch(99% 0 0);
  --amber-wash: oklch(15% 0 0 / 0.07);

  --danger: oklch(53% 0.2 27);
  --danger-ink: oklch(99% 0 0);
  --danger-wash: oklch(58% 0.2 27 / 0.12);
  --caution: oklch(58% 0.13 78);
  /* Caution as text needs more weight than as a mark: 5.2:1 on the ground. */
  --caution-text: oklch(52% 0.12 78);
  --caution-wash: oklch(80% 0.15 90 / 0.24);
  --clear: oklch(50% 0.13 152);
  --clear-wash: oklch(60% 0.13 152 / 0.13);
  --unlit: oklch(42% 0 0);
  --unlit-wash: oklch(42% 0 0 / 0.07);
  --info: oklch(40% 0 0);
  --info-wash: oklch(40% 0 0 / 0.08);

  --shadow-pop: 0 12px 32px -10px oklch(0% 0 0 / 0.22), 0 2px 6px oklch(0% 0 0 / 0.1);
  --scrim: oklch(10% 0 0 / 0.35);
}

/* Legacy variable names (flask.css and inline styles in pages not yet
 * rebuilt) pointed at the new tokens, so every page sits in one palette. */
:root,
:root[data-theme="light"] {
  --bg: var(--ground);
  --s0: var(--ground);
  --s1: var(--surface-1);
  --s2: var(--surface-2);
  --s3: var(--surface-3);
  --s4: var(--surface-3);
  --b1: var(--seam);
  --b2: var(--seam);
  --b3: var(--seam-strong);
  --b4: var(--seam-strong);
  --b5: var(--ink-4);
  --t1: var(--ink);
  --t2: var(--ink-2);
  --t3: var(--ink-3);
  --t4: var(--ink-4);
  --accent: var(--amber);
  --c-accent: var(--amber);
  --line: var(--seam);
  --c-danger: var(--danger);
  --c-warn: var(--caution);
  --c-low: var(--caution);
  --c-ok: var(--clear);
  --c-info: var(--info);
  --glow-xs: none;
  --glow-sm: none;
  --glow-md: none;
  --r1: var(--radius-s);
  --r2: var(--radius-m);
  --r3: var(--radius-m);
  --r4: var(--radius-l);
  --ease: var(--ease-out);
  --topbar: var(--topbar-h);
  --f-ui: var(--font-ui);
  --f-mono: var(--font-data);
  --font-mono: var(--font-data);
}