/*! TYPE — one name per text style.

**A style is ONE variable.** `font:var(--text-hero)` sets family, weight, size and line-height in a
single declaration. A `-spacing` companion carries letter-spacing ONLY where the design asks for one:
94% of the styles here are at zero, so they get no variable and no declaration — `normal` is already
what they want, and a declaration that restates it is noise the next global change has to fight.

Every style is per-brand: the families and the sizes are part of a brand's identity, so switching
`data-brand` re-resolves the type as completely as it re-resolves the colour.

Name = role + size. `--text-hero` is the article headline; `--text-body-lg` is running prose. */


/* THE SHARED SCALE — every style whose metrics are the same on every brand.
   The family is still per-brand: `var(--font-text)` resolves inside each brand block below,
   so one line here already gives four brands their own typeface. */
:root{

  /* IN USE — every style a built page actually renders. A name here says WHERE it is used,
     so reading the component tells you what you are looking at. */
  --text-underline-sm:400 16px/20px var(--font-text);
  --text-article-deck:400 18px/24px var(--font-text);
  --text-article-quote:500 32px/36px var(--font-text);
  --text-subhead-lg:700 32px/32px var(--font-display);
  --text-article-subhead-small:700 20px/24px var(--font-text);
  --text-article-subhead:700 40px/40px var(--font-display);
  --text-display-lg-spacing:-0.01em;
  --text-display-lg:700 52px/44px var(--font-display);
  --text-article-title-spacing:-0.01em;
  --text-display-xl-spacing:-0.01em;
  --text-display-2xl-spacing:-0.01em;
  --text-display-xl:700 64px/56px var(--font-display);
  --text-display-2xl:700 80px/72px var(--font-display);
  --text-article-title:700 80px/72px var(--font-display);
  --text-body-lg:400 19px/28px var(--font-text);
  --text-display-md-spacing:-0.005em;
  --text-display-md:700 30px/30px var(--font-display);
  --text-display-sm:700 32px/28px var(--font-display);
  --text-display-xs:700 24px/22px var(--font-display);
  --text-headline-md:700 18px/20px var(--font-text);
  --text-headline-sm:700 16px/18px var(--font-text);
  --text-headline-xs:700 14px/16px var(--font-text);
  --text-icon-sm:400 18px/18px var(--font-icon);
  --text-icon-xs:400 16px/16px var(--font-icon);
  --text-label-md:500 16px/18px var(--font-text);
  --text-section-lg:700 60px/60px var(--font-display);
  --text-section-md:700 40px/40px var(--font-display);
  --text-section-sm:700 28px/28px var(--font-display);
  --text-title-lg-spacing:-0.01em;
  --text-title-lg:700 64px/64px var(--font-text);
  --text-title-md-spacing:-0.005em;
  --text-title-md:700 52px/52px var(--font-text);
  --text-title-sm-spacing:-0.005em;
  --text-title-sm:700 44px/44px var(--font-text);
  --text-underline-lg:400 20px/24px var(--font-text);
  --text-underline-md:400 20px/26px var(--font-text);
  --text-underline-xs-spacing:-0.0025em;
  --text-underline-xs:400 16px/20px var(--font-text);

  /* READY — measured for all four brands, rendered by no page yet.
     Kept ON PURPOSE so the scale has no holes: `subhead` is used at sm, lg and xl, and a
     missing md would push somebody to the wrong size rather than the right one.
     DO NOT pick one because the name looks right — read the design frame, then rename it for
     what it turned out to be, the way the article styles above were named. */
  --text-body-sm:400 16px/24px var(--font-text);
  --text-body-xs:400 12px/16px var(--font-text);
  --text-button-lg:700 20px/24px var(--font-text);
  --text-button-sm:700 16px/18px var(--font-text);
  --text-byline-sm:700 14px/16px var(--font-text);
  --text-byline-special-spacing:0.01em;
  --text-byline-special:500 20px/24px var(--font-text);
  --text-byline-xs:700 12px/14px var(--font-text);
  --text-caption-md:400 14px/16px var(--font-text);
  --text-cta-lg:400 20px/24px var(--font-text);
  --text-cta-md:700 16px/18px var(--font-text);
  --text-cta-sm:400 14px/16px var(--font-text);
  --text-cta-xl:700 24px/24px var(--font-display);
  --text-cta-xs:400 12px/14px var(--font-text);
  --text-date-sm:400 12px/16px var(--font-text);
  --text-headline-2xl:600 32px/36px var(--font-text);
  --text-headline-lg:700 20px/24px var(--font-text);
  --text-headline-xl:600 24px/28px var(--font-text);
  --text-icon-2xs:400 12px/12px var(--font-icon);
  --text-icon-lg:400 32px/32px var(--font-icon);
  --text-icon-md:400 24px/24px var(--font-icon);
  --text-icon-xl:400 48px/48px var(--font-icon);
  --text-label-card:700 13px/14px var(--font-text);
  --text-label-lg:700 20px/24px var(--font-text);
  --text-label-sm:500 14px/16px var(--font-text);
  --text-label-xs:500 12px/14px var(--font-text);
  --text-lid-md:500 24px/28px var(--font-text);
  --text-menu-0-spacing:0.01em;
  --text-menu-0:700 40px/40px var(--font-display);
  --text-menu-1:700 16px/20px var(--font-text);
  --text-menu-2:400 16px/16px var(--font-text);
  --text-nav:700 20px/20px var(--font-display);
  --text-strong-2xl:700 32px/36px var(--font-text);
  --text-strong-2xs:700 12px/14px var(--font-text);
  --text-strong-lg:700 20px/24px var(--font-text);
  --text-strong-md:700 18px/20px var(--font-text);
  --text-strong-sm:700 16px/18px var(--font-text);
  --text-strong-xl:700 24px/28px var(--font-text);
  --text-strong-xs:700 14px/16px var(--font-text);
  --text-subhead-2xl:700 48px/48px var(--font-display);
  --text-subhead-md:700 28px/28px var(--font-display);
  --text-subhead-xs:700 18px/18px var(--font-text);
  --text-text-2xl:400 32px/36px var(--font-text);
  --text-text-2xs:400 12px/14px var(--font-text);
  --text-text-lg:400 20px/24px var(--font-text);
  --text-text-md:400 18px/20px var(--font-text);
  --text-text-medium-2xl:500 32px/36px var(--font-text);
  --text-text-medium-2xs:500 12px/14px var(--font-text);
  --text-text-medium-lg:500 20px/24px var(--font-text);
  --text-text-medium-md:500 18px/20px var(--font-text);
  --text-text-medium-sm:500 16px/18px var(--font-text);
  --text-text-medium-xl:500 24px/28px var(--font-text);
  --text-text-medium-xs:500 14px/16px var(--font-text);
  --text-text-sm:400 16px/18px var(--font-text);
  --text-text-xl:400 24px/28px var(--font-text);
  --text-text-xs:400 14px/16px var(--font-text);
  --text-title-2xl-spacing:-0.01em;
  --text-title-2xl:700 96px/80px var(--font-text);
  --text-title-xl-spacing:-0.01em;
  --text-title-xl:700 80px/72px var(--font-text);
  --text-utility-message-sm:400 13px/16px var(--font-text);
}


