/* GENERATED from design-tokens/tokens.css by scripts/sync_tokens.py: do not edit this copy. */
/* TrustNiq design tokens ("Ledger"): the one source for the product app and the public website.
   Edit this file only, then run `python scripts/sync_tokens.py` to copy it to
   frontend/src/styles/tokens.css and website/public/css/tokens.css (`--check` fails when a copy differs).
   Text pairs meet WCAG 2.2 AA (4.5:1); form-control borders meet 3:1. Rationale: design-audit/03-design-system.md. */

@font-face {
  /* Segoe UI / Arial sized to IBM Plex Sans, so the swap to the web font barely moves text */
  font-family: "Plex Fallback";
  src: local("Segoe UI"), local("Arial"), local("Helvetica Neue");
  size-adjust: 101%;
  ascent-override: 102%;
  descent-override: 27%;
  line-gap-override: 0%;
}

:root {
  --font-sans: "IBM Plex Sans", "Plex Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  /* surfaces and text */
  --canvas: #f6f7f9;
  --surface: #ffffff;
  --surface-sunken: #f0f2f5;
  --surface-raised: #ffffff;
  --border: #e4e7ec;
  --border-input: #808a9c;
  --text: #121a26;
  --text-2: #4a5568;
  --text-3: #6b7486;

  /* brand */
  --accent: #1d5fa6;
  --accent-hover: #174d88;
  --accent-soft: #eaf2fb;
  --on-accent: #ffffff;
  --secondary: #0b7a6f;
  --secondary-strong: #096a61;
  --secondary-soft: #e0f3f0;
  --focus-ring: #1d5fa6;
  --nav-bg: #0b1a2e;
  --nav-text: #b9c6d8;
  --nav-label: #8495ad;
  --nav-active: #ffffff;
  --nav-focus: #9cc6f3;

  /* control results */
  --pass: #1a7346;       --pass-bg: #e3f4ea;
  --partial: #8a5800;    --partial-bg: #fdf1dc;
  --fail: #b42318;       --fail-bg: #fde8e6;
  --unknown: #6941c6;    --unknown-bg: #f0ebfb;
  --na: #545e70;         --na-bg: #eef0f3;
  --exception: #175cd3;  --exception-bg: #e4eefc;

  /* severity */
  --sev-critical: #9f1a12; --sev-high: #c2410c; --sev-medium: #8a6100; --sev-low: #545e70;

  /* categorical chart series */
  --chart-1: #1d5fa6; --chart-2: #0b7a6f; --chart-3: #b4541a; --chart-4: #6338b8; --chart-5: #8a6d00; --chart-6: #a23a72;

  /* space, shape, depth */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(16 24 40 / .06);
  --shadow-2: 0 4px 12px rgb(16 24 40 / .10), 0 1px 3px rgb(16 24 40 / .06);
  --shadow-3: 0 16px 40px rgb(16 24 40 / .18);
  --z-sticky: 10; --z-drawer: 30; --z-overlay: 40; --z-dialog: 50; --z-toast: 60;

  /* motion */
  --dur-1: 90ms; --dur-2: 160ms; --dur-3: 240ms; --dur-4: 360ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-emph: cubic-bezier(.3, 1.3, .5, 1);

  color-scheme: light;
}

/* Dark: follows the system unless the page sets data-theme="light"; data-theme="dark" forces it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0e131b; --surface: #151c27; --surface-sunken: #1b2431; --surface-raised: #1b2431;
    --border: #2b3544; --border-input: #5d6b80;
    --text: #e6ebf2; --text-2: #a7b2c3; --text-3: #8d99ab;
    --accent: #78b0ec; --accent-hover: #9cc6f3; --accent-soft: #16273d; --on-accent: #0e131b;
    --secondary: #4cc3b5; --secondary-strong: #6fd3c7; --secondary-soft: #10302d; --focus-ring: #9cc6f3;
    --nav-bg: #0a0f16;
    --pass: #4cc38a; --pass-bg: #123123; --partial: #f0b44c; --partial-bg: #33270f; --fail: #f47066; --fail-bg: #3a1714;
    --unknown: #b59cf5; --unknown-bg: #261d3d; --na: #a3adbd; --na-bg: #232b36; --exception: #7cacf8; --exception-bg: #15284a;
    --sev-critical: #ff7a70; --sev-high: #ff9a5c; --sev-medium: #e8b54d; --sev-low: #a3adbd;
    --chart-1: #78b0ec; --chart-2: #4cc3b5; --chart-3: #f0965c; --chart-4: #b59cf5; --chart-5: #e8c25a; --chart-6: #e58bbb;
    --shadow-1: none; --shadow-2: 0 4px 12px rgb(0 0 0 / .4); --shadow-3: 0 16px 40px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0e131b; --surface: #151c27; --surface-sunken: #1b2431; --surface-raised: #1b2431;
  --border: #2b3544; --border-input: #5d6b80;
  --text: #e6ebf2; --text-2: #a7b2c3; --text-3: #8d99ab;
  --accent: #78b0ec; --accent-hover: #9cc6f3; --accent-soft: #16273d; --on-accent: #0e131b;
  --secondary: #4cc3b5; --secondary-strong: #6fd3c7; --secondary-soft: #10302d; --focus-ring: #9cc6f3;
  --nav-bg: #0a0f16;
  --pass: #4cc38a; --pass-bg: #123123; --partial: #f0b44c; --partial-bg: #33270f; --fail: #f47066; --fail-bg: #3a1714;
  --unknown: #b59cf5; --unknown-bg: #261d3d; --na: #a3adbd; --na-bg: #232b36; --exception: #7cacf8; --exception-bg: #15284a;
  --sev-critical: #ff7a70; --sev-high: #ff9a5c; --sev-medium: #e8b54d; --sev-low: #a3adbd;
  --chart-1: #78b0ec; --chart-2: #4cc3b5; --chart-3: #f0965c; --chart-4: #b59cf5; --chart-5: #e8c25a; --chart-6: #e58bbb;
  --shadow-1: none; --shadow-2: 0 4px 12px rgb(0 0 0 / .4); --shadow-3: 0 16px 40px rgb(0 0 0 / .5);
  color-scheme: dark;
}

/* Motion is decoration: none when the visitor asks for less. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}