/* ─────────────────────────────
   BRAND THEME: Erlen Masson (instance 2)
   ─────────────────────────────

   This site's designer tokens, held outside the engine so the engine
   ships neutral defaults and every brand expresses itself the same
   way: primitives in, semantics cascade. Instance 1 is By Default
   (bydefault.studio); this is the second brand to run on the engine,
   which is the point — one engine, more than one brand.

   Values start where the site already stood: the pre-v2 vendored CSS
   carried these exact font slots, warm palette aliases and accent
   ramps inline, so restoring them here renders the site unchanged on
   day one. They are this brand's to move from now on — divergence
   from By Default's palette is an owner decision, made here, with no
   engine change needed.

   Declares §1 primitives (font slots and roles, the warm palette
   aliases, the five accent ramps). The engine's §2 semantic layer
   (light, dark, and the no-JS fallback) resolves through these, so no
   semantic token is restated.

   Kaneda Gothic (display) and P22 Mackinac Pro (secondary) are the
   exceptions — both load from Adobe Typekit via the two kit links in
   chrome.html, so there is no local @font-face for either.

   The tail of this file (ENGINE DIVERGENCES) holds the handful of rules
   that counter the engine outright rather than re-token it. They sat in
   a separate erlen-overrides.css until the two files proved to be the
   same job — brand deviation — split across a distinction you had to
   re-derive on every edit. They loaded adjacently, so folding them in
   changed nothing in the cascade.

   Loaded after design-system.css, before erlen.css.
   ───────────────────────────── */


/* -- @font-face: brand fonts (self-hosted) -- */

/* Zalando Sans — variable font (weight 300-900, width 75%-125%) */
@font-face {
  font-family: "Zalando Sans";
  src: url("../fonts/zalando-sans/ZalandoSans-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zalando Sans";
  src: url("../fonts/zalando-sans/ZalandoSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

/* IBM Plex Mono — self-hosted (Regular, Medium, SemiBold) */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Bugrino — Bold, Bold Italic */
@font-face {
  font-family: "Bugrino";
  src: url("../fonts/bugrino/Bugrino-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bugrino";
  src: url("../fonts/bugrino/Bugrino-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Caput — script display face, single weight */
@font-face {
  font-family: "Caput";
  src: url("../fonts/caput/caput.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ES Face is retired as the secondary face (P22 Mackinac Pro took the slot,
   served from Typekit). The files stay in assets/fonts/es-face/ but nothing
   declares them — re-add an @font-face block here if it comes back. */


:root {

  /* ── Typography ──────────────────────────── */
  --font-primary: "Zalando Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary: "p22-mackinac-pro", Georgia, "Times New Roman", serif;
  --font-tertiary: "Bugrino", sans-serif;
  --font-quaternary: "IBM Plex Mono", monospace;

  --font-display:   "kaneda-gothic", "Zalando Sans", sans-serif;
  --font-playful:   "Bugrino", "Zalando Sans", sans-serif;
  --font-script:    "Caput", cursive;
  --font-editorial: var(--font-secondary);
  --font-code:      var(--font-quaternary);

  /* Headings run on the secondary face; body stays on primary. The engine
     defaults --title-family to --font-primary and resolves h1–h6 through it
     from a single shared rule, so this one line moves every heading on the
     site. Display type opts out on its own: .headline-display sets
     --font-display directly and stays Kaneda Gothic. */
  --title-family: var(--font-secondary);


  /* ── Palette ─────────────────────────────── */
  --warm-white: #f5ebe3;
  --warm-black: #221f1c;


  /* ── Accent ramps ────────────────────────── */
  --red-lighter: #FFE8E3;
  --red-light: #FFD6CD;
  --red: #D92A27;
  --red-dark: #750D0B;
  --blue-lighter: #D5F3FF;
  --blue-light: #B1E6FC;
  --blue: #1A54D6;
  --blue-dark: #152F57;
  --yellow-lighter: #FFF3B8;
  --yellow-light: #FFEA83;
  --yellow: #FFB533;
  --yellow-dark: #7E5700;
  --green-lighter: #DBF7CC;
  --green-light: #B6D6A5;
  --green: #167255;
  --green-dark: #094C45;
  --purple-lighter: #F9E2FF;
  --purple-light: #F5CDFF;
  --purple: #AA4FE3;
  --purple-dark: #600E83;
}


/* ─────────────────────────────
   ENGINE DIVERGENCES — design system v2.2.1
   ─────────────────────────────

   Rules that counter the engine rather than re-token it. Kept minimal:
   every entry names the upstream rule it beats and why, and is deleted
   the moment upstream converges. A growing entry belongs upstream.
   ───────────────────────────── */

/* -- Close button: keep full-contrast chrome --
   The engine's .button.close-btn role class (0,2,0) sets
   --button-color: var(--text-faded) and outranks erlen.css's .close-btn
   (0,1,0). The page-header close control sits on light chrome on every
   page and needs full contrast. */
.button.close-btn {
  --button-color: var(--text-primary);
}

.button.close-btn:hover {
  --button-color: var(--text-primary);
}

/* -- Focus ring: keep the black outset ring on base controls --
   The engine's a/button/[role=button]:focus-visible (0,1,1) beats
   erlen.css's :where(...):focus-visible (0,1,0) and would switch every link
   and button to a 2px inset accent ring that draws through zero-padding icon
   glyphs; its input[type=radio|checkbox]:focus-visible (0,2,1) replaces the
   outline with a box-shadow ring. This restates erlen.css's authored intent
   at a specificity that wins.

   Scope is deliberate: BASE controls only. Component-scoped focus styles in
   the engine (.tab, .accordion-header, .dropdown-item, .rating-star …) sit at
   0,2,0 and still win — which is what erlen.css's :where() was written to
   allow. Do not raise this selector to chase them. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
  box-shadow: none;
}