/* Office Sentry design tokens: the one place the portal (app.css) and the client reports (report.css, page
   and PDF) get their colours, type, spacing, radii and shadows. /styleguide shows every token and component.

   Rules:
   - Components use tokens, not literal colours. The few literals left are deliberate: white behind QR codes
     and logos, the email preview's light backdrop, black in masks, and the PDF page margins (report.css).
   - Spacing and font sizes use the scales below. A literal size is a deliberate off-scale nudge (a pill's
     1px padding, a 9px letter in a 12px square); prefer a scale step in new rules.
   - Text colours (--text, --text-2, --muted, --faint) meet WCAG AA (4.5:1) on --bg, --surface, --surface-2
     and --sunken in both themes (tests/test_ux_fixes.py measures them); --decor is for lines and icons only.
   - Severity text (--sev-*) meets 4.5:1 on the surfaces and on its own --sev-*-soft; --sev-*-fill is for
     bars, dots and chart segments only.
   - Dark mode follows the system unless <html data-theme="light">, which PDFs and print pages set.
   - Brand colours (--brand, --brand-ink, ...) are the MSP's and come from /brand.css, not from here. */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Inter-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Inter-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Inter-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 700 800; font-style: normal; font-display: swap; src: url("fonts/Inter-Bold.ttf") format("truetype"); }

:root {
  /* Surfaces and text */
  --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f9fafb; --sunken: #eef0f3;
  --text: #111827; --text-2: #374151; --muted: #5b6472; --faint: #646b7a; --decor: #9ca3af;
  --border: #e5e7eb; --border-strong: #d1d5db;
  /* Accent (links, primary buttons, focus) */
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: #eff4ff; --accent-text: #ffffff;
  /* Status */
  --ok: #15803d; --ok-soft: #ecfdf3; --ok-fill: #0ca30c;
  --warn: #b45309; --warn-soft: #fff7ed;
  --bad: #b91c1c; --bad-soft: #fef2f2;
  --info: #475569; --info-soft: #f1f5f9;
  /* Severity: text, its background, and the fill for bars and charts */
  --sev-critical: #b42318; --sev-critical-soft: #fdecea; --sev-critical-fill: #d03b3b;
  --sev-high: #b54708; --sev-high-soft: #fdf0e6; --sev-high-fill: #ec835a;
  --sev-medium: #8a5a00; --sev-medium-soft: #fdf6e1; --sev-medium-fill: #fab219;
  --sev-low: #475467; --sev-low-soft: #f0f2f5; --sev-low-fill: #98a2b3;
  --none-fill: #c4cad4;
  --on-sev: #ffffff; /* text on a solid severity or status colour */
  /* Charts (reports/charts.py writes the same light values into the SVG for PDFs). Series take the
     categorical order series, 2, 3 (validated for colour blindness against both surfaces); never more. */
  --chart-series: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-grid: #e3e6eb; --chart-track: #e8ebf0;
  /* Sidebar (dark in both themes) */
  --sidebar: #0f172a; --sidebar-text: #cbd5e1; --sidebar-muted: #8a97ac; --sidebar-active: #1e293b;
  --sidebar-strong: #ffffff; --sidebar-line: #1e293b; --sidebar-marker: #60a5fa;
  --logo-from: #3b82f6; --logo-to: #1d4ed8;

  /* Type: Inter, bundled for the PDFs too. The body is 14px (--fs-base). */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-2xs: .6875rem;  /* 11px: tiny labels */
  --fs-xs: .75rem;     /* 12px: table headings, pills, footnotes */
  --fs-sm: .8125rem;   /* 13px: secondary text */
  --fs-base: .875rem;  /* 14px: body text, form labels */
  --fs-md: .9375rem;   /* 15px */
  --fs-lg: 1rem;       /* 16px: card headings */
  --fs-xl: 1.25rem;    /* 20px: page titles on phones */
  --fs-2xl: 1.5rem;    /* 24px: page titles */
  --fs-figure: 1.625rem; /* 26px: headline figures */
  --fs-3xl: 1.75rem;   /* 28px */

  /* Spacing: a 4px grid (--space-N is N x 4px), with half steps for tight controls. */
  --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px;
  --space-3-5: 14px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* Shape and depth */
  --radius: 10px; --radius-sm: 6px; --radius-xs: 4px; --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-hover: 0 2px 8px rgba(16, 24, 40, .08);   /* a card or tile under the pointer */
  --shadow-menu: 0 12px 32px rgba(16, 24, 40, .16);  /* menus that drop over the page */
  --shadow-lg: 0 6px 20px rgba(16, 24, 40, .25);     /* floating notices */
  --scroll-shade: rgba(16, 24, 40, .16);              /* the shaded edge of a table with more to the side */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1017; --surface: #121923; --surface-2: #161e2a; --sunken: #0e141d;
    --text: #e5e7eb; --text-2: #cbd5e1; --muted: #94a3b8; --faint: #7f8ca3; --decor: #4b5a70;
    --border: #223042; --border-strong: #2f3f55;
    --accent: #60a5fa; --accent-hover: #93c5fd; --accent-soft: #14243b; --accent-text: #0b1017;
    --ok: #4ade80; --ok-soft: #0f2a1b; --warn: #fbbf24; --warn-soft: #2c2110;
    --bad: #f87171; --bad-soft: #2d1416; --info: #94a3b8; --info-soft: #1a2433;
    --sev-critical: #f97066; --sev-critical-soft: #3a1d1d;
    --sev-high: #f79a5c; --sev-high-soft: #3a2618;
    --sev-medium: #fdb022; --sev-medium-soft: #36290f;
    --sev-low: #a6b0c0; --sev-low-soft: #242c38;
    --on-sev: #0b1017;
    --chart-series: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-grid: #223042; --chart-track: #223042;
    --sidebar: #070b11; --sidebar-active: #152031;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --scroll-shade: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}