/* ─────────────────────────────
   BRAND THEME: By Default (instance 0)
   ─────────────────────────────

   By Default's designer tokens, extracted from the engine so the
   engine ships neutral defaults and every brand (this one included)
   expresses itself the same way: primitives in, semantics cascade.

   This file carries the brand's self-hosted @font-face declarations
   and restores only §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 needs restating here.

   Pairs with cms/brands/bydefault/brand.json (admin settings).
   Loaded as a static render-blocking link on every root page.
   ───────────────────────────── */


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

/* Zalando Sans — variable font (weight 300-900, width 75%-125%) */
@font-face {
  font-family: "Zalando Sans";
  src: url("../../assets/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("../../assets/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("../../assets/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("../../assets/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("../../assets/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("../../assets/fonts/bugrino/Bugrino-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bugrino";
  src: url("../../assets/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("../../assets/fonts/caput/caput.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Kaneda Gothic — loaded via Adobe Typekit (use.typekit.net/wgr3lwl.css).
   The kit link is emitted into every page head from brand.json
   (typekitId); no local @font-face here. */

/* ES Face — self-hosted (Light, Regular, Medium, SemiBold, Bold + italics) */
@font-face {
  font-family: "ES Face";
  src: url("../../assets/fonts/es-face/ESFace-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ES Face";
  src: url("../../assets/fonts/es-face/ESFace-LightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ES Face";
  src: url("../../assets/fonts/es-face/ESFace-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ES Face";
  src: url("../../assets/fonts/es-face/ESFace-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ES Face";
  src: url("../../assets/fonts/es-face/ESFace-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ES Face";
  src: url("../../assets/fonts/es-face/ESFace-MediumItalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ES Face";
  src: url("../../assets/fonts/es-face/ESFace-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ES Face";
  src: url("../../assets/fonts/es-face/ESFace-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ES Face";
  src: url("../../assets/fonts/es-face/ESFace-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}


:root {

  /* ── Typography ──────────────────────────── */
  --font-primary: "Zalando Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary: "ES Face", "Zalando Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 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);


  /* ── 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;
}