/* ==========================================================================
   Briefgeflüster — Colors & Type
   --------------------------------------------------------------------------
   The DNA of the brand. Burgundy, cream, old gold, ink — always constant.
   Five sub-genre accent colors join the palette one at a time, per Briefreihe.
   ========================================================================== */

/* Webfonts ---------------------------------------------------------------- */
/* Cormorant Garamond — primary literary serif (display + body)              */
/* IM Fell English — historical serif accent (titles, mottos, pull-quotes)   */
/* Nunito — digital sans (UI, web, social)                                   */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=IM+Fell+English:ital@0;1&family=Nunito:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- PRIMARY PALETTE — the four constants ---------------------------- */
  --bg-burgundy:        #6B1A2A;   /* Briefgeflüster Burgundrot — signal     */
  --bg-cream:           #F5EFE6;   /* Briefgeflüster Creme    — surface      */
  --bg-gold:            #C49A6C;   /* Briefgeflüster Altes Gold — line only  */
  --bg-ink:             #1C1814;   /* Briefgeflüster Tinte    — warm black   */

  /* Tonal helpers (derived, used sparingly) */
  --bg-cream-deep:      #EDE4D4;   /* slightly toasted cream for hovers      */
  --bg-cream-shadow:    #E2D6BE;   /* card divider on cream                  */
  --bg-burgundy-deep:   #4A0E1B;   /* burgundy press / shadow                */
  --bg-burgundy-soft:   #8B2E3F;   /* burgundy hover                         */
  --bg-gold-soft:       #D8B689;   /* gold hover (still line-only)           */
  --bg-ink-soft:        #3A332C;   /* secondary text on cream                */
  --bg-ink-mute:        #6B6259;   /* tertiary / metadata text               */

  /* ---- SUB-GENRE ACCENTS — one per Briefreihe -------------------------- */
  --bg-mitternacht:     #2D4A3E;   /* Mystery / Dark Academia / Magic        */
  --bg-anthrazit:       #2C2C2C;   /* Gothic Dark Romance / Forbidden Love   */
  --bg-rubinschatten:   #8B3A4A;   /* Contemporary / Slow Burn / Enemies     */
  --bg-rouge-verblichen:#B8918A;   /* Cozy / Second Chance / Lighthearted    */
  --bg-terrakotta:      #8B5E52;   /* Historical / Adventure / Road-Trip     */

  /* ---- SEMANTIC TOKENS ------------------------------------------------- */
  --color-bg:           var(--bg-cream);          /* base surface — never #fff */
  --color-bg-elevated:  #FBF7EF;                  /* card on cream             */
  --color-fg:           var(--bg-ink);            /* body text                 */
  --color-fg-muted:     var(--bg-ink-soft);
  --color-fg-subtle:    var(--bg-ink-mute);
  --color-accent:       var(--bg-burgundy);       /* signal, headlines, CTA    */
  --color-accent-hover: var(--bg-burgundy-soft);
  --color-accent-press: var(--bg-burgundy-deep);
  --color-line:         var(--bg-gold);           /* dividers, rules, ornaments */
  --color-line-soft:    var(--bg-cream-shadow);
  --color-on-accent:    var(--bg-cream);          /* never #fff over burgundy  */

  /* ---- TYPE FAMILIES --------------------------------------------------- */
  --font-display:   'IM Fell English', 'Cormorant Garamond', Georgia, serif;
  --font-serif:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:      'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- TYPE SCALE ------------------------------------------------------ */
  --type-hero:       clamp(40px, 6vw, 72px);   /* IM Fell English Regular   */
  --type-h1:         clamp(28px, 3.5vw, 40px); /* Cormorant Bold            */
  --type-h2:         clamp(20px, 2vw, 26px);   /* Cormorant SemiBold        */
  --type-body:       18px;                     /* Cormorant Regular         */
  --type-body-sm:    16px;
  --type-italic:     18px;                     /* Cormorant Italic          */
  --type-ui:         15px;                     /* Nunito Regular/SemiBold   */
  --type-ui-sm:      13px;
  --type-meta:       12px;

  /* ---- TRACKING (letter-spacing) -------------------------------------- */
  --track-wordmark:  0.32em;   /* BRIEFGEFLÜSTER — gesperrtes Tracking +80–120 */
  --track-eyebrow:   0.22em;   /* small caps labels, navigation overlines     */
  --track-button:    0.10em;
  --track-tight:     -0.01em;  /* Cormorant headlines look better slightly tight */

  /* ---- LEADING --------------------------------------------------------- */
  --leading-letter:  1.5;      /* Briefe: 1,5-facher Zeilenabstand            */
  --leading-body:    1.55;
  --leading-tight:   1.18;
  --leading-ui:      1.45;

  /* ---- SPACING — derived from the letter ------------------------------- */
  /* Loosely echoes letter-paper margins: 30/25/20 mm                       */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ---- RADII — almost imperceptible. We are paper, not plastic. -------- */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;     /* default — hint of softness, never round            */
  --radius-lg: 6px;
  --radius-pill: 999px; /* only for sub-genre badges                          */

  /* ---- BORDERS --------------------------------------------------------- */
  --border-hairline:  1px solid var(--bg-cream-shadow);
  --border-rule:      1px solid var(--bg-gold);
  --border-strong:    1.5px solid var(--bg-burgundy);

  /* ---- SHADOWS — wax-soft, never glossy. No glow, no bevel. ------------ */
  --shadow-paper:     0 1px 0 rgba(28,24,20,0.04), 0 2px 6px rgba(28,24,20,0.06);
  --shadow-card:      0 1px 0 rgba(28,24,20,0.05), 0 6px 18px rgba(28,24,20,0.08);
  --shadow-letter:    0 8px 28px rgba(28,24,20,0.12), 0 1px 0 rgba(28,24,20,0.06);
  --shadow-press:     inset 0 1px 0 rgba(28,24,20,0.10);

  /* ---- MOTION — slow, like wax cooling --------------------------------- */
  --ease-letter:    cubic-bezier(0.22, 0.61, 0.36, 1);  /* gentle ease-out    */
  --ease-seal:      cubic-bezier(0.4, 0.0, 0.2, 1);     /* press-and-hold     */
  --dur-fast:       160ms;
  --dur-base:       240ms;
  --dur-slow:       420ms;
}