/* eye — its typefaces, and ONLY the styles where it departs from the shared scale. */
[data-brand="eye"]{

  /* TYPEFACES — written once; every style below points at these. */
  --font-display:"Almoni Tzar DL 4.0 AAA", system-ui, sans-serif;
  --font-text:"narkiss-tam", "Narkiss Tam", system-ui, sans-serif;
  --font-icon:"indy-press";

  /* ICON SIZE — the glyph box, where a whole text style is the wrong tool. */
  --icon-2xs:12px;
  --icon-xs:16px;
  --icon-sm:18px;
  --icon-md:24px;
  --icon-lg:32px;
  --icon-xl:48px;


  --text-byline-xs:600 12px/14px var(--font-text);
  --text-cta-lg:700 20px/24px var(--font-text);
  --text-cta-sm:500 14px/16px var(--font-text);
  --text-cta-xs:700 12px/14px var(--font-text);
  --text-display-md:700 40px/34px var(--font-display);
  --text-headline-lg:600 20px/24px var(--font-text);
  --text-headline-md:600 18px/20px var(--font-text);
  --text-headline-sm:600 16px/18px var(--font-text);
  --text-headline-xs:500 15px/17px var(--font-text);
  --text-menu-1:700 18px/24px var(--font-text);
  --text-underline-lg:500 22px/28px var(--font-text);
  --text-underline-md:500 20px/26px var(--font-text);
  --text-article-deck:500 20px/26px var(--font-text);
  --text-underline-sm:500 18px/24px var(--font-text);
}

