/* =========================================================
   DESIGN TOKENS — Musikverein Altmelon
   Single source of truth. Don't hardcode these values
   anywhere else; reference them via var(--token).
   ========================================================= */

:root {
  /* ── Brand Colors ────────────────────────────────────── */
  --green:        #004800;  /* Primary brand green (Waldviertel forest) */
  --green-mid:    #2a6b2a;  /* Hover state for primary */
  --green-acc:    #5a9c5a;  /* Accent / highlights on dark green */
  --green-pale:   #e8f4e8;  /* Pale green wash, pills, icon bg */

  /* ── Surface / Neutral ───────────────────────────────── */
  --white:        #ffffff;
  --off-white:    #f7f9f7;  /* Section alt-bg, cards on dark */
  --text:         #1c2a1c;  /* Primary text + footer bg */
  --muted:        #5a6a5a;  /* Secondary text, labels */
  --border:       #dae8da;  /* Hairline dividers, card borders */

  /* ── Tracht Accent (used sparingly) ──────────────────── */
  --tracht-red:   #c8102e;  /* Red accent picked up from tracht */

  /* ── Typography ──────────────────────────────────────── */
  --font-sans:    'Montserrat', system-ui, -apple-system, sans-serif;
  --font-serif:   'Lora', Georgia, serif;          /* Italic accents only */

  --fs-xs:        0.7rem;   /* 11.2px — labels, eyebrows */
  --fs-sm:        0.82rem;  /* 13.1px — buttons, captions */
  --fs-base:      1rem;     /* 16px   — body */
  --fs-lg:        1.6rem;   /* 25.6px — card numbers */
  --fs-h2:        clamp(1.8rem, 3.5vw, 2.6rem);
  --fs-h1:        clamp(2.5rem, 5vw, 4.5rem);

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semi:      600;
  --fw-bold:      700;
  --fw-heavy:     800;
  --fw-black:     900;

  --tracking-wide:   0.08em;
  --tracking-wider:  0.15em;
  --tracking-widest: 0.2em;

  /* ── Spacing scale (4px base) ────────────────────────── */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  2.5rem;   /* 40px */
  --space-8:  3rem;     /* 48px */
  --space-9:  4rem;     /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-11: 6rem;     /* 96px */

  /* ── Layout ──────────────────────────────────────────── */
  --container-max: 1100px;
  --section-padding-y: 4rem;
  --section-padding-x: 3rem;
  --nav-height: 68px;

  /* ── Radius ──────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-card:  0 8px 24px rgba(0, 72, 0, .10);
  --shadow-image: 0 20px 50px rgba(0, 0, 0, .10);
  --shadow-pop:   0 12px 40px rgba(0, 0, 0, .25);

  /* ── Motion ──────────────────────────────────────────── */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --dur-fast:    .2s;
  --dur-med:     .35s;
}