/* ════════════════════════════════════════════════════════════════════
   CyberXYZ design tokens  (v3, 2026-09-28)
   Brand = the logo gradient (red → orange → amber), one action colour (indigo), one neutral ramp,
   four semantic colours. Verdicts and KEV map onto the semantic set; no
   extra hues. Typography: the three families the site already self-hosts
   (assets/fonts.css) with a fixed scale.
   Base names in styles.css (--orange, --blue, --ink, --bg, --line ...) are
   unchanged; these extend them. Documented in the design-language skill.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── brand: the logo (assets/logos/xyz-symbol.svg, xyz-wordmark.svg) ─
     The mark is a left-to-right linearGradient #ef4136 → #fbb040; the site
     orange #f5793b is its exact midpoint; the wordmark is #2e2eff.        */
  --x-brand-red:    #ef4136;   /* gradient start (3.83:1 on white: display text only) */
  --x-brand-orange: #f5793b;   /* gradient middle = --orange */
  --x-brand-amber:  #fbb040;   /* gradient end = --orange-2 (1.84:1: never text, never a state) */
  --x-brand-gradient: linear-gradient(90deg, #ef4136 0%, #f5793b 50%, #fbb040 100%);
  --x-brand-gradient-text: linear-gradient(90deg, #ef4136 0%, #e0621f 100%);  /* ≥3.5:1 end to end: AA-large, display sizes only */
  --x-brand-tint: linear-gradient(90deg, #fff0ee 0%, #fff1e8 50%, #fff6e8 100%);  /* the gradient at ~8%, for surfaces */

  /* ── orange ramp: tints and text shades of the brand midpoint ───── */
  --x-orange-50:  #fff8f3;   /* brand-tinted panels, bands */
  --x-orange-100: #fff1e8;   /* = --orange-soft: eyebrow fill, tint surfaces */
  --x-orange-200: #ffd4b8;   /* = --orange-line: borders on brand surfaces */
  --x-orange-500: #f5793b;   /* = --orange: fills, dots, rules, display accents (≥24px only) */
  --x-orange-600: #e0621f;   /* hover; orange display text that must pass AA-large (3.54:1) */
  --x-orange-700: #b84c15;   /* orange text at any size (5.14:1 on white); white-on-orange fills */

  /* ── action: indigo ────────────────────────────────────────────── */
  --x-blue-100: #eef0ff;     /* = --blue-soft */
  --x-blue-200: #d3d8ff;     /* = --blue-line */
  --x-blue-500: #2e2eff;     /* = --blue: buttons, links (7.12:1) */
  --x-blue-700: #1f1fb8;     /* pressed */

  /* ── neutrals ──────────────────────────────────────────────────── */
  --x-ink-900: #0a0a23;      /* = --ink: headings, body on paper (18.8:1) */
  --x-ink-700: #2a2a40;      /* = --ink-2: strong secondary */
  --x-ink-500: #5a5a72;      /* = --ink-3: secondary text, captions (6.69:1) */
  --x-ink-400: #8a8aa0;      /* = --ink-4: decoration and disabled only (3.37:1, not for text) */
  --x-line:    #e7e7f0;      /* = --line */
  --x-paper:   #fbfbfd;      /* = --bg */
  --x-paper-2: #f4f5fa;      /* = --bg-2: window chrome only */
  --x-white:   #ffffff;

  /* ── semantic (Tailwind emerald / amber / red, as the dashboard uses) ─
     Deliberately NOT the brand hues: warning is amber-600 #d97706 / 700
     #b45309, never brand amber #fbb040; danger is red-600 #dc2626, never
     brand red #ef4136. A state always carries a label (and an icon); the
     brand gradient never sits on a state.                                 */
  --x-success-50:  #ecfdf5;  --x-success-200: #a7f3d0;  --x-success-600: #16a34a;  --x-success-700: #047857;
  --x-warning-50:  #fffbeb;  --x-warning-200: #fde68a;  --x-warning-500: #d97706;  --x-warning-700: #b45309;
  --x-danger-50:   #fef2f2;  --x-danger-200:  #fecaca;  --x-danger-600:  #dc2626;  --x-danger-700:  #b91c1c;
  /* info = the action colour: --x-blue-500 on --x-blue-100 */

  /* verdicts → semantic (no new hues) */
  --x-verdict-block:      var(--x-danger-600);   /* block, malicious, critical */
  --x-verdict-quarantine: var(--x-warning-500);  /* quarantine, partial, missing */
  --x-verdict-alert:      var(--x-blue-500);     /* alert: installable, flagged (info) */
  --x-verdict-allow:      var(--x-success-600);  /* allow, clean, passed */
  /* KEV is danger with a "KEV" label; high severity is warning; medium/low are neutral */

  /* ── typography ────────────────────────────────────────────────── */
  --x-font-display: "Bricolage Grotesque", ui-serif, Georgia, serif;  /* 400 500 700 800, no italic face */
  --x-font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;  /* 400 500 600 */
  --x-font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;  /* 400 500 700 */

  --x-text-display:  clamp(40px, 5.4vw, 76px);  --x-lh-display: .98;  --x-ls-display: -.035em;  /* 800 */
  --x-text-h1:       clamp(40px, 4.4vw, 62px);  --x-lh-h1: 1;         --x-ls-h1: -.035em;       /* 800 */
  --x-text-h2:       clamp(32px, 4.4vw, 56px);  --x-lh-h2: 1.04;      --x-ls-h2: -.03em;        /* 700 */
  --x-text-h3:       clamp(24px, 2.8vw, 36px);  --x-lh-h3: 1.12;      --x-ls-h3: -.02em;        /* 700 */
  --x-text-h4:       20px;                      --x-lh-h4: 1.2;       --x-ls-h4: -.02em;        /* 700 */
  --x-text-lede:     clamp(16.5px, 1.35vw, 19px); --x-lh-lede: 1.55;                           /* 400 */
  --x-text-body:     16.5px;                    --x-lh-body: 1.6;                              /* 400 */
  --x-text-small:    14.5px;                    --x-lh-small: 1.5;                             /* 400 / 600 */
  --x-text-mono:     12.5px;                    --x-lh-mono: 1.6;                              /* 400 / 700 */
  --x-text-label:    12px;                      --x-ls-label: .04em;                           /* mono 500, uppercase: eyebrow */
  --x-text-caption:  11.5px;                    --x-lh-caption: 1.5;                           /* mono 400 */
  --x-w-regular: 400; --x-w-medium: 500; --x-w-semibold: 600; --x-w-bold: 700; --x-w-black: 800;

  /* ── shape, depth ──────────────────────────────────────────────── */
  --x-radius-lg: 18px;  --x-radius-md: 14px;  --x-radius-sm: 10px;  --x-radius-pill: 999px;
  --x-shadow-sm: 0 2px 8px rgba(15,15,40,.04), 0 1px 2px rgba(15,15,40,.04);
  --x-shadow:    0 8px 28px rgba(15,15,40,.06), 0 2px 6px rgba(15,15,40,.04);
  --x-shadow-lg: 0 30px 60px rgba(15,15,40,.10), 0 6px 18px rgba(15,15,40,.06);

  /* ── motion ────────────────────────────────────────────────────── */
  --x-ease: ease;
  --x-ease-out: cubic-bezier(.2,.7,.2,1);
  --x-dur-chip: .4s;  --x-dur-row: .5s;  --x-dur-card: .55s;  --x-dur-reveal: .6s;
  --x-stagger: .12s;  --x-stagger-lg: .3s;
  --x-loop-flow: 1.6s;  --x-loop-pulse: 2.4s;  --x-loop-caret: 1.1s;  --x-loop-scene: 9s;

  /* ════════════════════════════════════════════════════════════════
     THIRD-PARTY SURFACES: not brand tokens. Copied from the real products
     so mock-ups look like what users see. Never use them outside mocks.
     ════════════════════════════════════════════════════════════════ */
  /* VS Code with "GitHub Light Default" (GitHub.github-vscode-theme 6.3.5,
     themes/light-default.json, generated from primer/github-vscode-theme).
     Keys the theme leaves unset resolve to VS Code's registered light
     defaults: squiggles (editorColors.ts), hover/quick-pick backgrounds
     (= editorWidget.background), widget border (foreground at 20%),
     statusBarItem.errorBackground = darken(errorForeground #cf222e, .4). */
  --vsl-editor-bg: #ffffff;   --vsl-fg: #1f2328;          --vsl-desc: #656d76;
  --vsl-chrome-bg: #ffffff;   --vsl-side-bg: #f6f8fa;     --vsl-tabs-bg: #f6f8fa;   --vsl-bar-bg: #f6f8fa;
  --vsl-border: #d0d7de;      --vsl-act-fg: #1f2328;      --vsl-act-inactive: #656d76;
  --vsl-accent: #0969da;      --vsl-active-border: #fd8c73;
  --vsl-select-bg: rgba(175,184,193,.2);  --vsl-hover-bg: rgba(234,238,242,.5);
  --vsl-badge-bg: #0969da;    --vsl-badge-fg: #ffffff;    --vsl-input-border: #d0d7de; --vsl-picker-fg: #656d76;
  --vsl-button: #1f883d;      --vsl-button-hover: #1a7f37;
  --vsl-widget-bg: #ffffff;   --vsl-widget-border: rgba(31,35,40,.2);  --vsl-widget-shadow: rgba(0,0,0,.16);
  --vsl-ln: #8c959f;          --vsl-ln-active: #1f2328;   --vsl-line-hl: rgba(234,238,242,.5);
  --vsl-key: #116329;         --vsl-str: #0a3069;         --vsl-num: #0550ae;  --vsl-const: #0550ae;
  --vsl-err: #e51400;         --vsl-warn: #bf8803;        --vsl-info: #0063d3;
  --vsl-error-fg: #cf222e;    --vsl-pass: #73c991;        --vsl-status-err-bg: #7c141c;

  /* Light terminal: VS Code integrated terminal, light theme defaults
     (src/vs/workbench/contrib/terminal/common/terminalColorRegistry.ts),
     foreground from Light Modern; window chrome after macOS Terminal "Basic". */
  --tml-bg: #ffffff;  --tml-fg: #3b3b3b;  --tml-bar: #ececec;  --tml-bar-line: #d6d6d6;  --tml-title: #4d4d4d;
  --ansi-black: #000000;  --ansi-red: #cd3131;  --ansi-green: #107c10;  --ansi-yellow: #949800;
  --ansi-blue: #0451a5;   --ansi-magenta: #bc05bc;  --ansi-cyan: #0598bc;  --ansi-bright-black: #666666;

  /* Dark terminal: VS Code "Dark Modern" integrated terminal
     (extensions/theme-defaults/themes/dark_modern.json: panel.background,
     terminal.foreground, panel.border, focusBorder; ANSI dark defaults from
     terminalColorRegistry.ts; bold text drawn in bright colours, the default). */
  --tmd-bg: #181818;  --tmd-fg: #cccccc;  --tmd-border: #2b2b2b;  --tmd-tab: #0078d4;  --tmd-dim: #9d9d9d;
  --ansi-d-red: #cd3131;  --ansi-d-bright-red: #f14c4c;  --ansi-d-green: #0dbc79;  --ansi-d-yellow: #e5e510;
  --ansi-d-blue: #2472c8;  --ansi-d-magenta: #bc3fbc;  --ansi-d-cyan: #11a8cd;  --ansi-d-bright-black: #666666;

  /* CyberXYZ dashboard (app.cyberxyz.io): globals.css .scan-scope + Tailwind classes */
  --app-ink: #0f1423;  --app-muted: rgba(15,20,35,.58);  --app-line: rgba(15,20,35,.09);
  --app-card-bg: rgba(255,255,255,.55);  --app-card-border: rgba(239,65,54,.20);
  --app-card-shadow: 0 8px 32px rgba(239,65,54,.07), 0 2px 8px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.9);
  --app-gray-900: #111827;  --app-gray-600: #4b5563;  --app-gray-500: #6b7280;  --app-gray-400: #9ca3af;  --app-gray-100: #f3f4f6;
}