/* לזלול 2026 — Design tokens → :root.
   Aggregated verbatim from the design system's tokens/{colors,typography,spacing,radius-shadow}.css.
   This is the single source of truth for every color/space/radius/type value in the theme.
   NEVER hardcode a hex anywhere else — reference these variables. Keep in sync with tokens/. */

:root {
  /* ============ COLOR ============ */
  /* base palette — "שוק" (market), the single canonical theme */
  --paper: #FAF5EC;        /* main background — warm paper, never sterile white */
  --paper-deep: #F2EADC;   /* secondary surface / section bands */
  --ink: #171310;          /* primary text — flips light in dark mode */
  --ink-soft: #4A423B;     /* secondary text, meta */
  --white: #FFFFFF;        /* card surface */
  --ink-fixed: #171310;    /* fixed dark ink for "inverse chrome" fills (footer, buttons,
                               badges, scorebox) that pair with a hardcoded light text color —
                               deliberately does NOT flip in dark mode, unlike --ink above */

  --red: #D92B1C;          /* appetite red — brand signature. accent only. */
  --red-deep: #A81E12;     /* red for hover states + red text on light bg */
  --mustard: #F0A81C;      /* highlights, Zlila-score number, "on the shelf" tag */
  --teal: #0E6E64;         /* "from the world" section only — deliberate coolness */
  --raspberry: #B3446C;    /* reviews section */
  --olive: #5C7C3E;        /* events section */
  --notice-ok-fg: #46602C; /* success-notice text — deepened olive, readable on light tint (dark override below) */
  /* Timestamp on the always-red ticker (fixed; never flips). Was #FFD98E, which is only 3.61:1 on
     --red and the text is 15px/bold, so AA wants 4.5. A true gold cannot reach 4.5 on this red
     (it needs ~0.91 relative luminance), so this is the palest warm cream that clears it: 4.58:1 —
     still reads as warm against the white headlines, without failing contrast. */
  --ticker-time: #FFF6E3;

  --line: rgba(23, 19, 16, .14);  /* hairline borders */

  /* semantic aliases */
  --surface-page: var(--paper);
  --surface-band: var(--paper-deep);
  --surface-card: var(--white);
  --surface-inverse: var(--ink-fixed);

  --text-body: var(--ink);
  --text-muted: var(--ink-soft);
  --text-on-inverse: rgba(255, 255, 255, .88); /* pairs with --ink-fixed/--surface-inverse — fixed, does not flip */
  --text-accent: var(--red-deep);

  /* chip text tints — separated from the (unchanging) tinted chip backgrounds so dark mode
     can swap just the foreground for contrast, per section */
  --chip-restaurants-fg: #971a10;
  --chip-food-news-fg: #0a5049;
  --chip-top-picks-fg: #8a2f54;
  --chip-new-on-shelf-fg: #7a5100;
  --chip-food-events-fg: #3f5a2b;
  --chip-guides-fg: #6a4826;
  --trend-new-fg: #1d7a3a;
  /* --red-deep is documented (and used ~25×) as "red text on light bg" — it needs a lighter
     dark-mode value once paper/cards flip dark, same as the chip fg's above. --red-small-text
     covers the handful of small (<18px) --red text usages that are genuinely body-text, not
     brand-color fills/large-display accents — those default to --red unchanged (a plain alias)
     and only diverge from it in dark mode. */
  --red-small-text: var(--red);

  --border-card: var(--line);
  --border-strong: var(--ink);

  /* section color aliases — fixed everywhere */
  --section-restaurants: var(--red);
  --section-shelf: var(--mustard);
  --section-reviews: var(--raspberry);
  --section-events: var(--olive);
  --section-world: var(--teal);
  --section-news: var(--teal);       /* חדשות האוכל ("מהעולם" is a subcategory of it) */
  --section-guides: #9C6B3E;         /* מדריכים — warm bronze */

  /* foreground to pair with a `background: var(--section-*)` fill. White reads on the dark
     sections (red/raspberry/teal/olive/bronze), but mustard (shelf) is too light for white
     (~2:1) — it needs dark text. --ink-fixed (never flips) keeps mustard readable in dark mode
     too, since section colors don't flip. Used via --sec-on (set by lizlol_sec_style). */
  --section-restaurants-on: #fff;
  --section-shelf-on: var(--ink-fixed);
  --section-reviews-on: #fff;
  --section-events-on: #fff;
  --section-world-on: #fff;
  --section-news-on: #fff;
  --section-guides-on: #fff;

  --accent: var(--red);
  --accent-hover: var(--red-deep);
  --score: var(--mustard);

  /* focus ring — mustard reads on paper, red, ink footer and every section color */
  --focus-ring: 3px solid var(--mustard);
  --focus-ring-offset: 2px;

  /* --sec: the CURRENT section color. Defaults to restaurants (red); archive.php,
     single.php and the section blocks override it per queried term. Components read
     var(--sec) so one stylesheet recolors per section. */
  --sec: var(--section-restaurants);
  --sec-on: var(--section-restaurants-on); /* readable text on a var(--sec) fill; set with --sec */

  /* ============ TYPOGRAPHY ============ */
  /* 2nd family = metric-matched fallback (see fonts.css) so webfont swap-in doesn't reflow (CLS). */
  --font-display: 'Karantina', 'Karantina Fallback', 'Arial Hebrew', sans-serif;   /* headlines, logo, section heads */
  --font-body: 'Heebo', 'Heebo Fallback', 'Arial Hebrew', 'Segoe UI', sans-serif;  /* body copy, sub-heads, UI */

  --display-leading: .94;

  --weight-display: 700;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-heavy: 800;
  --weight-black: 900;

  --fs-hero: clamp(44px, 5.6vw, 84px);       /* lead H1 (display) */
  --fs-article-h1: clamp(44px, 5vw, 76px);   /* article H1 (display) */
  --fs-section: 46px;                        /* section head H2 (display) */
  --fs-logo: 52px;                           /* masthead logo (display) */

  --fs-h2: 27px;                             /* article body H2 (Heebo 900) */
  --fs-h3: 16.5px;                           /* card titles (Heebo 800) */
  --fs-lead: 20px;                           /* article dek */
  --fs-body: 18.5px;                         /* article running text */
  --fs-ui: 15px;                             /* nav, buttons, base UI */
  --fs-meta: 13px;                           /* bylines, timestamps */
  --fs-chip: 11.5px;                         /* section chips */

  --leading-body: 1.8;
  --leading-ui: 1.65;
  --leading-tight: 1.35;

  /* ============ SPACING ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;   /* default grid gap between cards */
  --space-5: 18px;
  --space-6: 22px;   /* hero grid gap */
  --space-7: 26px;
  --space-8: 34px;
  --space-9: 44px;   /* section separation */
  --space-10: 52px;

  --wrap-max: 1240px;       /* main content column */
  --wrap-pad: 24px;         /* horizontal page padding */
  --read-max: 760px;        /* article body measure */
  --read-head-max: 860px;   /* article header measure */

  --section-pad-y: 38px;

  /* ============ RADIUS / SHADOW / BORDER ============ */
  --radius-card: 18px;
  --radius-hero: 18px;
  --radius-cta: 26px;
  --radius-pill: 999px;
  --radius-pic: 12px;

  --border-hair: 1px solid var(--line);
  --border-ink: 1.5px solid var(--ink);
  --border-section: 2.5px solid var(--ink);

  --shadow-card-hover: 0 14px 30px rgba(23, 19, 16, .12);
  --shadow-header: 0 6px 24px rgba(23, 19, 16, .12);
  --shadow-shelf: 0 8px 18px rgba(23, 19, 16, .3);
  --shadow-offset: 6px 6px 0 var(--mustard);

  --lift-hover: -3px;
  --lift-hover-lg: -6px;
}