/* shakuf — its typefaces, and ONLY the styles where it departs from the shared scale. */
[data-brand="shakuf"]{

  /* TYPEFACES — written once; every style below points at these. */
  /* one face for both roles — this brand sets its headlines in its text typeface. */
  --font-display:"Abraham TRIAL", system-ui, sans-serif;
  --font-text:"Abraham TRIAL", system-ui, sans-serif;
  --font-icon:"indy-press";

  /* ICON SIZE — the glyph box, where a whole text style is the wrong tool. */
  --icon-2xs:12px;
  --icon-xs:16px;
  --icon-sm:18px;
  --icon-md:24px;
  --icon-lg:32px;
  --icon-xl:48px;


  --text-cta-xl:400 24px/24px var(--font-text);
  --text-article-title:700 68px/68px var(--font-display);
  --text-display-lg:700 44px/44px var(--font-display);
  --text-display-sm:700 24px/26px var(--font-display);
  --text-display-xl:700 56px/56px var(--font-display);
  --text-display-2xl:500 68px/68px var(--font-display);
  --text-display-xs:700 20px/24px var(--font-display);
  --text-headline-2xl:700 32px/36px var(--font-text);
  --text-headline-xl:700 24px/28px var(--font-text);
  --text-label-md:400 16px/18px var(--font-text);
  --text-label-sm:400 14px/16px var(--font-text);
  --text-label-xs:400 12px/14px var(--font-text);
  --text-menu-0:700 32px/36px var(--font-display);
  --text-menu-1:500 18px/24px var(--font-text);
  --text-nav:500 18px/18px var(--font-text);
  --text-section-lg:700 52px/52px var(--font-text);
  --text-section-md:700 32px/32px var(--font-text);
  --text-section-sm:700 24px/24px var(--font-text);
  --text-subhead-2xl:700 48px/48px var(--font-text);
  --text-subhead-lg:700 28px/28px var(--font-text);
  --text-subhead-md:700 24px/24px var(--font-text);
  --text-article-subhead-small:700 20px/20px var(--font-text);
  --text-article-subhead:700 28px/28px var(--font-text);
  --text-subhead-xs:700 18px/20px var(--font-text);
  --text-underline-lg:400 22px/28px var(--font-text);
  --text-underline-md:400 20px/26px var(--font-text);
  --text-article-deck:400 20px/26px var(--font-text);
  --text-underline-sm:400 18px/24px var(--font-text);
}

