/* ============================================================
   VREDA MIT V — Colors & Typography
   ============================================================
   Brand: Vreda Can — Trainerin für Mindfulness, Meditation & Selfcare.
   Tone: warm, einladend, achtsam. Always "Du" (capitalized).

   ---- Real brand fonts (in /fonts/) ----
   Arial Rounded Bold (.ttf)  — chunky rounded sans, matches the
                                Wortmarke. Used for the LOGO, DISPLAY,
                                EYEBROW tracked caps, and chapter labels.
   BeautyDemo (.otf)          — display serif/script for hero headlines
                                and elegant emphasis (italic-feel).
   Lumios Marker (.otf)       — handwritten marker. Personal accents:
                                "Dich", "bist Du", signatures, annotations.
   Body sans                  — Nunito Sans (Google Fonts), the rounded
                                warm sans the brief asks for. No
                                proprietary body font was provided.

   FLAG TO USER: assignments of BeautyDemo (display) vs Lumios-Marker
   (script) vs Arial Rounded (eyebrow/display) are my best guess
   based on filename + the Wortmarke style. Confirm what each font
   should be used for, or swap freely via the CSS vars below.
   ============================================================ */

@font-face {
  font-family: "Arial Rounded";
  src: url("./fonts/Arial_Rounded_Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Beauty Demo";
  src: url("./fonts/BeautyDemo.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Beauty Demo lacks German umlauts (ö ü ä ß) and most extended Latin.
     Restrict to basic ASCII so the next font in the stack picks up the rest. */
  unicode-range: U+0020-007E;
}
@font-face {
  font-family: "Lumios Marker";
  src: url("./fonts/Lumios-Marker.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Body — Nunito Sans (no brand body font provided).
   Cormorant Garamond also imported as a serif fallback when Beauty Demo
   can't render a glyph (e.g. umlauts). */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600&display=swap");

:root {
  /* ---------- COLOR ── PRIMARY ---------- */
  --vreda-mauve:           #B8A0CC;   /* signature, soft */
  --vreda-mauve-deep:      #9B7BB8;   /* signature, saturated */
  --vreda-mauve-ink:       #6E5285;   /* press / hover-darker / text emphasis */

  --vreda-apricot:         #F4A87C;   /* accent, soft */
  --vreda-apricot-deep:    #E89968;   /* accent, saturated, logo color */
  --vreda-apricot-ink:     #B3703E;   /* press / hover-darker */

  --vreda-charcoal:        #3A322E;   /* warm "black" — body text default */
  --vreda-ink:             #2E2C5C;   /* deep plum-ink — big poetic headlines
                                         (matches the "Selfcare & Selbstliebe"
                                         headline color on the workshop flyer).
                                         Use ONLY for display-scale headlines. */
  /* Navy was previously a primary, the brand owner removed it. Var kept
     as an alias of charcoal so existing references resolve to the new
     primary text color. Do NOT introduce new navy usages. */
  --vreda-navy:            var(--vreda-charcoal);
  --vreda-navy-soft:       #5A4F49;

  /* ---------- COLOR ── SURFACE / NEUTRAL ---------- */
  --vreda-cream:           #FBF7F0;   /* default page background — NEVER pure white */
  --vreda-cream-deep:      #F5EFE2;   /* hairline surface separation */
  --vreda-cream-edge:      #ECE3CF;   /* soft border on cream */
  --vreda-paper:           #FFFCF5;   /* lifted cards on cream */

  /* ---------- COLOR ── SECONDARY / WORKBOOK ---------- */
  --vreda-yellow:          #FCE4A6;   /* soft yellow — categorisation */
  --vreda-blue:            #A8C0D6;   /* dusty blue */
  --vreda-sage:            #B8D4B8;   /* sage / mint */
  --vreda-peach:           #F5C9A8;   /* pale peach */
  --vreda-coral:           #E89D8A;   /* light coral */
  --vreda-rose:            #F1B8C2;   /* dusty rose, used for hand-drawn hearts */

  /* ---------- COLOR ── SEMANTIC (Ampel) ---------- */
  --vreda-traffic-green:   #92C28A;
  --vreda-traffic-yellow:  #F2D572;
  --vreda-traffic-orange:  #E89968;
  --vreda-traffic-red:     #D9685E;

  /* ---------- TEXT COLOR TOKENS ---------- */
  --fg-1:   var(--vreda-charcoal);     /* primary text */
  --fg-2:   #5A4F49;                   /* secondary text */
  --fg-3:   #8A7E76;                   /* tertiary / meta */
  --fg-on-mauve:  #FBF7F0;
  --fg-on-navy:   #FBF7F0;
  --fg-emphasis:  var(--vreda-charcoal);
  --fg-accent:    var(--vreda-mauve-deep);
  --fg-script:    var(--vreda-mauve-deep);

  /* ---------- LINK ---------- */
  --link:        var(--vreda-mauve-deep);
  --link-hover:  var(--vreda-mauve-ink);

  /* ---------- TYPE — FAMILIES ----------
     `--font-display` — PRIMARY display & headlines. Arial Rounded Bold.
       Same family as the Wortmarke. Supports full German (ä ö ü ß).
       Use for ALL full sentences and multi-word headings.
     `--font-rounded` — alias of display.
     `--font-script` — Lumios Marker. SINGLE-WORD handwritten accents
       only ("Dich", "Du", "bist Du"). NEVER full sentences.
     `--font-accent` — Beauty Demo. SINGLE-WORD decorative accents
       only ("Selfcare", "Selflove"). ASCII only — no umlauts. NEVER
       full sentences.
     `--font-sans` — Nunito Sans body. */
  --font-display: "Arial Rounded", "Nunito", "Quicksand", "Arial Rounded MT Bold", sans-serif;
  --font-rounded: var(--font-display);
  --font-accent:  "Beauty Demo", "Cormorant Garamond", "Spectral", Georgia, serif;
  --font-sans:    "Nunito Sans", "Nunito", "DM Sans", -apple-system, system-ui, sans-serif;
  --font-script:  "Lumios Marker", "Caveat", "Sacramento", "Homemade Apple", cursive;

  /* Back-compat alias. */
  --font-serif:   var(--font-display);

  /* ---------- TYPE — SCALE ---------- */
  /* generous, breathy. Display sizes lean LARGE. */
  --fs-display:    clamp(48px, 6vw, 84px);
  --fs-h1:         clamp(36px, 4.2vw, 56px);
  --fs-h2:         clamp(28px, 3vw, 40px);
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    19px;
  --fs-body:       17px;
  --fs-body-sm:    15px;
  --fs-caption:    13px;
  --fs-eyebrow:    13px;   /* all-caps chapter label */
  --fs-script-lg:  56px;
  --fs-script:     34px;
  --fs-script-sm:  24px;

  /* ---------- TYPE — TRACKING ---------- */
  --tracking-eyebrow: 0.28em;   /* breathy chapter labels: "S T R E S S" */
  --tracking-display: 0.02em;
  --tracking-body:    0.00em;
  --tracking-tight:  -0.01em;

  /* ---------- TYPE — LEADING ---------- */
  --lh-display:  1.15;
  --lh-heading:  1.25;
  --lh-body:     1.65;     /* generous, breathing */
  --lh-loose:    1.8;

  /* ---------- RADIUS ── soft, no hard edges ---------- */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   16px;   /* default card radius */
  --r-lg:   24px;
  --r-pill: 999px;

  /* ---------- SHADOW ── never harsh ---------- */
  --shadow-1: 0 1px 2px rgba(58, 50, 46, 0.04),
              0 2px 8px rgba(58, 50, 46, 0.04);
  --shadow-2: 0 4px 12px rgba(58, 50, 46, 0.06),
              0 8px 24px rgba(58, 50, 46, 0.05);
  --shadow-3: 0 12px 32px rgba(58, 50, 46, 0.10);

  /* ---------- SPACING ---------- */
  --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;       /* between chapters — Vreda layouts breathe */

  /* ---------- BORDER ---------- */
  --border-soft: 1px solid var(--vreda-cream-edge);
  --border-line: 1px solid #D8CFB8;          /* writing line on reflection pages */
  --underline-script: 2px solid var(--vreda-apricot-deep);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--vreda-cream);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Display — biggest, serif, navy */
.v-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--vreda-navy);
}

/* H1 — section opener (serif) */
.v-h1, h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--vreda-navy);
  margin: 0 0 var(--sp-5);
}

