/* Public-site type tokens: three type roles and the self-hosted faces behind
 * them.
 *
 * WHY A SHEET OF ITS OWN AND NOT A BLOCK IN tokens.css. The rule this repo
 * keeps for tokens is that a custom property must be DEFINED wherever it is
 * USED (the header of assets/css/tokens.css explains it), and tokens.css
 * meets it by being linked only on pages that read it. Operakliniken's home
 * page is one of them: its hero carries a hero_background, so the renderer
 * links tokens.css by its fingerprinted name, tokens.<hash>.css. Any byte
 * added to tokens.css is a new hash, and a new hash is a different link in
 * Operakliniken's HTML, although not one of its computed styles would move.
 * These roles are for pages that have not been built yet, so they live here,
 * in a sheet no page links today, and reach a page the same way tokens.css
 * does: linked by the renderer where a section reads a --type- role. Until
 * then no page carries a byte of it.
 *
 * THE FACES. Self-hosted, never a third-party font host on a customer page.
 * The files live in the shared assets fonts folder, Latin-subset WOFF2 cut
 * from the OFL originals in the google/fonts repository; source, licence and
 * the exact cut are recorded per file in docs/design/credits-dermashoppen.md,
 * and each licence text ships beside its font. A declared face downloads
 * nothing until a rule on the page uses its family, and font-display swap
 * keeps text painted in the fallback while a face loads. The unicode-range is
 * the subset the files were cut to, stated so a character outside it falls
 * through to the fallback stack instead of rendering as a missing glyph.
 *
 * THE ROLES. Each is a family stack that ends in a real system fallback, so
 * a page that reads a role renders readable text before its face arrives and
 * if it never does:
 *
 *   display  headings, one level per screen
 *   body     running text and controls
 *   voice    the clinic's own sentence, italic, the one serif
 *
 * They are shared material a tenant maps FROM, not a default for a tenant's
 * own role names (Operakliniken maps --op-font-display and --op-font-sans to
 * Space Grotesk and Inter): nothing here sets an --op- property. A var() that
 * reads a role still carries its fallback, as the repo rule for var() requires.
 *
 * The voice role carries its style and weight with it, because the voice
 * face exists only in italic: a voice set upright would be a synthesized
 * slant of nothing.
 */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* The voice face is cut to the italic, weights 300 to 400 and optical sizes
   12 to 36, because the voice role is one sentence in italic at reading
   size. */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --type-display: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --type-body: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --type-voice: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --type-voice-style: italic;
  /* 400, the weight the design direction 2026-10-13 measured for the voice
     (design pass 2 round 2, Q5); the face carries 300 to 400. */
  --type-voice-weight: 400;
}

:root {
  --type-display-weight: 500;
  --type-display-leading: 1.12;
  --type-price-weight: 700;
  /* 13 px at the default root size: the smallest text the storefront
     chrome draws (card labels, the phone bar), from 12 px in design round 3. */
  --type-eyebrow-size: .8125rem;
  --type-eyebrow-weight: 700;
  --type-eyebrow-tracking: .14em;
}