/* =============================================================================
   HALLOWEEN GARTEN HOHENKIRCHEN – DESIGN TOKENS
   -----------------------------------------------------------------------------
   Einzige Quelle für Farben, Schrift, Abstände, Radien, Schatten, Motion.
   Komponenten greifen ausschließlich auf diese Variablen zu.
   ============================================================================= */

:root {
  /* ---------- Farben: Flächen ------------------------------------------- */
  --color-bg-0: #0a0a0c;            /* tiefster Hintergrund (Hero, Footer)   */
  --color-bg-1: #121215;            /* Seitenhintergrund                      */
  --color-bg-2: #18181c;            /* Wechselsektionen                       */
  --color-surface: #1e1e23;         /* Karten, Panels                         */
  --color-surface-raised: #26262c;  /* Hover-Zustand von Karten               */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  /* ---------- Farben: Text ---------------------------------------------- */
  --color-text: #f3efe7;            /* warmes Weiß                            */
  --color-text-soft: #cfcac0;
  --color-text-muted: #9a958b;
  --color-text-faint: #6d6960;

  /* ---------- Farben: Akzent (Kürbis) ----------------------------------- */
  --color-accent: #f28c28;
  --color-accent-hover: #ffa347;
  --color-accent-active: #d97a1c;
  --color-accent-ink: #1a0f04;      /* Text auf Akzentfläche                  */
  --color-accent-soft: rgba(242, 140, 40, 0.12);
  --color-accent-glow: rgba(242, 140, 40, 0.35);

  /* ---------- Farben: Sekundär (aus den Fotos: Neon-Licht) -------------- */
  --color-violet: #8b5cf6;
  --color-violet-soft: rgba(139, 92, 246, 0.16);
  --color-toxic: #6ee7a0;           /* Gift-Grün für kleine Details           */
  --color-blood: #b3261e;           /* nur für Warnungen / Sonderakzente      */

  /* ---------- Farben: Status ------------------------------------------- */
  --color-success: #6ee7a0;
  --color-warning: #f2c94c;
  --color-error: #ef5350;

  /* ---------- Overlays über Fotos --------------------------------------- */
  --overlay-photo: linear-gradient(180deg, rgba(10,10,12,.15) 0%, rgba(10,10,12,.55) 100%);
  --overlay-warm: linear-gradient(180deg, rgba(60,30,8,.10) 0%, rgba(10,10,12,.65) 100%);
  --overlay-hero: linear-gradient(90deg, rgba(10,10,12,.96) 0%, rgba(10,10,12,.9) 28%, rgba(10,10,12,.55) 50%, rgba(10,10,12,.15) 72%, rgba(10,10,12,0) 100%),
                  linear-gradient(180deg, rgba(10,10,12,.35) 0%, rgba(10,10,12,0) 30%, rgba(10,10,12,.85) 100%);
                  linear-gradient(180deg, rgba(10,10,12,.35) 0%, rgba(10,10,12,0) 30%, rgba(10,10,12,.85) 100%);

  /* ---------- Typografie ----------------------------------------------- */
  --font-display: "Creepster", "Impact", "Arial Black", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);
  --text-hero: clamp(2.75rem, 1.75rem + 5vw, 6rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-eyebrow: 0.22em;
  --tracking-wide: 0.06em;

  /* ---------- Abstände (4er-Raster) ------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-y: clamp(3.5rem, 6vw, 6.5rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 1200px;
  --container-wide: 1400px;

  /* ---------- Radien ---------------------------------------------------- */
  /* Ein Radius für Buttons, Bilder, Karten und Panels – damit alles zusammenpasst */
  --radius-sm: 4px;      /* nur Fokus-Ringe, Code-Snippets           */
  --radius-md: 10px;     /* Buttons, Bilder, Cards, Panels, Karte    */
  --radius-lg: 10px;     /* Alias auf md, aus Kompatibilität         */
  --radius-pill: 999px;  /* Badges                                   */

  /* ---------- Schatten & Glow ------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --shadow-accent: 0 8px 28px var(--color-accent-glow);

  /* ---------- Motion ---------------------------------------------------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 600ms;

  /* ---------- Layer ----------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* Helles Theme ist bewusst nicht vorgesehen: Die Marke lebt von der Dunkelheit.
   Falls später gewünscht, hier nur die Flächen- und Textfarben überschreiben. */