/* ============================================================
   WINTER ROSE — Colors & Type Foundations
   Paranormal / Fantasy Romance — moody, ornate, cinematic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
  /* ---------- CORE PALETTE ----------
     Drawn directly from the cover art:
       - Deep midnight backgrounds (Luna Moon series)
       - Charred black + ember red (The Enoza Successor)
       - Cold moonlight cyan, dusk violet, blood-rose accents
  */

  /* Surfaces — the night */
  --wr-ink:        #0a0710;   /* near-black, faint violet undertone */
  --wr-midnight:   #11101c;   /* primary background */
  --wr-dusk:       #1a1726;   /* card / raised surface */
  --wr-fog:        #2a2638;   /* hover surface, subtle dividers */
  --wr-stone:      #3a3548;   /* borders, muted lines */

  /* Foreground — moonlight */
  --wr-moonlight:  #f4ecdc;   /* primary text on dark — warm bone white */
  --wr-pearl:      #e6d9b8;   /* secondary text, gilded warmth */
  --wr-mist:       #b9b0c4;   /* tertiary text, muted */
  --wr-ash:        #6b6478;   /* disabled, captions */

  /* Brand accents */
  --wr-rose:       #b03050;   /* the "Rose" — blood-rose, signature */
  --wr-rose-deep:  #7a1f38;   /* pressed / hover-deeper */
  --wr-rose-soft:  #e8a4b6;   /* tints, romantic glow */

  --wr-ember:      #d94a2a;   /* fire / flame from Successor cover */
  --wr-ember-glow: #ff8c5a;   /* highlight, lift */

  --wr-gold:       #c9a96a;   /* ornament, filigree, gilded edge */
  --wr-gold-deep:  #8a6d3a;
  --wr-gold-soft:  #e7d4a3;

  --wr-moon:       #c8d6e8;   /* cold lunar accent (Luna Moon series) */
  --wr-violet:     #6b4a8a;   /* dusk, magic */
  --wr-violet-deep:#3d2856;

  /* Semantic */
  --wr-success:    #6b8a5a;   /* sage — used sparingly */
  --wr-warning:    var(--wr-ember);
  --wr-danger:     var(--wr-rose);
  --wr-info:       var(--wr-moon);

  /* Foreground tokens (semantic) */
  --fg-1: var(--wr-moonlight);
  --fg-2: var(--wr-pearl);
  --fg-3: var(--wr-mist);
  --fg-4: var(--wr-ash);
  --fg-accent: var(--wr-rose);
  --fg-gold:   var(--wr-gold);

  /* Background tokens (semantic) */
  --bg-0: var(--wr-ink);
  --bg-1: var(--wr-midnight);
  --bg-2: var(--wr-dusk);
  --bg-3: var(--wr-fog);
  --border-1: var(--wr-stone);
  --border-2: var(--wr-fog);

  /* ---------- TYPOGRAPHY ----------
     Three families, each with a job:
       - Display (Cinzel Decorative) → cover-style ornate titles, hero only
       - Title   (Cinzel)           → headings, buttons, all-caps small text
       - Serif   (Cormorant Garamond) → long-form body, prose, romance feel
       - Reading (Lora)              → UI body, captions, chrome
  */
  --font-display: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --font-title:   "Cinzel", "Trajan Pro", Georgia, serif;
  --font-serif:   "Cormorant Garamond", "EB Garamond", Garamond, serif;
  --font-body:    "Lora", "Cormorant Garamond", Georgia, serif;

  /* Type scale — generous, romance-novel rhythm */
  --fs-hero:  clamp(3.5rem, 8vw, 6.5rem);   /* cover-style titles */
  --fs-h1:    clamp(2.5rem, 5vw, 4rem);
  --fs-h2:    clamp(2rem, 3.5vw, 2.75rem);
  --fs-h3:    clamp(1.5rem, 2.5vw, 1.875rem);
  --fs-h4:    1.25rem;
  --fs-lead:  1.25rem;
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.75rem;

  /* Spacing (8pt-ish, with romantic generosity) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radii — soft, never sharp; nothing digital-feeling */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* Shadows — moonlight glow + ink depth */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,.5);
  --shadow-3: 0 12px 40px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  --shadow-glow-rose:  0 0 24px rgba(176, 48, 80, .35);
  --shadow-glow-ember: 0 0 32px rgba(217, 74, 42, .45);
  --shadow-glow-moon:  0 0 40px rgba(200, 214, 232, .25);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.4);

  /* Motion */
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-romance: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 180ms;
  --dur-mid:  320ms;
  --dur-slow: 600ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply these to elements directly
   ============================================================ */

.wr-hero,
[data-wr="hero"] {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--fg-1);
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(0,0,0,.6), 0 0 60px rgba(176,48,80,.2);
}

.wr-h1, h1.wr {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.wr-h2, h2.wr {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.wr-h3, h3.wr {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--fg-1);
}

.wr-h4, h4.wr {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.wr-eyebrow {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-gold);
}

.wr-lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-2);
}

.wr-body, p.wr {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--fg-2);
  text-wrap: pretty;
}

.wr-prose {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.wr-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-3);
}

.wr-caption {
  font-family: var(--font-title);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-4);
}

.wr-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--fg-1);
}

/* Ornamental rule — gold filigree separator */
.wr-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--fg-gold);
}
.wr-rule::before,
.wr-rule::after {
  content: "";
  flex: 0 0 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wr-gold), transparent);
}
.wr-rule::before { background: linear-gradient(90deg, transparent, var(--wr-gold)); }
.wr-rule::after  { background: linear-gradient(90deg, var(--wr-gold), transparent); }