/* H2 — sub-section (serif) */
.v-h2, h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--vreda-navy);
  margin: 0 0 var(--sp-4);
}

.v-h3, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--vreda-navy);
  margin: 0 0 var(--sp-3);
}

.v-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--vreda-navy);
  margin: 0 0 var(--sp-2);
}

/* Eyebrow — ALL-CAPS chapter label, generously tracked
   examples: "STRESS", "REFLEXION", "WILLKOMMEN!" */
.v-eyebrow {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--vreda-mauve-deep);
}
.v-eyebrow--large {
  font-size: 24px;
  letter-spacing: var(--tracking-eyebrow);
}

/* Body */
.v-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}
.v-body--lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
}
.v-body--sm {
  font-size: var(--fs-body-sm);
}

/* Lead — first paragraph after a heading */
.v-lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

/* Script — handwritten emphasis. Use sparingly. */
.v-script {
  font-family: var(--font-script);
  font-weight: 500;
  font-size: var(--fs-script);
  line-height: 1.1;
  color: var(--fg-script);
}
.v-script--lg { font-size: var(--fs-script-lg); }
.v-script--sm { font-size: var(--fs-script-sm); }
.v-script--apricot { color: var(--vreda-apricot-deep); }
.v-script--rose    { color: #D88A99; }

/* Script with the signature brushstroke underline */
.v-script-underlined {
  position: relative;
  font-family: var(--font-script);
  display: inline-block;
  padding-bottom: 6px;
}
.v-script-underlined::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 6px;
  border-radius: 50%;
  background: var(--vreda-apricot-deep);
  transform: rotate(-1.2deg);
  opacity: 0.85;
}

/* Caption / meta */
.v-caption, small {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: 1.45;
}

/* Quote — center-aligned poetic block, serif italic */
.v-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.4;
  color: var(--vreda-navy);
  text-align: center;
}

/* Links — soft, never blue */
a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 160ms ease;
}
a:hover { color: var(--link-hover); }

/* Selection — peach, never blue */
::selection {
  background: var(--vreda-peach);
  color: var(--vreda-charcoal);
}