/* ============================================================
   WP5 — Surfaces + Type System
   Lag 1.6: Additivt lag — overskriver INTET fra Lag 1/1.5/4
   ============================================================
   4 Surface-klasser med scoped custom properties
   8 Type-klasser baseret på WP1-skala (clamp-tokens)
   2 Temperamenter via data-attributter
   ============================================================ */

/* ── 1. SURFACES ────────────────────────────────────────────
   Hver klasse definerer tre scoped custom properties:
     --surface-bg     : baggrundsfarve
     --surface-text   : primær tekstfarve
     --surface-border : border/outline-farve
   Disse properties er intentionelt IKKE defineret i :root,
   så de kun aktiveres inden for en surface-kontekst.
   ─────────────────────────────────────────────────────────── */

.surface-matte {
  --surface-bg:     var(--black);
  --surface-text:   var(--text);
  --surface-border: rgba(240, 242, 245, 0.08);
  background: var(--surface-bg);
  color:      var(--surface-text);
}

/* Let løftet — cards, modals, indholdssektioner */
.surface-elevated {
  --surface-bg:     var(--black-light);
  --surface-text:   var(--text);
  --surface-border: rgba(212, 149, 106, 0.15);
  background: var(--surface-bg);
  color:      var(--surface-text);
}

/* Kobber/varme toner — fremhævede sektioner, CTA-baggrunde */
.surface-accent {
  --surface-bg:     rgba(212, 149, 106, 0.07);
  --surface-text:   var(--text);
  --surface-border: rgba(212, 149, 106, 0.28);
  background: var(--surface-bg);
  color:      var(--surface-text);
}

/* Dybeste mørke — hero-baggrunde, overlay-lag */
.surface-deep {
  --surface-bg:     #06080E;
  --surface-text:   var(--text);
  --surface-border: rgba(240, 242, 245, 0.04);
  background: var(--surface-bg);
  color:      var(--surface-text);
}

/* ── 2. TYPE CLASSES ────────────────────────────────────────
   Modular scale: 1.25 (Major Third)
   Alle font-size-værdier bruger WP1 clamp-tokens fra base.css:
     --type-caption : clamp(0.75rem,  1.5vw, 0.875rem)  12–14px
     --type-sm      : clamp(0.875rem, 1.5vw, 1rem)       14–16px
     --type-base    : clamp(1rem,     1.5vw, 1.0625rem)  16–17px
     --type-lg      : clamp(1.0625rem,2vw,   1.25rem)    17–20px
     --type-xl      : clamp(1.25rem,  2.5vw, 1.5rem)     20–24px
     --type-2xl     : clamp(1.5rem,   3vw,   2rem)       24–32px
     --type-3xl     : clamp(1.8rem,   3.5vw, 3rem)       29–48px
     --type-hero    : clamp(2rem,     4vw,   3.2rem)     32–51px
   ─────────────────────────────────────────────────────────── */

/* Hero headlines — Montserrat, tungeste niveau */
.type-display {
  font-family:     var(--font-display);
  font-size:       var(--type-hero);
  font-weight:     700;
  line-height:     1.08;
  letter-spacing:  -0.025em;
}

/* Section headings — Montserrat, stærk præsens */
.type-heading {
  font-family:     var(--font-display);
  font-size:       var(--type-3xl);
  font-weight:     600;
  line-height:     1.15;
  letter-spacing:  -0.018em;
}

/* Sub-section, intro-tekst over heading */
.type-subheading {
  font-family:     var(--font-display);
  font-size:       var(--type-2xl);
  font-weight:     500;
  line-height:     1.25;
  letter-spacing:  -0.01em;
}

/* Standard brødtekst */
.type-body {
  font-family:     var(--font-body);
  font-size:       var(--type-base);
  font-weight:     400;
  line-height:     1.68;
  letter-spacing:  0;
}

/* Større brødtekst — intro-afsnit, lead copy */
.type-body-lg {
  font-family:     var(--font-body);
  font-size:       var(--type-lg);
  font-weight:     400;
  line-height:     1.62;
  letter-spacing:  -0.005em;
}

/* Pullquotes — Montserrat kursiv, åben spacing */
.type-quote {
  font-family:     var(--font-display);
  font-size:       var(--type-xl);
  font-weight:     300;
  line-height:     1.5;
  font-style:      italic;
  letter-spacing:  0.01em;
}

/* Billedtekst, metadata, hjælpetekst */
.type-caption {
  font-family:     var(--font-body);
  font-size:       var(--type-caption);
  font-weight:     400;
  line-height:     1.5;
  color:           var(--text-muted);
  letter-spacing:  0.01em;
}

/* Labels, tags, kategori-chips — versaler */
.type-label {
  font-family:     var(--font-body);
  font-size:       var(--type-sm);
  font-weight:     600;
  line-height:     1.4;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
}

/* ── 3. TEMPERAMENTS ────────────────────────────────────────
   Justerer spacing, font-weight og accent via CSS custom
   properties. Arves ned i child-elementer inkl. type-klasser.
   ─────────────────────────────────────────────────────────── */

/* WARM — terapeut/healer: åbent, blidt, organisk */
[data-temperament='warm'] {
  --temperament-accent:          var(--pink);
  --temperament-accent-hover:    var(--pink-light);
  --temperament-heading-weight:  500;
  --temperament-body-weight:     300;
  --temperament-heading-spacing: 0.005em;
  --temperament-label-spacing:   0.14em;
  --temperament-line-height:     1.80;
}

[data-temperament='warm'] .type-display,
[data-temperament='warm'] .type-heading,
[data-temperament='warm'] .type-subheading {
  font-weight:    var(--temperament-heading-weight);
  letter-spacing: var(--temperament-heading-spacing);
}

[data-temperament='warm'] .type-body,
[data-temperament='warm'] .type-body-lg {
  font-weight: var(--temperament-body-weight);
  line-height:  var(--temperament-line-height);
}

[data-temperament='warm'] .type-label {
  color:          var(--temperament-accent);
  letter-spacing: var(--temperament-label-spacing);
  font-weight:    500;
}

[data-temperament='warm'] .type-quote {
  font-weight: 300;
  color:       var(--temperament-accent);
}

/* SHARP — konsulent/professionel: præcis, tæt, autoritativ */
[data-temperament='sharp'] {
  --temperament-accent:          var(--orange);
  --temperament-accent-hover:    var(--orange-hover);
  --temperament-heading-weight:  700;
  --temperament-body-weight:     400;
  --temperament-heading-spacing: -0.03em;
  --temperament-label-spacing:   0.06em;
  --temperament-line-height:     1.52;
}

[data-temperament='sharp'] .type-display,
[data-temperament='sharp'] .type-heading,
[data-temperament='sharp'] .type-subheading {
  font-weight:    var(--temperament-heading-weight);
  letter-spacing: var(--temperament-heading-spacing);
}

[data-temperament='sharp'] .type-body,
[data-temperament='sharp'] .type-body-lg {
  font-weight: var(--temperament-body-weight);
  line-height:  var(--temperament-line-height);
}

[data-temperament='sharp'] .type-label {
  color:          var(--temperament-accent);
  letter-spacing: var(--temperament-label-spacing);
  font-weight:    700;
}

[data-temperament='sharp'] .type-quote {
  font-weight: 400;
  font-style:  normal;
  color:       var(--temperament-accent);
}