/* ==========================================================================
   TAAGIDIM (תאגידים) — Design tokens
   Midnight navy (the mass) · Paper (the record) · Highlighter yellow (the signal)
   Status highlighters: green (ready) · yellow (note) · red (urgent) · blue (info) · violet (people)
   Variable names are shared with the base framework (ink / parch / brass).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* -- Palette ---------------------------------------------------------- */
  --ink-950: #080c16;
  --ink-900: #0d1424;
  --ink-850: #121b2e;
  --ink-800: #18233a;
  --ink-700: #223152;
  --ink-600: #2e3f66;
  --navy-700: #0d1424;
  --navy-600: #18233a;

  --parch-50: #fbfaf7;
  --parch-100: #f4f2ec;
  --parch-200: #e7e3d8;
  --parch-300: #cfc9ba;

  /* The accent is a highlighter yellow. It is the one colour that says "look here". */
  --brass-300: #fff0a3;
  --brass-400: #ffe04d;
  --brass-500: #ffd60a;
  --brass-600: #b88f00;
  --brass-glow: rgba(255, 214, 10, 0.32);
  --warn-400: #ffd60a;

  /* Highlighter tones used on the dashboard and the questionnaire */
  --hl-yellow: rgba(255, 214, 10, 0.42);
  --hl-green: rgba(52, 211, 153, 0.36);
  --hl-red: rgba(248, 113, 113, 0.36);
  --hl-blue: rgba(96, 165, 250, 0.36);
  --hl-violet: rgba(196, 181, 253, 0.40);

  --tone-green: #34d399;
  --tone-yellow: #ffd60a;
  --tone-red: #f87171;
  --tone-blue: #60a5fa;
  --tone-violet: #c4b5fd;

  --slate-500: #6b7487;
  --slate-300: #aeb6c6;

  /* -- Semantic --------------------------------------------------------- */
  --bg: var(--ink-950);
  --bg-2: var(--ink-900);
  --bg-3: var(--ink-850);
  --bg-4: var(--ink-800);
  --bg-light: var(--parch-100);
  --bg-light-2: var(--parch-50);

  --fg: var(--parch-100);
  --fg-2: #b6bdcc;
  --fg-3: #7a8397;
  --fg-on-light: var(--navy-700);
  --fg-on-light-2: #3c4658;

  --accent: var(--brass-500);
  --accent-hi: var(--brass-400);

  --line: rgba(244, 242, 236, 0.1);
  --line-2: rgba(244, 242, 236, 0.18);
  --line-on-light: rgba(13, 20, 36, 0.12);

  --glass: rgba(13, 20, 36, 0.6);
  --glass-light: rgba(244, 242, 236, 0.05);

  /* -- Type ------------------------------------------------------------- */
  --font-sans: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Heebo', system-ui, sans-serif;
  --font-grotesk: 'Space Grotesk', 'Heebo', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --t-display-xl: clamp(3rem, 7.4vw + 0.5rem, 7.6rem);
  --t-display-l: clamp(2.6rem, 5vw + 0.5rem, 5.4rem);
  --t-display-m: clamp(2rem, 3vw + 0.5rem, 3.4rem);
  --t-h3: clamp(1.2rem, 1.1vw + 0.7rem, 1.6rem);
  --t-lead: clamp(1.05rem, 0.5vw + 0.85rem, 1.25rem);
  --t-body: clamp(0.95rem, 0.2vw + 0.85rem, 1.05rem);
  --t-small: 0.85rem;
  --t-label: 0.72rem;
  --t-numeric: clamp(2.6rem, 5vw, 5rem);

  --lh-tight: 1.0;
  --lh-snug: 1.12;
  --lh-base: 1.7;
  --lh-relaxed: 1.9;

  --ls-tight: 0;
  --ls-wide: 0.12em;
  --ls-xwide: 0.24em;

  /* -- Space ------------------------------------------------------------ */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem; --s-10: 9rem;

  --section-y: clamp(4.5rem, 8vw, 8rem);
  --page-x: clamp(1.1rem, 4.5vw, 4rem);
  --max-w: 1380px;
  --max-w-narrow: 860px;
  --max-w-prose: 72ch;

  /* -- Shape ------------------------------------------------------------ */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* -- Elevation -------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --sh-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
  --sh-glow: 0 0 40px var(--brass-glow);

  /* -- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --d-fast: 180ms;
  --d-base: 360ms;
  --d-slow: 800ms;

  --header-h: 76px;

  /* -- Brand motifs ----------------------------------------------------- */
  --hazard: repeating-linear-gradient(135deg, var(--brass-500) 0 12px, var(--ink-950) 12px 24px);
  --lane: repeating-linear-gradient(90deg, var(--brass-400) 0 34px, transparent 34px 60px);
  --lane-soft: repeating-linear-gradient(90deg, rgba(244, 242, 236, 0.22) 0 18px, transparent 18px 32px);
}

/* Dark is the default. Light sections use the same tokens with paper colours. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-light: var(--parch-100);
  }
}