/* ==========================================================================
   Design tokens — GuardApp console (Betanet Consultancy)
   One accent (deep blue). Status colours are reserved for status only.
   Light is the default; dark is a selected theme, not an automatic flip.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* Font candidates for the preview (user picks one; the rest are removed afterwards) */
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-var.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-var.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-hero: 34px;
  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* Spacing (dense dashboard scale) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Shape & depth */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;

  /* Surfaces & ink — light */
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef0f4;
  --border: #e2e5ea;
  --border-strong: #cdd2da;
  --text: #121620;
  --text-2: #444c5a;
  --text-3: #636b78;
  --text-inverse: #ffffff;
  --focus: #1d4ed8;

  /* Accent — deep corporate blue */
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --accent-soft: #eef3fe;
  --accent-soft-border: #cfdcfb;
  --accent-text: #1e40af;
  --on-accent: #ffffff;

  /* Status — reserved; always paired with an icon + label */
  --ok: #15803d;
  --ok-soft: #e9f6ee;
  --ok-text: #166534;
  --warn: #b45309;
  --warn-dot: #e59a0b;
  --warn-soft: #fdf3e2;
  --warn-text: #92400e;
  --serious: #c2410c;
  --serious-dot: #ec835a;
  --serious-soft: #fdeee6;
  --danger: #b91c1c;
  --danger-dot: #d03b3b;
  --danger-soft: #fdecec;
  --danger-text: #991b1b;
  --info: #0369a1;
  --info-soft: #e7f3fa;
  --neutral-dot: #94a0b3;

  /* Navigation rail (dark in both themes) */
  --nav-bg: #0d1322;
  --nav-border: #1b2336;
  --nav-text: #c3cad8;
  --nav-text-muted: #8a95aa;
  --nav-hover: #172036;
  --nav-active-bg: #1d2944;
  --nav-active-text: #ffffff;
  --nav-indicator: #6b9bff;

  /* Charts */
  --chart-series: #2a78d6;
  --chart-area: rgba(42, 120, 214, 0.1);
  --chart-grid: #e8eaee;
  --chart-axis: #c9ced6;
  --chart-muted: #b8c2d3;
  --meter-track: #e7ebf1;
  /* Categorical series 2–4 (fixed order: orange, aqua, violet), p95 band wash, threshold line */
  --chart-series-2: #eb6834;
  --chart-series-3: #1baf7a;
  --chart-series-4: #4a3aa7;
  --chart-band: rgba(42, 120, 214, 0.16);
  --chart-ref: #8a93a3;
}

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

  --bg: #0a0e16;
  --surface: #111725;
  --surface-2: #151c2c;
  --surface-3: #1b2335;
  --border: #232c3e;
  --border-strong: #313c52;
  --text: #e8ebf1;
  --text-2: #b2bacb;
  --text-3: #8e98ab;
  --focus: #8db0ff;

  --accent: #3b6fe5;
  --accent-hover: #4f7ff0;
  --accent-soft: #17223b;
  --accent-soft-border: #2a3c66;
  --accent-text: #9dbaff;

  --ok: #34b368;
  --ok-soft: #10261b;
  --ok-text: #6fd29a;
  --warn: #e8a22a;
  --warn-dot: #fab219;
  --warn-soft: #2a2010;
  --warn-text: #f3c463;
  --serious: #ef8a5f;
  --serious-dot: #ec835a;
  --serious-soft: #2c1a12;
  --danger: #f06a6a;
  --danger-dot: #e05252;
  --danger-soft: #2c1416;
  --danger-text: #ff9d9d;
  --info: #5cb3e6;
  --info-soft: #0f2230;
  --neutral-dot: #6f7a8f;

  --nav-bg: #080c15;
  --nav-border: #161d2d;

  --chart-series: #3987e5;
  --chart-area: rgba(57, 135, 229, 0.14);
  --chart-grid: #1f2738;
  --chart-axis: #2e384c;
  --chart-muted: #3a4760;
  --meter-track: #222b3d;
  --chart-series-2: #d95926;
  --chart-series-3: #199e70;
  --chart-series-4: #9085e9;
  --chart-band: rgba(57, 135, 229, 0.22);
  --chart-ref: #6f7a8f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6);
}

/* Preview-only font switch (data-font on <html>) */
:root[data-font="plex"] { --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
:root[data-font="source"] { --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; }
:root[data-font="public"] { --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
:root[data-font="system"] { --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }