/* Hazardlight - semantic + component tokens.
   Layer 1 (primitives): brand-primitives.css, generated from docs/brand-guidelines.md.
   Layer 2 (semantic): this file. Layer 3 (component): app.css reads only layer 2.
   Principle: the interface is monochrome, colour means data. No accent colour. */

:root {
  color-scheme: light dark;

  /* type: one family. Web adaptation of the macOS text styles (+1 px for legibility) */
  --font-ui: system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --fs-caption: 12px;
  --fs-small: 13px;
  --fs-body: 14px;
  --fs-h4: 15px;
  --fs-large: 16px;
  --fs-h3: 18px;
  --fs-h2: 22px;
  --fs-h1: 30px;
  --fs-hero: 56px;

  /* space: 4 px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --r-control: 8px;
  --r-card: 12px;
  --r-modal: 16px;
  --r-pill: 999px;

  --t-fast: 120ms;
  --t-base: 180ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --sidebar-w: 236px;
  --inspector-w: 440px;
  --toolbar-h: 52px;
  --row-h: 48px;
  --row-h-compact: 34px;
  --hit: 28px; /* desktop default control size */
}

/* ---- light ------------------------------------------------------------------------------ */
:root,
:root[data-theme="light"] {
  --bg-page: #f9f9f7;
  --bg-surface: #fcfcfb;
  --bg-sidebar: #f1f0ec;
  --bg-raised: #fcfcfb;
  --bg-sunken: #f3f2ee;

  --text-1: #0b0b0b;
  --text-2: #52514e;
  --text-3: #6b6a65;
  --text-on-ink: #fcfcfb;

  --ink: #0b0b0b;
  --ink-hover: #2c2c2a;

  --border: rgba(11, 11, 11, 0.1);
  --border-strong: rgba(11, 11, 11, 0.24);
  --grid: #e1e0d9;
  --axis: #c3c2b7;

  --wash-hover: rgba(11, 11, 11, 0.05);
  --wash-selected: rgba(11, 11, 11, 0.09);
  --wash-pressed: rgba(11, 11, 11, 0.13);
  --focus: #0b0b0b;

  /* status: fixed, always with icon + text */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  /* data categories (validated with the dataviz validator, fixed order) */
  --cat-news: #2a78d6;
  --cat-advisory: #eb6834;
  --cat-status: #1baf7a;
  --cat-breach: #eda100;
  --cat-ransomware: #e87ba4;
  --cat-dataset: #008300;
  --cat-crowd: #6250d6;

  --toolbar-bg: rgba(249, 249, 247, 0.8);
  --shadow-pop: 0 10px 34px rgba(11, 11, 11, 0.16), 0 0 0 1px var(--border);
  --shadow-card: 0 0 0 1px var(--border);
  --blur: saturate(1.5) blur(18px);
}

/* ---- dark: follows the system, no in-app switch ------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --bg-page: #0d0d0d;
    --bg-surface: #1a1a19;
    --bg-sidebar: #141413;
    --bg-raised: #222221;
    --bg-sunken: #121211;

    --text-1: #f0efec;
    --text-2: #c3c2b7;
    --text-3: #9a9892;
    --text-on-ink: #1a1a19;

    --ink: #f0efec;
    --ink-hover: #d9d8d4;

    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.24);
    --grid: #2c2c2a;
    --axis: #383835;

    --wash-hover: rgba(255, 255, 255, 0.06);
    --wash-selected: rgba(255, 255, 255, 0.11);
    --wash-pressed: rgba(255, 255, 255, 0.16);
    --focus: #f0efec;

    --cat-news: #3987e5;
    --cat-advisory: #d95926;
    --cat-status: #199e70;
    --cat-breach: #c98500;
    --cat-ransomware: #d55181;
    --cat-dataset: #0ca30c;
    --cat-crowd: #9085e9;

    --toolbar-bg: rgba(13, 13, 13, 0.8);
    --shadow-pop: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border);
  }
}

:root[data-theme="dark"] {
  --bg-page: #0d0d0d;
  --bg-surface: #1a1a19;
  --bg-sidebar: #141413;
  --bg-raised: #222221;
  --bg-sunken: #121211;

  --text-1: #f0efec;
  --text-2: #c3c2b7;
  --text-3: #9a9892;
  --text-on-ink: #1a1a19;

  --ink: #f0efec;
  --ink-hover: #d9d8d4;

  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.24);
  --grid: #2c2c2a;
  --axis: #383835;

  --wash-hover: rgba(255, 255, 255, 0.06);
  --wash-selected: rgba(255, 255, 255, 0.11);
  --wash-pressed: rgba(255, 255, 255, 0.16);
  --focus: #f0efec;

  --cat-news: #3987e5;
  --cat-advisory: #d95926;
  --cat-status: #199e70;
  --cat-breach: #c98500;
  --cat-ransomware: #d55181;
  --cat-dataset: #0ca30c;
  --cat-crowd: #9085e9;

  --toolbar-bg: rgba(13, 13, 13, 0.8);
  --shadow-pop: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border);
}

/* ---- accessibility preferences ------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --border: color-mix(in srgb, var(--text-1) 45%, transparent);
    --border-strong: var(--text-1);
    --text-3: var(--text-2);
    --grid: color-mix(in srgb, var(--text-1) 25%, transparent);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --blur: none;
    --toolbar-bg: var(--bg-page);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
  }
}