/* ניקיתי 2026 — design tokens.
   Direction A "Cobalt" (approved, the one that ships). Direction B "Turquoise" is
   dropped per CLAUDE.md's golden rules ("treat it as dead code... drop it unless the
   owner explicitly asks to keep it") — do not add a .dir-b scope here.

   Source of truth: CLAUDE.md's Design Tokens section (merged from
   nikiti-design-tokens.json + the design canvases). A few values CLAUDE.md itself
   doesn't fully specify are marked INFERRED below — flag them for confirmation against
   the design canvas rather than trusting them as verified.

   Breakpoints (media-query values only — custom properties can't drive a query
   condition, so these are documented here for theme.css to match exactly):
     >=1180  full desktop
     980–1179  narrow desktop (guide sidebar drops)
     768–979   tablet (grids 3→2)
     <768      mobile (single column, bottom-sheet TOC, mobile header) */

:root {
  /* ---------- Color — Direction A "Cobalt" ---------- */
  --paper: #F7F5EE;       /* page background. Never white. */
  --sky: #C3D6F8;         /* hero band, section-opening bands */
  --sky-soft: #DFE9FB;    /* chips, quiet cards, table zebra */
  --navy: #131F4A;        /* body text, footer, toolbox, dark sections */
  --ink-soft: #4A5678;    /* secondary text */
  --cobalt: #2350E8;      /* the one accent — links, buttons, step numbers */
  --cobalt-deep: #1A3DB8; /* primary button hover, link hover */
  --baby: #8FB4F5;        /* dividers, dots, low-emphasis bars */
  --yellow: #FFD23F;      /* "חדש!", checkmarks, tips, on-dark CTA — never a section bg */
  --fresh: #22B57F;       /* success only */
  --alert: #E5484D;       /* warning fills/borders only */
  --alert-text: #C93135;  /* warning TEXT on light backgrounds — darker than --alert for contrast */

  /* --surface-card is #fff in light mode — confirmed 2026-09-01 (CLAUDE.md): the token
     JSON never lists it explicitly, but the dark-mode rule "card surfaces read
     var(--surface-card), never a literal #fff" only makes sense if that's what it
     resolves to here. */
  --surface-card: #FFFFFF;
  --surface-dark: var(--navy); /* dark sections (footer, toolbox) in LIGHT mode only — see dark-mode block below for why this splits apart there */

  /* ---------- Typography ---------- */
  --font-body: 'Heebo', 'Heebo Fallback', Arial, 'Arial Hebrew', sans-serif;
  --font-display: 'Frank Ruhl Libre', 'Frank Ruhl Libre Fallback', Georgia, 'Times New Roman', serif;
  /* Below 22px the serif turns muddy on Hebrew at small sizes — use this instead of --font-display */
  --font-display-small: 'Heebo', 'Heebo Fallback', Arial, 'Arial Hebrew', sans-serif;
  --tracking-display-small: -.03em;

  --fs-body: 18px;
  --lh-body: 1.75;
  --fs-meta-min: 14px;   /* never below this for meta text */
  --fs-input-min: 16px;  /* prevents iOS zoom */

  /* Mobile display scale (base / mobile-first) */
  --fs-hero: 38px;
  --fs-h1: 34px;
  --fs-h2: 26px;
  --fs-h3: 24px;         /* INFERRED: CLAUDE.md gives no separate mobile h3; using the desktop floor */
  --fs-card-title: 23px;
  --lh-display: .96;

  /* ---------- Spacing scale: 4 8 12 16 20 24 32 40 48 64 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  --section-pad-min: 38px;
  --section-pad-max: 52px;
  --card-pad-min: 18px;
  --card-pad-max: 26px;

  /* ---------- Radius / shadow ---------- */
  --radius-card: 18px;
  --radius-card-lg: 26px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 16px rgba(19, 31, 74, .07);
  --shadow-card-hover: 0 14px 36px rgba(19, 31, 74, .13);
  --shadow-cta-glow: 0 6px 18px rgba(35, 80, 232, .3); /* cobalt glow for CTA buttons */

  /* ---------- Layout ---------- */
  --container-max: 1180px;
  --gutter: 26px;
  --measure-min: 680px;  /* guide text column */
  --measure-max: 760px;
  --touch-target: 44px;

  /* ---------- Ad slots (zero-CLS reservations) ---------- */
  --ad-slot-mobile: 280px;
  --ad-slot-inline: 110px;
  --ad-slot-sidebar: 250px;

  /* ---------- Motion ---------- */
  --ease-standard: ease-out;
  --duration-hover: 160ms;
}

/* Desktop display scale (CLAUDE.md: "Desktop scale") kicks in at the tablet breakpoint
   and up — CLAUDE.md gives only two named scales (desktop / mobile), so tablet inherits
   the desktop numbers rather than an unspecified third scale. */
@media (min-width: 768px) {
  :root {
    --fs-hero: 60px;      /* 56–64px range, 60 as the mid value */
    --fs-h1: 54px;
    --fs-h2: 36px;        /* 34–38px range */
    --fs-h3: 27px;        /* 26–28px range */
    --fs-card-title: 24px; /* 23–24px range */
    --lh-display: .94;    /* .92–1.0 range */
  }
}

/* ---------- Dark reading mode ----------
   Re-declares tokens on the page root so every component follows with no per-component
   dark styles (CLAUDE.md). Respect prefers-color-scheme first, then let an explicit
   [data-theme] toggle (remembered per visitor) win in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101726;
    --surface-card: #18213A;
    --surface-dark: #1D2740;
    --sky: #17203A;
    --sky-soft: #1D2740;
    --navy: #EAEDF5;      /* ink ONLY in dark mode — never a surface, or navy blocks invert to near-white */
    --ink-soft: #A2ADC6;
    --cobalt: #8FB4F5;
    --baby: #42507A;
  }
}
:root[data-theme="dark"] {
  --paper: #101726;
  --surface-card: #18213A;
  --surface-dark: #1D2740;
  --sky: #17203A;
  --sky-soft: #1D2740;
  --navy: #EAEDF5;
  --ink-soft: #A2ADC6;
  --cobalt: #8FB4F5;
  --baby: #42507A;
}

/* Components pairing a light accent bg with --navy text (Toolbox's yellow count badge)
   or a cobalt bg with white text (QuickAnswer label) must re-scope these two tokens
   locally to their light values wherever they're used — see theme.css for the utility. */
:root {
  --on-light-navy: #131F4A;
  --on-cobalt-text: #FFFFFF;
  /* Fixed (never redefined in dark mode) — for text/icons on surfaces that are ALWAYS dark
     regardless of site theme (footer, toolbox). --paper flips to a dark value in dark mode,
     so it can't be reused here without going dark-text-on-dark-bg. */
  --on-dark: #F7F5EE;
  --on-dark-soft: #A2ADC6;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-hover: 0ms;
  }
}