/* ==========================================================================
   KV Pölzonia e.V. - Design Tokens
   Drei Ebenen: Primitive -> Semantik -> Komponenten.
   Komponenten verwenden ausschließlich semantische oder Komponenten-Tokens.
   ========================================================================== */

/* --- Schriften (lokal gehostet, keine Verbindung zu Fontshare/Google) --- */
@font-face {
  font-family: "Zodiak";
  src: url("../fonts/zodiak-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zodiak";
  src: url("../fonts/zodiak-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zodiak";
  src: url("../fonts/zodiak-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Author";
  src: url("../fonts/author-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Author";
  src: url("../fonts/author-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Author";
  src: url("../fonts/author-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Author";
  src: url("../fonts/author-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tangerine";
  src: url("../fonts/tangerine-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. PRIMITIVE
   ========================================================================== */
:root {
  /* Nacht / Zelt / Bühne */
  --ink-950: #060b0f; /* Moodboard: Fast-Schwarz */
  --ink-900: #0b1218;
  --ink-850: #111a22;
  --ink-800: #1a242e;
  --ink-700: #2a3540;

  /* Vereinsblau (Narrenkappe, Sternenkonfetti) */
  --blue-300: #8db6f6;
  --blue-400: #5b95f2; /* Text auf Dunkel, 6.6:1 */
  --blue-500: #3179ed; /* Moodboard: Blau, 4.8:1 auf ink-950 */
  --blue-700: #1f55bd; /* Text auf Hell 5.8:1, Fläche mit weißer Schrift 6.8:1 */
  --blue-800: #173f8f;

  /* Blauskala nach oben: Himmel und Azur für Spiel und Glanz */
  --sky-200: #c9ecff;
  --sky-300: #9fdcff;
  --sky-400: #58c4f5; /* Flächen, Balken, Konfetti; Text darauf immer dunkel */
  --azure-400: #3aa0f5;
  --azure-500: #1f86e8;
  --navy-800: #0f2a63; /* Band-Verlauf, dunkelste Blaustufe */
  --navy-900: #0a1c45;

  /* Gold (Glöckchen, Goldkonfetti) */
  --gold-400: #dec102; /* Moodboard: Gold, 11:1 auf ink-950 */
  --gold-800: #7a6a00; /* Gold-Text auf hellem Grund, 4.6:1 */

  /* Silber (Lametta, Silberkonfetti) */
  --silver-100: #f4f6f9;
  --silver-200: #e3e6eb;
  --silver-300: #cdd2da;
  --silver-400: #b3b9c4;
  --silver-500: #8e96a3;
  --silver-700: #5a6270;

  /* Zusatzfarben nur für Luftschlangen */
  --streamer-coral: #ff6b81;
  --streamer-pink: #ff9ad5;
  --streamer-mint: #4fe0b0;
  --streamer-orange: #ffa24c;

  /* Grau */
  --grey-400: #a7a7ad; /* Moodboard: Grau, 8.3:1 auf ink-950 */
  --grey-600: #5d636e; /* Sekundärtext auf Hell, 5.1:1 */

  /* Hell: blau getöntes Papier statt Reinweiß */
  --paper-100: #e8edf4;
  --paper-200: #dce3ec;
  --paper-300: #cbd4e0;

  --gold-300: #f0d31c;
  --gold-600: #b89e00;

  --white: #ffffff; /* nur für Text auf Dunkel oder Blau */

  /* Typografie */
  --font-display: "Zodiak", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Author", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-script: "Tangerine", "Snell Roundhand", cursive;

  --fs-100: 0.8125rem; /* 13px Meta */
  --fs-200: 0.9375rem; /* 15px Klein */
  --fs-300: 1.0625rem; /* 17px Fließtext */
  --fs-400: 1.25rem;   /* 20px Lead */
  --fs-500: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --fs-600: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --fs-700: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --fs-800: clamp(3.25rem, 1.8rem + 6.4vw, 7.5rem);
  --fs-script: clamp(3.5rem, 2.4rem + 5vw, 7rem);

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.6;

  --tracking-display: -0.025em;
  --tracking-label: 0.08em;

  /* Abstand, 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-pad: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 77.5rem; /* 1240px */
  --measure: 62ch;

  /* Form: eckig */
  --radius-0: 0;
  --radius-1: 2px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-reveal: 520ms;

  /* Ebenen */
  --z-base: 1;
  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;
  --z-grain: 400;
  --z-consent: 500;
  --z-burst: 600;
}

/* ==========================================================================
   2. SEMANTIK - Dunkel (Standard, Moodboard)
   ========================================================================== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: var(--ink-950);
  --color-surface: var(--ink-900);
  --color-surface-2: var(--ink-850);
  --color-skeleton: var(--ink-800);
  --color-alt: var(--ink-850);       /* abgesetzte Abschnitte: Programm, Galerie */
  --color-alt-card: var(--ink-800);  /* Karten darauf */
  --color-line: rgb(167 167 173 / 0.18);
  --color-line-strong: rgb(167 167 173 / 0.36);

  --color-text: var(--white);
  --color-text-muted: var(--grey-400);
  --color-text-inverse: var(--ink-950);

  --color-accent: var(--blue-500);       /* Flächen, Linien, große Schrift */
  --color-accent-text: var(--blue-400);  /* kleine Schrift, Links */
  --color-accent-strong: var(--blue-300);

  --color-gold: var(--gold-400);         /* CTA, 20:11, Linien, Konfetti */
  --color-gold-text: var(--gold-400);
  --color-gold-line: var(--gold-400);
  --color-eyebrow: var(--gold-400);

  --color-band-bg: var(--blue-700);      /* Karten-Band */
  --color-band-text: var(--white);
  --color-band-muted: rgb(255 255 255 / 0.78);
  --color-band-line: rgb(255 255 255 / 0.28);

  --color-focus: var(--gold-400);
  --grain-opacity: 0.07;
  --photo-filter: none;

  /* Silber: Linien und Flächen */
  --color-silver: var(--silver-300);
  --silver-gradient: linear-gradient(120deg, var(--silver-500), var(--silver-100) 38%, var(--silver-400) 62%, var(--silver-200));
  --silver-text: var(--silver-200);

  /* Hero-Glanz und Verläufe */
  --glow-1: rgb(88 196 245 / 0.2);
  --glow-2: rgb(49 121 237 / 0.24);
  --glow-3: rgb(205 210 218 / 0.07);
  --helau-gradient: linear-gradient(100deg, var(--sky-300), var(--blue-500) 48%, var(--silver-200));

  /* Wochenfarben im Programm */
  --week-1: var(--sky-400);
  --week-2: var(--azure-400);
  --week-3: var(--blue-400);
  --week-4: var(--gold-400);

  /* Konfetti-Palette: Gold, Silber, Blau */
  --cf-gold-1: #dec102;
  --cf-gold-2: #f0d31c;
  --cf-gold-3: #b89e00;
  --cf-silver-1: #eceff3;
  --cf-silver-2: #c4c9d1;
  --cf-silver-3: #9ca3af;
  --cf-blue-1: #58c4f5;
  --cf-blue-2: #3aa0f5;
  --cf-blue-3: #3179ed;
  --cf-blue-4: #8db6f6;
}

/* ==========================================================================
   2b. SEMANTIK - Hell (blau getöntes Papier mit Körnung)
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: var(--paper-100);
  --color-surface: var(--paper-200);
  --color-surface-2: var(--paper-300);
  --color-skeleton: var(--paper-300);
  --color-alt: var(--paper-200);
  --color-alt-card: var(--paper-100);
  --color-line: rgb(6 11 15 / 0.14);
  --color-line-strong: rgb(6 11 15 / 0.3);

  --color-text: var(--ink-950);
  --color-text-muted: var(--grey-600);
  --color-text-inverse: var(--ink-950);

  --color-accent: var(--blue-700);
  --color-accent-text: var(--blue-700);
  --color-accent-strong: var(--blue-800);

  --color-gold: var(--gold-400);
  --color-gold-text: var(--gold-800);
  --color-gold-line: var(--gold-400);
  --color-eyebrow: var(--blue-700);

  --color-band-bg: var(--blue-700);
  --color-band-text: var(--white);
  --color-band-muted: rgb(255 255 255 / 0.8);
  --color-band-line: rgb(255 255 255 / 0.3);

  --color-focus: var(--blue-700);
  --grain-opacity: 0.11;

  --color-silver: var(--silver-500);
  --silver-gradient: linear-gradient(120deg, var(--silver-500), var(--silver-100) 38%, var(--silver-400) 62%, var(--silver-300));
  --silver-text: var(--silver-700);

  --glow-1: rgb(58 160 245 / 0.2);
  --glow-2: rgb(31 85 189 / 0.14);
  --glow-3: rgb(142 150 163 / 0.14);
  --helau-gradient: linear-gradient(100deg, var(--blue-700), var(--azure-500) 52%, var(--sky-400));

  --cf-gold-1: #d9b800;
  --cf-gold-2: #ecc300;
  --cf-gold-3: #b89e00;
  --cf-silver-1: #aab2bf;
  --cf-silver-2: #8f98a8;
  --cf-silver-3: #7a8494;
  --cf-blue-1: #2aa7e8;
  --cf-blue-2: #1f86e8;
  --cf-blue-3: #1f55bd;
  --cf-blue-4: #5b95f2;
}

/* ==========================================================================
   3. KOMPONENTEN
   ========================================================================== */
:root {
  --header-h: 4.25rem;
  --header-bg: var(--color-bg);
  --header-line: var(--color-line);

  --btn-primary-bg: var(--color-gold);
  --btn-primary-fg: var(--ink-950);
  --btn-primary-bg-hover: #f0d31c;
  --btn-pad-y: 0.875rem;
  --btn-pad-x: 1.5rem;

  --link-color: var(--color-accent-text);
  --link-underline: var(--color-line-strong);

  --placeholder-fg: var(--color-accent-text);
  --placeholder-line: var(--color-accent);

  --tab-active: var(--color-accent);
}