/* ==========================================================================
   Trego Minds design tokens — the ONLY file with colour values (a test enforces it).
   Light is the default. Dark = the previous dark look. "System" follows the OS.
   Theme is set on <html data-theme="light|dark|system"> by /app/theme.js.
   Every text/background pair used by the UI meets WCAG AA (4.5:1); a test checks it.
   ========================================================================== */
/* Inter (variable, 100-900), bundled under the SIL Open Font License 1.1: /fonts/inter/OFL.txt,
   docs/FONTS.md. Served from this app only; no font CDN. */
@font-face {
  font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
  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: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
  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;
}
:root {
  /* Typography: bundled Inter, then system fonts. */
  --font-sans: "Inter Variable", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-title: 21px;      /* page title */
  --fs-section: 17px;    /* section title */
  --fs-body: 14px;       /* body */
  --fs-small: 12.5px;    /* small / secondary */
  --fs-metric: 24px;     /* tile numbers */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-body: 1.45;
  /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32). */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --content-max: 1600px;
  --nav-width: 216px;

  /* ---------------------------------------------------------------- light */
  /* The app paints its own light and dark themes. "only light" tells Chrome not to apply its
     automatic dark theme to the light theme; the dark themes below declare "dark". */
  color-scheme: only light;
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-2: #f2f4f7;
  --color-surface-hover: #eef2f6;
  --color-zebra: #fafbfc;
  --color-border: #e3e7ec;
  --color-border-strong: #c3ccd7;
  --color-text: #111827;
  --color-text-2: #4b5563;
  --color-text-3: #5f6b7a;
  --color-primary: #0f766e;
  --color-primary-hover: #115e59;
  --color-on-primary: #ffffff;
  --color-primary-tint: #e6f4f2;
  --color-link: #0f766e;
  --color-focus: #0f766e;
  --color-danger: #b42318;
  --color-danger-hover: #912018;
  --color-on-danger: #ffffff;
  --color-danger-tint: #fef3f2;
  --color-overlay: rgba(15, 23, 42, 0.45);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.07);
  --shadow-2: 0 12px 32px rgba(16, 24, 40, 0.16);
  /* Status (chips: tinted background + matching text). */
  --st-recovered-bg: #e7f6ec;  --st-recovered-fg: #166534;
  --st-blocked-bg: #fff4e0;    --st-blocked-fg: #92400e;
  --st-failed-bg: #fdecec;     --st-failed-fg: #b42318;
  --st-progress-bg: #e8f1fd;   --st-progress-fg: #1d4ed8;
  --st-unknown-bg: #f0f2f5;    --st-unknown-fg: #4b5563;
  --st-resolved-bg: #eef6f0;   --st-resolved-fg: #3f7a52;
  /* Cloud badges: Azure blue (#0078D4 family), AWS orange (#FF9900 family). */
  --azure-bg: #e6f2fb;  --azure-fg: #005a9e;  --azure-border: #0078d4;  --azure-mark: #0078d4;
  --aws-bg: #fff3e0;    --aws-fg: #8a4b00;    --aws-border: #ff9900;    --aws-mark: #ec7211;
  /* Logo chip: the circuit-tree mark is light line-art; keep it on dark in every theme. */
  --brand-mark-bg: #111214;
  /* Mask icon colour follows text. */
  --color-icon: currentColor;
}

/* ------------------------------------------------------------------ dark */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0b0c0e;
  --color-surface: #16181c;
  --color-surface-2: #111214;
  --color-surface-hover: #1c1f24;
  --color-zebra: #191b20;
  --color-border: #2a2d33;
  --color-border-strong: #3a3d44;
  --color-text: #f4f5f6;
  --color-text-2: #b8bec5;
  --color-text-3: #9aa0a6;
  --color-primary: #c6e04a;
  --color-primary-hover: #d4ea6e;
  --color-on-primary: #111214;
  --color-primary-tint: #232914;
  --color-link: #c6e04a;
  --color-focus: #c6e04a;
  --color-danger: #f07070;
  --color-danger-hover: #f48c8c;
  --color-on-danger: #111214;
  --color-danger-tint: #2d1717;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55);
  --st-recovered-bg: #12291b;  --st-recovered-fg: #7dce7a;
  --st-blocked-bg: #2e2410;    --st-blocked-fg: #f0c45a;
  --st-failed-bg: #2e1515;     --st-failed-fg: #f28b82;
  --st-progress-bg: #14233a;   --st-progress-fg: #8ab4f8;
  --st-unknown-bg: #22252b;    --st-unknown-fg: #b8bec5;
  --st-resolved-bg: #172219;   --st-resolved-fg: #9cc8a3;
  --azure-bg: #0b2a45;  --azure-fg: #6cb8f6;  --azure-border: #0078d4;  --azure-mark: #4aa3ec;
  --aws-bg: #3a2600;    --aws-fg: #ffb84d;    --aws-border: #ff9900;    --aws-mark: #ff9900;
}

/* "System": dark values when the OS prefers dark (same values as above). */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --color-bg: #0b0c0e;
    --color-surface: #16181c;
    --color-surface-2: #111214;
    --color-surface-hover: #1c1f24;
    --color-zebra: #191b20;
    --color-border: #2a2d33;
    --color-border-strong: #3a3d44;
    --color-text: #f4f5f6;
    --color-text-2: #b8bec5;
    --color-text-3: #9aa0a6;
    --color-primary: #c6e04a;
    --color-primary-hover: #d4ea6e;
    --color-on-primary: #111214;
    --color-primary-tint: #232914;
    --color-link: #c6e04a;
    --color-focus: #c6e04a;
    --color-danger: #f07070;
    --color-danger-hover: #f48c8c;
    --color-on-danger: #111214;
    --color-danger-tint: #2d1717;
    --color-overlay: rgba(0, 0, 0, 0.6);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55);
    --st-recovered-bg: #12291b;  --st-recovered-fg: #7dce7a;
    --st-blocked-bg: #2e2410;    --st-blocked-fg: #f0c45a;
    --st-failed-bg: #2e1515;     --st-failed-fg: #f28b82;
    --st-progress-bg: #14233a;   --st-progress-fg: #8ab4f8;
    --st-unknown-bg: #22252b;    --st-unknown-fg: #b8bec5;
    --st-resolved-bg: #172219;   --st-resolved-fg: #9cc8a3;
    --azure-bg: #0b2a45;  --azure-fg: #6cb8f6;  --azure-border: #0078d4;  --azure-mark: #4aa3ec;
    --aws-bg: #3a2600;    --aws-fg: #ffb84d;    --aws-border: #ff9900;    --aws-mark: #ff9900;
  }
}

/* Legacy names used by styles.css and the staff pages: aliases of the semantic tokens. */
:root {
  --bg: var(--color-bg);
  --bg-elevated: var(--color-surface-2);
  --panel: var(--color-surface);
  --panel-hover: var(--color-surface-hover);
  --border: var(--color-border);
  --text: var(--color-text);
  --text-muted: var(--color-text-2);
  --text-dim: var(--color-text-3);
  --lime: var(--color-primary);
  --lime-dim: var(--color-primary-tint);
  --yellow: var(--st-blocked-fg);
  --yellow-dim: var(--st-blocked-bg);
  --danger: var(--color-danger);
  --success: var(--st-recovered-fg);
  --warning: var(--st-blocked-fg);
  --info: var(--st-progress-fg);
  --font: var(--font-sans);
  --mono: var(--font-mono);
  --radius: var(--radius-md);
  --focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);
}