/* ===== Element defaults =================================================== */
html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-serif);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display (hero) — IM Fell English, the historical accent ---------------- */
.bg-display, .bg-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-hero);
  line-height: var(--leading-tight);
  color: var(--color-accent);
  letter-spacing: var(--track-tight);
}

/* H1 / H2 — Cormorant Garamond -------------------------------------------- */
h1, .bg-h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--type-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--color-accent);
  margin: 0 0 var(--space-4);
}
h2, .bg-h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--type-h2);
  line-height: 1.25;
  color: var(--color-fg);
  margin: 0 0 var(--space-3);
}

/* Body — Cormorant Garamond Regular --------------------------------------- */
p, .bg-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--color-fg);
  text-wrap: pretty;
}

/* Italic / atmospheric ----------------------------------------------------- */
.bg-italic, em.bg-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--type-italic);
  color: var(--color-fg-muted);
}

/* Pull quote — IM Fell English Italic ------------------------------------- */
.bg-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  color: var(--color-accent);
}

/* Letter body — strict letter-paper rules --------------------------------- */
.bg-letter-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 12pt;
  line-height: var(--leading-letter);
  text-align: justify;
  hyphens: none;
  color: var(--color-fg);
}

/* Drop-cap (ornamented initial for the first letter of a Reihe) ----------- */
.bg-letter-body.has-dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 400;
  float: left;
  font-size: 4.4em;
  line-height: 0.9;
  padding: 0.05em 0.12em 0 0;
  color: var(--color-accent);
}

/* Wordmark — gesperrtes Tracking +80 to +120 ------------------------------ */
.bg-wordmark {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  color: var(--color-fg);
}

/* Eyebrow / overline / metadata ------------------------------------------- */
.bg-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-meta);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

/* UI — Nunito (digital only — never in print) ------------------------------ */
.bg-ui, button, input, select, textarea, label {
  font-family: var(--font-sans);
  font-size: var(--type-ui);
  line-height: var(--leading-ui);
}

/* Code / mono fallback (rare — used only for spec sheets) ----------------- */
.bg-mono, code, pre {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--color-fg-muted);
}

/* Decorative ornament rule ------------------------------------------------- */
/*  Mirrors the doc's `— · — · — · —` separator                              */
.bg-ornament {
  border: 0;
  height: 1em;
  background: none;
  text-align: center;
  color: var(--color-line);
}
.bg-ornament::before {
  content: '— · — · — · — · — · —';
  font-family: var(--font-serif);
  letter-spacing: 0.4em;
  color: var(--color-line);
}

/* Selection — burgundy, never default blue -------------------------------- */
::selection { background: var(--bg-burgundy); color: var(--bg-cream); }