/* ham — its typefaces, and ONLY the styles where it departs from the shared scale. */
[data-brand="ham"]{
  --text-underline-md:400 18px/26px var(--font-text);

  /* TYPEFACES — written once; every style below points at these. */
  --font-display:"Publico Headline Hebrew TRIAL", system-ui, sans-serif;
  --font-text:"Graphik HLAR TRIAL", system-ui, sans-serif;
  --font-icon:"indy-press";

  /* ICON SIZE — the glyph box, where a whole text style is the wrong tool. */
  --icon-2xs:12px;
  --icon-xs:16px;
  --icon-sm:18px;
  --icon-md:24px;
  --icon-lg:32px;
  --icon-xl:48px;


  --text-body-lg:400 18px/28px var(--font-text);
  --text-button-lg:700 18px/22px var(--font-text);
  --text-button-sm:700 15px/18px var(--font-text);
  --text-byline-special:700 20px/24px var(--font-text);
  --text-byline-xs:500 12px/14px var(--font-text);
  --text-cta-md:400 16px/18px var(--font-text);
  --text-cta-xl:800 24px/28px var(--font-display);
  --text-article-title:800 68px/68px var(--font-display);
  --text-display-lg:800 44px/48px var(--font-display);
  --text-display-md:800 32px/34px var(--font-display);
  --text-display-sm:800 24px/26px var(--font-display);
  --text-display-xl:800 56px/56px var(--font-display);
  --text-display-2xl:800 68px/68px var(--font-display);
  --text-display-xs:800 20px/24px var(--font-display);
  --text-headline-2xl:500 28px/32px var(--font-text);
  --text-headline-lg:500 20px/24px var(--font-text);
  --text-headline-md:500 18px/20px var(--font-text);
  --text-headline-sm:500 16px/18px var(--font-text);
  --text-headline-xl:500 22px/28px var(--font-text);
  --text-headline-xs:500 14px/16px var(--font-text);
  --text-label-card:700 12px/14px var(--font-text);
  --text-label-lg:700 18px/22px var(--font-text);
  --text-label-md:500 14px/16px var(--font-text);
  --text-label-sm:500 13px/15px var(--font-text);
  --text-article-quote:400 40px/44px var(--font-display);
  --text-lid-md:800 28px/32px var(--font-display);
  --text-menu-0-spacing:0;
  --text-menu-0:800 40px/40px var(--font-display);
  --text-nav:700 16px/20px var(--font-text);
  --text-section-lg:800 60px/60px var(--font-display);
  --text-section-md:800 40px/40px var(--font-display);
  --text-section-sm:800 28px/28px var(--font-display);
  --text-strong-2xl:700 30px/34px var(--font-text);
  --text-strong-2xs:700 11px/13px var(--font-text);
  --text-strong-lg:700 18px/22px var(--font-text);
  --text-strong-md:700 16px/18px var(--font-text);
  --text-strong-sm:700 15px/18px var(--font-text);
  --text-strong-xl:700 22px/26px var(--font-text);
  --text-strong-xs:700 12px/14px var(--font-text);
  --text-subhead-2xl:800 48px/52px var(--font-display);
  --text-subhead-lg:800 32px/36px var(--font-display);
  --text-subhead-md:800 24px/28px var(--font-display);
  --text-article-subhead-small:800 20px/24px var(--font-text);
  --text-article-subhead:800 40px/44px var(--font-display);
  --text-subhead-xs:800 18px/24px var(--font-text);
  --text-text-2xl:400 30px/34px var(--font-text);
  --text-text-2xs:400 11px/13px var(--font-text);
  --text-text-lg:400 18px/22px var(--font-text);
  --text-text-md:400 16px/18px var(--font-text);
  --text-text-medium-2xl:500 30px/34px var(--font-text);
  --text-text-medium-2xs:500 11px/13px var(--font-text);
  --text-text-medium-lg:500 18px/22px var(--font-text);
  --text-text-medium-md:500 16px/18px var(--font-text);
  --text-text-medium-sm:500 15px/18px var(--font-text);
  --text-text-medium-xl:500 22px/26px var(--font-text);
  --text-text-medium-xs:500 12px/14px var(--font-text);
  --text-text-sm:400 15px/18px var(--font-text);
  --text-text-xl:400 22px/26px var(--font-text);
  --text-text-xs:400 12px/14px var(--font-text);
  --text-title-2xl:700 88px/88px var(--font-text);
  --text-title-lg:700 60px/60px var(--font-text);
  --text-title-md:700 48px/48px var(--font-text);
  --text-title-sm:700 40px/40px var(--font-text);
  --text-title-xl:700 72px/72px var(--font-text);
  --text-underline-xs:400 15px/22px var(--font-text);
  --text-utility-message-sm:400 12px/14px var(--font-text);
}

