/* ============================================================
   Make My Song – Design Tokens
   ============================================================
   Alle Design-Entscheidungen als CSS Custom Properties.
   Keine Magic Numbers in components.css – alles referenziert hier.
*/

:root {
  /* ──────────────────────────────────────────────────────────
     COLORS – Basis
     ────────────────────────────────────────────────────────── */
  --cream:        #FAF7F2;
  --cream-warm:   #F4EDE2;
  --cream-deep:   #EBE1D0;
  --gold:         #C9A876;
  --gold-deep:    #B08F5A;
  --ink:          #2C2420;
  --ink-soft:     #5C4F47;
  --ink-mute:     #8B7E73;
  --white:        #FFFFFF;

  /* COLORS – Semantic Aliases */
  --color-bg:           var(--cream);
  --color-bg-alt:       var(--cream-warm);
  --color-bg-deep:      var(--cream-deep);
  --color-text:         var(--ink);
  --color-text-soft:    var(--ink-soft);
  --color-text-mute:    var(--ink-mute);
  --color-accent:       var(--gold);
  --color-accent-deep:  var(--gold-deep);
  --color-border:       rgba(44, 36, 32, 0.08);
  --color-border-hover: rgba(44, 36, 32, 0.2);

  /* COLORS – Anlass-Akzente (per Page oder Inline-Style überschreibbar) */
  --accent-light: var(--cream-warm);
  --accent-deep:  var(--cream-deep);

  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-h1:      clamp(48px, 6.5vw, 84px);
  --fs-h2:      clamp(36px, 4.5vw, 56px);
  --fs-h3:      clamp(24px, 2.5vw, 32px);
  --fs-h4:      20px;
  --fs-body:    17px;
  --fs-body-lg: 19px;
  --fs-small:   15px;
  --fs-tiny:    13px;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --ls-tight: -0.025em;
  --ls-snug:  -0.01em;
  --ls-base:  0;
  --ls-wide:  0.08em;

  /* ──────────────────────────────────────────────────────────
     SPACING
     ────────────────────────────────────────────────────────── */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 100px;
  --space-3xl: 140px;

  /* ──────────────────────────────────────────────────────────
     LAYOUT
     ────────────────────────────────────────────────────────── */
  --max-width:       1240px;
  --max-width-prose: 720px;
  --container-pad:   32px;

  /* ──────────────────────────────────────────────────────────
     RADII
     ────────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ──────────────────────────────────────────────────────────
     SHADOWS (warm, never pure black)
     ────────────────────────────────────────────────────────── */
  --shadow-soft:  0 4px 16px -4px rgba(44, 36, 32, 0.08);
  --shadow-card:  0 12px 30px -10px rgba(44, 36, 32, 0.15);
  --shadow-hover: 0 24px 50px -20px rgba(44, 36, 32, 0.3);
  --shadow-hero:  0 30px 60px -30px rgba(44, 36, 32, 0.25);
  --shadow-gold:  0 12px 30px -10px rgba(176, 143, 90, 0.5);

  /* ──────────────────────────────────────────────────────────
     TRANSITIONS
     ────────────────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ──────────────────────────────────────────────────────────
     Z-INDEX SCALE
     ────────────────────────────────────────────────────────── */
  --z-nav:     100;
  --z-modal:   1000;
  --z-tooltip: 1100;
}