/* ====================================================================
   SPROSSN · Design Tokens
   "Spannung. Geerdet. Voltage."
   Dark-first. Light for print. One uncompromising accent.
   ==================================================================== */

/* All brand fonts self-hosted from fonts/. No external font requests. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Geist-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/GeistMono-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/GeistMono-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {

  /* -- COLORS · Primary ---------------------------------------------- */
  --char:           #14140F;   /* warm charcoal — primary background    */
  --char-soft:      #1F1F1A;   /* card surface on dark                  */
  --char-deep:      #0A0A07;   /* deeper recess                         */

  --bone:           #EDE7D3;   /* cream — light-mode background         */
  --bone-soft:      #E4DCC4;
  --bone-deep:      #D5CCAE;

  /* -- COLORS · Voltage (THE accent) --------------------------------- */
  --voltage:        #E5FF00;   /* acid yellow — only freestanding on dark */
  --voltage-deep:   #7A8800;   /* AA-compliant on bone (4.5:1)          */
  --voltage-mist:   #F4FA9E;   /* soft tint background                  */
  --voltage-tint:   #2A2D14;   /* dark-mode badge background            */

  /* -- COLORS · Text & Rules ----------------------------------------- */
  --mute-dark:      #6A6A5E;
  --mute-light:     #7C7965;
  --rule-dark:      #2D2D26;
  --rule-light:     #C8C0A4;

  /* -- COLORS · Signal (restrictive — errors/warnings only) ---------- */
  --amber:          #FF9500;
  --signal:         #C53030;

  /* -- SEMANTIC tokens (Dark mode default) --------------------------- */
  --bg:             var(--char);
  --bg-surface:     var(--char-soft);
  --bg-recess:      var(--char-deep);
  --fg:             var(--bone);
  --fg-muted:       var(--mute-dark);
  --rule:           var(--rule-dark);
  --accent:         var(--voltage);

  /* -- TYPE · Families ---------------------------------------------- */
  --font-display:   "Fraunces", "Times New Roman", serif;
  --font-body:      "Geist", system-ui, -apple-system, sans-serif;
  --font-mono:      "Geist Mono", "JetBrains Mono", monospace;

  /* -- TYPE · Sizes (8-step scale) ---------------------------------- */
  --fs-display-xl:    120px;     /* Hero · Fraunces 300 · LH 0.9   */
  --fs-display-l:     72px;      /* Section · Fraunces 300 · LH 0.98 */
  --fs-display-m:     48px;      /* Subhead · Fraunces 400 · LH 1.05 */
  --fs-display-italic: 56px;     /* Pull quote · Fraunces Italic 300 */
  --fs-body-l:        20px;      /* Lede · Geist 400 · LH 1.55  */
  --fs-body-m:        16px;      /* Default · Geist 400 · LH 1.6 */
  --fs-body-s:        13px;      /* Caption · Geist 400 · LH 1.55 */
  --fs-label:         12px;      /* Eyebrow · Geist Mono 500 · caps */

  /* -- TYPE · Letterspacing ----------------------------------------- */
  --ls-display-xl:    -0.05em;
  --ls-display:       -0.04em;
  --ls-display-tight: -0.03em;
  --ls-body-l:        -0.01em;
  --ls-label:         0.10em;

  /* -- SPACING · 4px scale ------------------------------------------ */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;

  /* -- LINES & BORDERS · Sharp, flat, no shadows ------------------- */
  --border-thin:   1px solid var(--rule);
  --border-accent: 4px solid var(--voltage);
  --radius:        0;        /* Sprossn is hard-edged. No rounding.   */
}

/* ---- LIGHT-MODE OVERRIDES (opt-in via .light or media query) ---- */
.light, [data-mode="light"] {
  --bg:         var(--bone);
  --bg-surface: var(--bone-soft);
  --bg-recess:  var(--bone-deep);
  --fg:         var(--char);
  --fg-muted:   var(--mute-light);
  --rule:       var(--rule-light);
  /* accent remains voltage — but treat as CONTAINER, never freestanding text */
}

/* ==========================================================
   SEMANTIC TYPE CLASSES
   ========================================================== */

.display-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(64px, 10vw, var(--fs-display-xl));
  line-height: 0.9;
  letter-spacing: var(--ls-display-xl);
  color: var(--fg);
}

.display-l {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 5.5vw, var(--fs-display-l));
  line-height: 0.98;
  letter-spacing: var(--ls-display);
  color: var(--fg);
}

.display-m {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.2vw, var(--fs-display-m));
  line-height: 1.05;
  letter-spacing: var(--ls-display-tight);
  color: var(--fg);
}

.display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 4vw, var(--fs-display-italic));
  line-height: 1.1;
  letter-spacing: var(--ls-display-tight);
  color: var(--fg);
}

/* Italic accent — Fraunces italic in voltage. The signature move. */
.display-xl em,
.display-l em,
.display-m em,
.display-italic em {
  font-style: italic;
  font-weight: 400;
  color: var(--voltage);
}

/* On LIGHT bg, never use freestanding voltage italic — convert to highlight marker */
.light .display-xl em,
.light .display-l em,
.light .display-m em,
.light .display-italic em,
[data-mode="light"] .display-xl em,
[data-mode="light"] .display-l em,
[data-mode="light"] .display-m em,
[data-mode="light"] .display-italic em {
  color: var(--char);
  background: var(--voltage);
  padding: 0 0.18em;
  margin: 0 -0.05em;
}

.body-l {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-l);
  line-height: 1.55;
  letter-spacing: var(--ls-body-l);
  color: var(--fg);
}

.body-m {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-m);
  line-height: 1.6;
  color: var(--fg);
}

.body-s {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-s);
  line-height: 1.55;
  color: var(--fg-muted);
}

/* Mono label — eyebrow, UI tag, module identifier */
.label-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--voltage);
}

/* Lede — italic Fraunces, 75% opacity bone */
.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  color: rgba(237, 231, 211, 0.75);
  max-width: 720px;
}
.light .lede, [data-mode="light"] .lede {
  color: rgba(20, 20, 15, 0.7);
}

/* Inline link — voltage underline on dark, voltage highlight on light */
a.inline {
  color: var(--voltage);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.light a.inline, [data-mode="light"] a.inline {
  color: var(--char);
  text-decoration: none;
  background-image: linear-gradient(var(--voltage), var(--voltage));
  background-position: 0 88%;
  background-repeat: no-repeat;
  background-size: 100% 36%;
  padding: 0 2px;
  font-weight: 500;
}

/* ==========================================================
   GLOBAL RESETS (optional — opt-in by adding .sprossn-app)
   ========================================================== */
.sprossn-app {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Noise overlay — subtle warm texture, screen-blend */
.sprossn-app.noise { position: relative; }
.sprossn-app.noise::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.4;
  background-image: url("assets/noise-overlay.svg");
}