/* ==========================================================================
   SOUL Festival – Design-Tokens
   Grundlage des Design-Systems. Alle Komponenten nutzen nur diese Variablen.
   Farben abgeleitet aus dem Logo (Logo-Festival.svg).
   ========================================================================== */

:root {
  /* ---------- Farbe: Basis ---------- */
  --color-bg:        #FFFFFF;  /* Seite: viel Weißraum */
  --color-surface:   #F5F3EE;  /* Pillen, ruhige Flächen */
  --color-surface-2: #ECE8DF;  /* Hover auf Surface */
  --color-ink:       #1E1B16;  /* Text */
  --color-ink-2:     #6B655B;  /* Sekundärtext */
  --color-line:      rgba(30, 27, 22, 0.12);

  /* ---------- Farbe: Sonne (aus dem Logo) ---------- */
  --color-sun:       #FBBB49;  /* Sonnengelb */
  --color-amber:     #EA9638;  /* Bernstein */
  --color-ember:     #E67619;  /* Glut – tiefste Logo-Farbe */
  --color-cream:     #FDFAF0;  /* Logo-Creme */
  --color-sand:      #E7DDC9;  /* Logo-Hintergrund */

  /* ---------- Farbe: Winter ---------- */
  --color-winter:    #4D6A7F;  /* Ostsee im Winter – Kachelfläche */
  --color-winter-2:  #3E5868;  /* dunkler, für Hover */
  --color-frost:     #E4ECF2;  /* Text/Chips auf Winter */

  /* ---------- Farbe: Nacht (Winter Gathering) ---------- */
  --color-night:     #0F1D3A;  /* Nachtblau */
  --color-night-2:   #1A2C52;  /* etwas heller, Flächen auf Nacht */
  --color-moon:      #F7F1DC;  /* Mondlicht */

  /* ---------- Typografie ---------- */
  --font-serif: "DM Serif Text", Georgia, serif;
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;

  --text-xs:   0.8125rem;  /* 13px – Chips */
  --text-sm:   0.9375rem;  /* 15px – Navigation, Buttons */
  --text-base: 1.0625rem;  /* 17px – Fließtext */
  --text-lg:   1.25rem;    /* 20px */
  --text-display: clamp(2.4rem, 4.1vw, 4.4rem);       /* Hero-Headline Sommer */
  --text-display-sm: clamp(2rem, 2.9vw, 3.1rem);      /* Hero-Headline Winter */

  --leading-tight: 1.04;
  --leading-body:  1.55;
  --tracking-display: -0.035em;
  --tracking-body:    -0.01em;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* ---------- Abstände (4px-Raster) ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --gutter: clamp(16px, 2vw, 28px);   /* Seitenrand */
  --gap-tiles: clamp(12px, 1.2vw, 18px); /* Abstand zwischen Kacheln */
  --page-max: 1600px;

  /* ---------- Rundungen ---------- */
  --radius-tile:  clamp(24px, 2.4vw, 36px);  /* große Kacheln */
  --radius-notch: clamp(18px, 1.8vw, 26px);  /* Ausschnitte in Kacheln */
  --radius-card:  18px;                      /* kleine Karten in Kacheln */
  --radius-pill:  999px;                     /* Buttons, Chips, Menü */

  /* ---------- Komponenten-Maße ---------- */
  --btn-h:    46px;
  --btn-h-lg: 54px;
  --chip-h:   32px;

  /* ---------- Schatten & Glas ---------- */
  --glass-bg:     rgba(255, 255, 255, 0.16);
  --glass-line:   rgba(255, 255, 255, 0.55);
  --glass-blur:   blur(10px);
  --shadow-float: 0 12px 32px -14px rgba(30, 27, 22, 0.35);

  /* ---------- Bewegung ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-sun:   cubic-bezier(0.16, 0.84, 0.3, 1);
  --dur-fast:   160ms;
  --dur-base:   240ms;
}