/* ============ DARK MODE ============
   Same "warm paper/ink" identity, inverted: dark charcoal surfaces, warm off-white text.
   Section/brand colors (red/mustard/teal/raspberry/olive/guides-bronze) stay as-is — they're
   the brand, and all are saturated enough to still read on dark surfaces.
   Two paths converge on the same override, both scoped so a manual choice always wins over
   the system preference:
     1. System prefers dark AND no manual override    → @media block, :root:not([data-theme="light"])
     2. Manual override to dark (regardless of system) → :root[data-theme="dark"]
   `assets/js/navigation.js`'s theme-toggle IIFE sets [data-theme] + localStorage; the inline
   FOUC-prevention script in header.php applies a stored choice before first paint.

   --ink is overloaded in this codebase: most of the theme uses it as body-text color (which
   SHOULD flip light-on-dark here), but ~20 components use `background: var(--ink)` as a fixed
   near-black chip/badge/footer fill paired with a hardcoded `color:#fff` (e.g. .lz-footer,
   .lz-scorebox, .lz-btn--ink, .lz-sponsored__tag). Flipping --ink would turn every one of
   those into white-on-white. --ink-fixed (never overridden here) is the escape hatch for
   that second use — see theme.css, every `background: var(--ink-fixed)` used to read
   `background: var(--ink)` before this fix. --text-on-inverse pairs with --ink-fixed and is
   likewise NOT overridden here (it must stay light regardless of theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1B1714;
    --paper-deep: #241E19;
    --ink: #F5EFE6;
    --ink-soft: #B8AFA3;
    --white: #2A2320;
    --line: rgba(255, 255, 255, .14);
    --shadow-card-hover: 0 14px 30px rgba(0, 0, 0, .45);
    --shadow-header: 0 6px 24px rgba(0, 0, 0, .45);
    --shadow-shelf: 0 8px 18px rgba(0, 0, 0, .55);
    --chip-restaurants-fg: #FF7A68;
    --chip-food-news-fg: #4FCFC0;
    --chip-top-picks-fg: #E9829F;
    --chip-new-on-shelf-fg: #FFC24D;
    --chip-food-events-fg: #9FC97A;
    --chip-guides-fg: #D6A579;
    --trend-new-fg: #4CD787;
    --red-deep: #FF6B52;
    --red-small-text: #FF6B52;
    --notice-ok-fg: #9FC97A;
  }
}
:root[data-theme="dark"] {
  --paper: #1B1714;
  --paper-deep: #241E19;
  --ink: #F5EFE6;
  --ink-soft: #B8AFA3;
  --white: #2A2320;
  --line: rgba(255, 255, 255, .14);
  --shadow-card-hover: 0 14px 30px rgba(0, 0, 0, .45);
  --shadow-header: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-shelf: 0 8px 18px rgba(0, 0, 0, .55);
  --chip-restaurants-fg: #FF7A68;
  --chip-food-news-fg: #4FCFC0;
  --chip-top-picks-fg: #E9829F;
  --chip-new-on-shelf-fg: #FFC24D;
  --chip-food-events-fg: #9FC97A;
  --chip-guides-fg: #D6A579;
  --trend-new-fg: #4CD787;
  --red-deep: #FF6B52;
  --red-small-text: #FF6B52;
  --notice-ok-fg: #9FC97A;
}