/* boker — its typefaces, and ONLY the styles where it departs from the shared scale. */
[data-brand="boker"]{
  --text-underline-md:400 24px/30px var(--font-text);

  /* TYPEFACES — written once; every style below points at these. */
  /* one face for both roles — this brand sets its headlines in its text typeface. */
  --font-display:"SimplerPro", system-ui, sans-serif;
  --font-text:"SimplerPro", system-ui, sans-serif;
  --font-icon:"indy-press";

  /* ICON SIZE — the glyph box, where a whole text style is the wrong tool. */
  --icon-2xs:12px;
  --icon-xs:16px;
  --icon-sm:18px;
  --icon-md:24px;
  --icon-lg:32px;
  --icon-xl:48px;


  --text-button-lg:700 18px/22px var(--font-text);
  --text-button-sm:700 15px/18px var(--font-text);
  --text-byline-special:700 20px/24px var(--font-text);
  --text-cta-md:400 16px/18px var(--font-text);
  --text-cta-sm:700 14px/16px var(--font-text);
  --text-cta-xl:700 24px/28px var(--font-text);
  --text-article-title:700 64px/64px var(--font-display);
  --text-display-lg:700 40px/40px var(--font-display);
  --text-display-sm:700 24px/24px var(--font-display);
  --text-display-xl:700 52px/52px var(--font-display);
  --text-display-2xl:700 64px/64px var(--font-display);
  --text-display-xs:700 18px/20px var(--font-display);
  --text-headline-2xl:700 28px/32px var(--font-text);
  --text-headline-xl:700 22px/28px var(--font-text);
  --text-label-card:700 12px/14px var(--font-text);
  --text-label-lg:700 18px/22px var(--font-text);
  --text-label-md:700 14px/16px var(--font-text);
  --text-label-sm:400 13px/15px var(--font-text);
  --text-label-xs:700 12px/14px var(--font-text);
  --text-article-quote:900 32px/36px var(--font-text);
  --text-lid-md:900 28px/32px var(--font-text);
  --text-menu-0-spacing:0;
  --text-menu-0:900 40px/40px var(--font-display);
  --text-nav:700 18px/20px var(--font-text);
  --text-section-lg:900 52px/52px var(--font-text);
  --text-section-md:900 32px/32px var(--font-text);
  --text-section-sm:900 24px/24px var(--font-text);
  --text-strong-2xl:700 30px/34px var(--font-text);
  --text-strong-2xs:700 11px/13px var(--font-text);
  --text-strong-lg:700 18px/22px var(--font-text);
  --text-strong-md:700 16px/18px var(--font-text);
  --text-strong-sm:700 15px/18px var(--font-text);
  --text-strong-xl:700 22px/26px var(--font-text);
  --text-strong-xs:700 12px/14px var(--font-text);
  --text-subhead-2xl:900 48px/52px var(--font-text);
  --text-subhead-lg:900 32px/36px var(--font-text);
  --text-subhead-md:900 24px/28px var(--font-text);
  --text-article-subhead-small:900 20px/24px var(--font-text);
  --text-article-subhead:900 40px/44px var(--font-text);
  --text-subhead-xs:900 18px/24px var(--font-text);
  --text-text-2xl:400 30px/34px var(--font-text);
  --text-text-2xs:400 11px/13px var(--font-text);
  --text-text-lg:400 18px/22px var(--font-text);
  --text-text-md:400 16px/18px var(--font-text);
  --text-text-medium-2xl:400 30px/34px var(--font-text);
  --text-text-medium-2xs:400 11px/13px var(--font-text);
  --text-text-medium-lg:400 18px/22px var(--font-text);
  --text-text-medium-md:400 16px/18px var(--font-text);
  --text-text-medium-sm:400 15px/18px var(--font-text);
  --text-text-medium-xl:400 22px/26px var(--font-text);
  --text-text-medium-xs:400 12px/14px var(--font-text);
  --text-text-sm:400 15px/18px var(--font-text);
  --text-text-xl:400 22px/26px var(--font-text);
  --text-text-xs:400 12px/14px var(--font-text);
  --text-title-2xl:900 96px/88px var(--font-text);
  --text-title-lg:900 60px/60px var(--font-text);
  --text-title-md:900 52px/52px var(--font-text);
  --text-title-sm:900 44px/44px var(--font-text);
  --text-title-xl:900 72px/72px var(--font-text);
  --text-utility-message-sm:400 12px/14px var(--font-text);
}


/*! THE RESPONSIVE LADDER — a style knows its own sizes.

Measured across all eight article templates: when a style steps down it steps down EXACTLY ONE
size, never two, and only four families step at all. `label`, `caption`, `byline`, `cta`, `body`,
`nav`, `icon`, `section`, `title` and `headline` are the same size at every width — which is why
there is no blanket "everything shrinks on tablet" rule here. That would shrink text the design
keeps still.

Because the ladder lives on the STYLE, every component that uses one gets it for free: a page built
next month writes `font:var(--text-article-title)` once and is responsive. A component that needs
something else overrides `font` in its own file — the component layer comes later, so it wins.

These blocks sit LAST on purpose: they carry the same specificity as the brand blocks above, so
source order is what lets them re-point a style for every brand at once. A brand that needs its own
step writes `@media (…){ [data-brand="x"]{ … } }` after this — higher specificity, so it wins. */

@media (max-width:1023px){
  :root{
    --text-article-title:var(--text-display-xl);
  }
}

@media (max-width:767px){
  :root{
    --text-article-title:var(--text-display-lg);
    --text-article-deck:var(--text-underline-sm);
    --text-article-subhead:var(--text-subhead-lg);
    --text-article-quote:var(--text-lid-md);
  }
}