/* ═══════════════════════════════════════════════════════════════
   tokens.css  —  Design Tokens & Reset
   naechster-feiertag.de
   ───────────────────────────────────────────────────────────────
   Alle Designwerte zentral hier definiert.
   Änderungen hier wirken sich auf die gesamte Seite aus.
   Wird von allen anderen CSS-Dateien als erstes eingebunden.
═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS  (CSS Custom Properties)
───────────────────────────────────────────────────────────── */
:root {

  /* — Farben: Teal-Palette (Primärfarbe) — */
  --teal-900:      #0B3D47;   /* Dunkelster Ton, Hover-Zustand      */
  --teal-700:      #145C6B;   /* ★ Primary — Buttons, Links         */
  --teal-500:      #1B8FA6;   /* Sekundäre Aktionen, Progress-Bar   */
  --teal-300:      #6ECBD8;   /* Borders, Dekorativ                 */
  --teal-100:      #D6F2F5;   /* Badge-Hintergründe, Hover-Flächen  */
  --teal-50:       #EEF9FA;   /* Card-Hintergründe, Tints           */

  /* — Farben: Grau-Palette (Neutral) — */
  --ink:           #0D1F26;   /* Text Primary                        */
  --slate-600:     #3D5159;   /* Text Secondary                      */
  --slate-400:     #7A98A1;   /* Text Muted, Labels                  */
  --slate-200:     #C8D8DC;   /* Borders, Divider                    */
  --slate-100:     #EAF0F2;   /* Subtile Hintergründe                */
  --slate-50:      #F4F8F9;   /* Page-Background                     */
  --white:         #FFFFFF;
  --paper:         #F7FAFB;   /* Warmes Off-White für Seitenground   */

  /* — Farben: Akzent (sparsam einsetzen!) — */
  --cyan:           #00C2D4;
  --cyan-glow:      rgba(0, 194, 212, 0.18);
  --cyan-accessible: oklch(0.45 0.09 200);  /* Kontrast-sicher auf hellem Hintergrund */

  /* — Semantische Farb-Aliases (diese im HTML/CSS verwenden) — */
  --bg:            var(--paper);
  --surface:       var(--white);
  --border:        var(--slate-200);
  --border-subtle: rgba(13, 31, 38, 0.06);
  --primary:       var(--teal-700);
  --primary-dark:  var(--teal-900);
  --primary-mid:   var(--teal-500);
  --primary-light: var(--teal-100);
  --primary-tint:  var(--teal-50);
  --text:          var(--ink);
  --text-sec:      var(--slate-600);
  --text-muted:    var(--slate-400);

  /* — Dark-Context-Text (auf teal-900 / ink-Hintergründen) — */
  --on-dark-primary: rgba(255,255,255,0.90);
  --on-dark-sec:     rgba(255,255,255,0.65);
  --on-dark-muted:   rgba(255,255,255,0.50);
  --on-dark-subtle:  rgba(255,255,255,0.35);

  /* — Typografie — */
  --serif:  'DM Serif Display', Georgia, serif;  /* Headlines, Feiertags-Namen */
  --sans:   'Manrope', system-ui, sans-serif;    /* UI, Body, Buttons          */

  /* — Radien — */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  36px;
  --r-pill: 9999px;

  /* — Schatten — */
  --sh-xs:   0 1px 2px rgba(13, 31, 38, 0.06);
  --sh-sm:   0 2px 6px rgba(13, 31, 38, 0.08);
  --sh-md:   0 6px 20px rgba(13, 31, 38, 0.09), 0 1px 3px rgba(13, 31, 38, 0.05);
  --sh-lg:   0 16px 48px rgba(13, 31, 38, 0.10), 0 3px 8px rgba(13, 31, 38, 0.06);
  --sh-teal: 0 8px 32px rgba(27, 143, 166, 0.22);

  /* — Abstände (4pt-Grid) — */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  20px;
  --s6:  24px;
  --s8:  32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;

  /* — Layout — */
  --max-w: 1100px;
  --nav-h: 64px;
}


/* ─────────────────────────────────────────────────────────────
   2. RESET
───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  min-height: 100vh;
}

a           { color: inherit; text-decoration: none; }
button      { font-family: var(--sans); cursor: pointer; border: none; background: none; }
ul, ol      { list-style: none; }
select,
input       { font-family: var(--sans); }
img         { max-width: 100%; display: block; }


/* ─────────────────────────────────────────────────────────────
   3. ANIMATIONEN
───────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

/* Utility-Klassen für staggered Einblendung */
.anim-up   { animation: fadeUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.anim-up-2 { animation: fadeUp 0.4s 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.anim-up-3 { animation: fadeUp 0.4s 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.anim-up-4 { animation: fadeUp 0.4s 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }