/* ==========================================================================
   SOC Training Lab — Design Tokens (bridge layer)
   --------------------------------------------------------------------------
   THIS FILE NO LONGER INVENTS A PALETTE.

   The portal's real tokens live in /training/css/theme.css and always have.
   An earlier version of this file guessed at them from the colours that
   happened to appear in path_ui.css, and guessed wrong four ways: dark-first
   (the portal is light-first), #a239ff (the brand is #A020F0 / #7314AF),
   Vazirmatn (the portal uses IRANSansX), and a token vocabulary the portal
   does not have.

   So theme.css is the source of truth for colour and type. This file is a
   thin bridge that:
     1. maps the names components.css uses onto the portal's real tokens, and
     2. adds only what theme.css lacks — a spacing scale, a fluid type scale,
        per-path accents, and an "on" colour for every fill.

   LOAD ORDER (room pages)
     1. /training/css/theme.css        <- portal, source of truth
     2. /training/css/ds/tokens.css    <- you are here
     3. /training/css/ds/components.css
     4. /training/css/nav.css

   THEMES
     theme.css defines light (default, lavender) and :root[data-theme="dark"].
     The portal's dark theme deliberately drops the purple — --accent becomes
     #F5F5F5 — so components must never assume the accent is purple. Always
     pair it with --accent-on.
   ========================================================================== */

:root {
  /* ------------------------------------------------ aliases onto theme.css
     Left = what components.css asks for. Right = what the portal defines. */
  --panel: var(--bg-soft);
  --card-2: var(--surface-hover);
  --dim: var(--text-muted);
  --hover: var(--surface-hover);
  --border-strong: var(--border-hover);

  --sans: var(--font-sans);
  --mono: var(--font-mono);

  --red: var(--danger);
  --red-soft: var(--danger-soft);
  --amber: var(--gold);

  --radius-pill: 999px;
  --shadow-lg: var(--shadow-glow);

  /* -------------------------------------------------------- "on" colours
     The one text colour permitted on top of each fill. Needed because the
     path accents are bright: white on the original #ff7a00 measures 2.61:1
     and on #16c79a 1.95:1, against a WCAG AA floor of 4.5:1.
     The brand purple needs no correction — white on #7314AF is 8.58:1. */
  --accent-on: #ffffff;
  --red-on: #ffffff;
  --green-on: #ffffff;
  --amber-on: #ffffff;

  --green-soft: rgba(22, 101, 52, 0.12);
  --amber-soft: rgba(124, 92, 0, 0.12);

  /* -------------------------------------------------------- path accents
     These tint one room. The brand purple stays the default for anything
     without a path, including the whole Windows Track. Same hues as
     path_ui.css, taken to their deep variants so they clear AA on the
     portal's light lavender ground. */
  --accent-splunk: #d1420a;
  --accent-splunk-deep: #a33208;
  --accent-splunk-soft: rgba(209, 66, 10, 0.1);
  --accent-splunk-on: #ffffff;

  --accent-network: #0a3fb5;
  --accent-network-deep: #072d80;
  --accent-network-soft: rgba(10, 63, 181, 0.1);
  --accent-network-on: #ffffff;

  --accent-detection: #0c7d63;
  --accent-detection-deep: #085948;
  --accent-detection-soft: rgba(12, 125, 99, 0.1);
  --accent-detection-on: #ffffff;

  --accent-web: #6a1bd6;
  --accent-web-deep: #4c119e;
  --accent-web-soft: rgba(106, 27, 214, 0.1);
  --accent-web-on: #ffffff;

  /* The Windows Track never had a path colour. It inherits the brand. */
  --accent-windows: var(--accent);
  --accent-windows-deep: var(--accent-hover);
  --accent-windows-soft: var(--accent-soft);
  --accent-windows-on: var(--accent-on);

  --accent-deep: var(--accent-hover);

  /* --------------------------------------------------------------- focus */
  --focus: var(--accent);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-ring);
  --selection: var(--accent-soft);

  /* ----------------------------------------------------------- type scale
     theme.css sets the families but has no size scale. Clamped so a phone
     never gets a 2rem heading and a 4K display never gets a wall of 13px. */
  --fs-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --fs-md: clamp(0.94rem, 0.9rem + 0.2vw, 1.02rem);
  --fs-lg: clamp(1.08rem, 1.02rem + 0.3vw, 1.22rem);
  --fs-xl: clamp(1.3rem, 1.18rem + 0.55vw, 1.55rem);
  --fs-2xl: clamp(1.6rem, 1.38rem + 1vw, 2.1rem);
  --fs-3xl: clamp(2rem, 1.62rem + 1.7vw, 2.9rem);

  --lh-tight: 1.18;
  --lh-snug: 1.35;
  --lh-body: 1.75; /* Persian needs more leading than Latin */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-caps: 0.08em;

  /* ---------------------------------------------------------- space scale
     4px base. The only values any component may use for margin, padding or
     gap — which is what "zero inline styles" depends on. */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --border-thin: 1px solid var(--border);
  --border-med: 1px solid var(--border-hover);

  /* --------------------------------------------------------------- motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;

  /* --------------------------------------------------------------- layout */
  --measure: 72ch;
  --page-max: 1100px;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Dark theme corrections. The portal sets --accent to #F5F5F5 in dark and
   drops the purple on purpose, so text on the accent flips to near-black and
   the path accents lighten to stay legible on #0A0A0A.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --accent-on: #0a0a0a;

  --accent-splunk: #ff9d4d;
  --accent-splunk-deep: #e07a1f;
  --accent-splunk-soft: rgba(255, 157, 77, 0.14);
  --accent-splunk-on: #1a0c00;

  --accent-network: #7aa8ff;
  --accent-network-deep: #4d81e6;
  --accent-network-soft: rgba(122, 168, 255, 0.14);
  --accent-network-on: #00112e;

  --accent-detection: #5fe0b8;
  --accent-detection-deep: #2bb894;
  --accent-detection-soft: rgba(95, 224, 184, 0.14);
  --accent-detection-on: #00140e;

  --accent-web: #c79bff;
  --accent-web-deep: #a06ce0;
  --accent-web-soft: rgba(199, 155, 255, 0.14);
  --accent-web-on: #16023a;

  --red-on: #1c0301;
  --green-on: #00160c;
  --amber-on: #1d1400;

  --green-soft: rgba(110, 231, 168, 0.14);
  --amber-soft: rgba(252, 211, 77, 0.14);
}

/* --------------------------------------------------------------------------
   Per-path theming. data-path on <body> swaps the accent triple and every
   component follows, replacing the .path-hero--splunk / .lab-cta--splunk /
   .path-pill--splunk modifier triplicates.
   -------------------------------------------------------------------------- */
[data-path="splunk"] {
  --accent: var(--accent-splunk);
  --accent-deep: var(--accent-splunk-deep);
  --accent-soft: var(--accent-splunk-soft);
  --accent-on: var(--accent-splunk-on);
}
[data-path="network"] {
  --accent: var(--accent-network);
  --accent-deep: var(--accent-network-deep);
  --accent-soft: var(--accent-network-soft);
  --accent-on: var(--accent-network-on);
}
[data-path="detection"] {
  --accent: var(--accent-detection);
  --accent-deep: var(--accent-detection-deep);
  --accent-soft: var(--accent-detection-soft);
  --accent-on: var(--accent-detection-on);
}
[data-path="web-adv"] {
  --accent: var(--accent-web);
  --accent-deep: var(--accent-web-deep);
  --accent-soft: var(--accent-web-soft);
  --accent-on: var(--accent-web-on);
}
/* windows deliberately omitted — it inherits the brand purple. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}