/* לזלול 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, dark header, footer */
  --ink-soft: #4A423B;     /* secondary text, meta */
  --white: #FFFFFF;        /* card surface */

  --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 */

  --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);

  --text-body: var(--ink);
  --text-muted: var(--ink-soft);
  --text-on-inverse: rgba(255, 255, 255, .88);
  --text-accent: var(--red-deep);

  --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 */

  --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);

  /* ============ TYPOGRAPHY ============ */
  --font-display: 'Karantina', 'Arial Hebrew', sans-serif;   /* headlines, logo, section heads */
  --font-body: 'Heebo', '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;
}