/* =====================================================================
   Designvariablen für die Designfindung.
   Alles, was im Designstudio umgeschaltet wird, lebt hier:
   Farbwelt (data-palette), Schrift (data-font), Bewegung (data-motion),
   Bild-Look (data-look) und Filmkorn (data-grain).
   ===================================================================== */

:root {
  color-scheme: dark;

  /* Grundfläche: fast schwarz, leicht warm, damit Gold nicht kalt wirkt */
  --bg: #0a0a0b;
  --bg-2: #0f0f11;
  --surface: #141417;
  --surface-2: #1b1b1f;
  --text: #f1ede4;
  --text-2: #b9b4a9;
  --muted: #7d786f;
  --line: rgba(241, 237, 228, 0.10);
  --line-strong: rgba(241, 237, 228, 0.24);
  --rule: rgba(241, 237, 228, 0.55);

  /* Kopfzeile Dunkel: liegt über dem Bild. Hell: Balken wie bei Moon Production. */
  --header-bg: transparent;
  --header-text: var(--text);
  --header-muted: var(--text-2);

  /* Farbwelt Gold: der Goldton vom Pioneer-Horn */
  --accent: #c9a24c;
  --accent-2: #e9cb76;
  --accent-ink: #14110a;
  --secondary: #c9a24c;
  --glow: rgba(201, 162, 76, 0.22);

  /* Schrift Plakat: Bebas Neue + Inter */
  --display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --display-weight: 400;
  --display-tracking: 0.012em;
  --display-case: uppercase;
  --display-scale: 1.16;
  --display-lh: 0.92;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --utility: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Bild-Look Neutral */
  --img-filter: none;
  --img-tint: transparent;
  --img-blend: normal;

  /* Bewegung Dezent */
  --dur: 0.7s;
  --dur-long: 1.4s;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-y: 22px;
  --reveal-scale: 1;
  --kenburns: 26s;
  --marquee: 48s;
}

/* ---------- Farbwelten ---------- */

[data-palette="blau"] {
  --accent: #22a7d9;
  --accent-2: #7ed8f7;
  --accent-ink: #06171f;
  --secondary: #22a7d9;
  --glow: rgba(34, 167, 217, 0.22);
  --bg: #08090b;
  --bg-2: #0c0e11;
  --text: #eef1f3;
  --text-2: #aeb6bc;
}

[data-palette="duo"] {
  --secondary: #22a7d9;
}

[data-palette="mono"] {
  --accent: #f1ede4;
  --accent-2: #ffffff;
  --accent-ink: #0a0a0b;
  --secondary: #f1ede4;
  --glow: rgba(241, 237, 228, 0.14);
  --bg: #080808;
  --bg-2: #0d0d0d;
  --surface: #121212;
  --surface-2: #191919;
}

[data-palette="mono"] { --rule: rgba(255, 255, 255, 0.7); }
[data-header="hell"] {
  --header-bg: #d9d9d6;
  --header-text: #111111;
  --header-muted: #3a3a3a;
}

[data-palette="mono"] .brand img,
[data-palette="mono"] .footer-logo { filter: grayscale(1) brightness(1.12); }

.only-gold { display: none; }
[data-palette="gold"] .only-gold,
[data-palette="duo"] .only-gold { display: inline; }

/* ---------- Schriftpaare ---------- */

[data-font="grotesk"] {
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.028em;
  --display-case: none;
  --display-scale: 1;
  --display-lh: 0.98;
  --body: "Inter", system-ui, sans-serif;
}

[data-font="technik"] {
  --display: "IBM Plex Mono", Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: 0.005em;
  --display-case: uppercase;
  --display-scale: 0.82;
  --display-lh: 1.04;
  --body: "IBM Plex Sans", system-ui, sans-serif;
}

[data-font="breit"] {
  --display: "Unbounded", "Arial Black", sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --display-case: none;
  --display-scale: 0.8;
  --display-lh: 1.04;
  --body: "Manrope", system-ui, sans-serif;
}

/* ---------- Bild-Looks (Roberts Frage: alle Bilder durch denselben Filter?) ---------- */

[data-look="cinematic"] {
  --img-filter: contrast(1.1) saturate(0.82) brightness(0.96);
  --img-tint: linear-gradient(160deg, rgba(18, 70, 100, 0.5), rgba(210, 120, 40, 0.32));
  --img-blend: soft-light;
}

[data-look="warm"] {
  --img-filter: sepia(0.22) saturate(1.12) contrast(1.06);
  --img-tint: rgba(201, 162, 76, 0.24);
  --img-blend: overlay;
}

[data-look="mono"] {
  --img-filter: grayscale(1) contrast(1.12) brightness(0.95);
  --img-tint: transparent;
  --img-blend: normal;
}

/* ---------- Bewegung ---------- */

[data-motion="still"] {
  --dur: 0s;
  --dur-long: 0s;
  --reveal-y: 0px;
  --reveal-scale: 1;
}

[data-motion="show"] {
  --dur: 0.9s;
  --dur-long: 1.8s;
  --reveal-y: 40px;
  --reveal-scale: 0.955;
  --kenburns: 20s;
  --marquee: 26s;
}

@media (prefers-reduced-motion: reduce) {
  :root, [data-motion] {
    --dur: 0s;
    --dur-long: 0s;
    --reveal-y: 0px;
    --reveal-scale: 1;
  }
}