/* Code Owner: Aslam Jabri. DVSentry design tokens — the single source of visual truth.
   See docs/product/visual-design-system.md. Every stylesheet reads these; none redefines them.

   Cascade order: older screen styles sit in `legacy`, the design system sits in `system`,
   so system decisions win without specificity wars or !important. */
@layer legacy, system;

/* Self-hosted typefaces (SIL OFL 1.1; app/web/assets/fonts/README.md). Latin subset: other scripts
   fall back to the system stack. No font request leaves the deployment. */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/fraunces-latin-opsz-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: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/fraunces-latin-opsz-italic.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: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-latin-400-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: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-latin-500-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: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-latin-600-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: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-latin-700-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: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-latin-400-italic.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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-latin-400-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: "IBM Plex Mono"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-latin-400-italic.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;
}

:root {
  color-scheme: dark;

  /* Surfaces — four levels, used in this order of preference. */
  --canvas: #121110;            /* the page */
  --surface: #181715;           /* rails, panes, tables */
  --surface-raised: #1f1d1a;    /* menus, popovers, the rare card */
  --surface-overlay: #272420;   /* dialogs, drawers */
  --surface-sunken: #0b0a09;    /* code, logs, evidence */
  --surface-hover: rgba(243, 239, 232, 0.04);
  --surface-selected: rgba(183, 172, 255, 0.10);

  /* Lines — dividers first, borders only where an edge must be seen. */
  --line: rgba(243, 239, 232, 0.09);
  --line-strong: rgba(243, 239, 232, 0.20);
  --line-input: #787164;         /* ≥ 3:1 against every surface (WCAG 1.4.11) */
  --rule-double: 3px double var(--line-strong);   /* under a page head, a table header, a zone top */

  /* Text */
  --text-primary: #f3efe8;
  --text-secondary: #c4bdb1;
  --text-muted: #9a9387;        /* ≥ 4.5:1 on --surface */
  --text-disabled: #625c52;

  /* Accent — one violet, used by no severity or state. Fill for primary actions, ink for links
     and selection. */
  --accent: #6a57e3;
  --accent-hover: #5c49d6;       /* darker on hover keeps white text ≥ 4.5:1 */
  --accent-ink: #b7acff;
  --accent-soft: rgba(183, 172, 255, 0.12);
  --focus-ring: #b7acff;

  /* Brand — the mark is printed in ink; the keyhole and the "DV" of the name take the accent ink. */
  --brand-ink: var(--text-primary);
  --brand-key: var(--accent-ink);

  /* Severity — never the only signal; always paired with a label. */
  --sev-critical: #ff7a72;
  --sev-high: #ffa65c;
  --sev-medium: #f0c95a;
  --sev-low: #8ab9ff;
  --sev-info: #a39b8e;

  /* State */
  --ok: #5fd39a;
  --warn: #f0c95a;
  --danger: #ff7a72;
  --danger-fill: #b83a34;
  --running: #7fd4d4;
  --neutral: #a39b8e;

  /* Typography */
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;   /* titles, verdicts */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;     /* 12 — metadata, captions */
  --text-sm: 0.8125rem;   /* 13 — dense UI, tables */
  --text-md: 0.875rem;    /* 14 — body in the app */
  --text-lg: 1rem;        /* 16 — public body, section titles */
  --text-xl: 1.25rem;     /* 20 — pane titles */
  --text-2xl: 1.75rem;    /* 28 — page titles (serif) */
  --text-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  --text-display: clamp(2.75rem, 1.6rem + 4vw, 5rem);
  --tracking-label: 0.08em;   /* uppercase labels: buttons, stamps, table heads */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Space — 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;

  /* Radius — three values only */
  --radius-sm: 2px;   /* inputs, buttons, badges */
  --radius-md: 4px;  /* panes, menus, the rare card */
  --radius-lg: 4px;  /* dialogs, hero visuals */
  --radius-pill: 999px;

  /* Elevation — only overlays float */
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 1400ms;       /* running pulse, skeleton shimmer */

  /* Shell geometry */
  --topbar-height: 56px;
  --rail-width: 232px;
  --content-max: 1320px;
  --gutter: 0px;            /* margin column for section labels; 144px from 1280px (below) */

  /* ---- Legacy aliases: older screen styles read these names. They map onto the system
     above so the whole product shares one palette. Do not use them in new code. ---- */
  --glass-bg: var(--surface);
  --glass-bg-subtle: var(--surface);
  --glass-border: var(--line);
  --glass-blur: none;
  --glass-shadow: none;
  --porcelain-bg: var(--surface);
  --porcelain-muted: var(--surface-sunken);
  --porcelain-raised: var(--surface-raised);
  --porcelain-border: var(--line);
  --porcelain-border-hover: var(--line-strong);
  --porcelain-shadow: none;
  --obsidian-bg: var(--surface-sunken);
  --obsidian-surface: var(--surface-sunken);
  --obsidian-border: var(--line);
  --obsidian-text: var(--text-primary);
  --obsidian-muted: var(--text-muted);
  --surface-muted: var(--surface-sunken);
  --surface-card: var(--surface);
  --surface-glass: var(--surface);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --border-interactive: var(--accent);
  --text-tertiary: var(--text-muted);
  --brand-blue: var(--accent);
  --brand-blue-soft: var(--accent-soft);
  --brand-blue-hover: var(--accent-hover);
  --accent-cyan: var(--accent-ink);
  --accent-cyan-soft: var(--accent-soft);
  --accent-violet: var(--accent-ink);
  --accent-violet-soft: var(--accent-soft);
  --accent-indigo: var(--accent-ink);
  --accent-indigo-soft: var(--accent-soft);
  --accent-amber: var(--warn);
  --accent-amber-soft: color-mix(in oklab, var(--warn) 14%, transparent);
  --severity-critical: var(--sev-critical);
  --severity-critical-soft: color-mix(in oklab, var(--sev-critical) 14%, transparent);
  --severity-high: var(--sev-high);
  --severity-high-soft: color-mix(in oklab, var(--sev-high) 14%, transparent);
  --severity-medium: var(--sev-medium);
  --severity-medium-soft: color-mix(in oklab, var(--sev-medium) 14%, transparent);
  --severity-low: var(--sev-low);
  --severity-low-soft: color-mix(in oklab, var(--sev-low) 14%, transparent);
  --severity-info: var(--sev-info);
  --severity-info-soft: color-mix(in oklab, var(--sev-info) 14%, transparent);
  --status-success: var(--ok);
  --status-success-soft: color-mix(in oklab, var(--ok) 14%, transparent);
  --status-warning: var(--warn);
  --status-warning-soft: color-mix(in oklab, var(--warn) 14%, transparent);
  --status-error: var(--danger);
  --status-error-soft: color-mix(in oklab, var(--danger) 14%, transparent);
  --status-running: var(--running);
  --status-running-soft: var(--accent-soft);
  --status-unavailable: var(--neutral);
  --status-unavailable-soft: color-mix(in oklab, var(--neutral) 12%, transparent);
  --glow-blue: transparent;
  --glow-violet: transparent;
  --glow-cyan: transparent;
  --glow-amber: transparent;
  --apple-blue: var(--accent);
  --apple-blue-hover: var(--accent-hover);
  --apple-blue-glow: transparent;
  --apple-green: var(--ok);
  --apple-green-glow: transparent;
  --apple-orange: var(--warn);
  --apple-orange-glow: transparent;
  --apple-red: var(--danger);
  --apple-red-glow: transparent;
  --apple-purple: var(--accent-ink);
  --apple-purple-glow: transparent;
  --apple-cyan: var(--accent-ink);
  --apple-cyan-glow: transparent;
  --hairline: var(--line);
  --hairline-hover: var(--line-strong);
  --hairline-active: var(--accent);
  --bg-deep: var(--canvas);
  --bg-canvas: var(--canvas);
  --ds-paper: var(--canvas);
  --ds-ink: var(--text-primary);
  --ds-muted: var(--text-secondary);
  --ds-blue: var(--accent-ink);
  --ds-line: var(--line);
  --ds-font: var(--font-sans);
  --font-system: var(--font-sans);
  --ds-radius: var(--radius-md);
  --radius-xs: var(--radius-sm);
  --radius-xl: var(--radius-lg);
  --shadow-subtle: none;
  --shadow-elevated: var(--shadow-menu);
  --shadow-glass: none;
  --transition-spring: all var(--duration-base) var(--ease-out);
  --transition-quick: all var(--duration-fast) ease;
}

@layer legacy {
  *, *::before, *::after { box-sizing: border-box; }
}

/* Hidden means hidden, whatever a screen style says. */
[hidden] { display: none !important; }

/* Reduced motion: animations opt in to a calmer variant through --animation-reduced
   instead of a global 0.01ms override, which makes some animations more jarring. */
@property --animation-reduced {
  syntax: "*";
  inherits: false;
  initial-value: none;
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: var(--animation-reduced) !important;
    transition-duration: 0s !important;
  }
}

/* The margin column opens only where the content column can spare it. */
@media (min-width: 1280px) {
  :root { --gutter: 144px; }
}