/* ==================================================================
 * SoloReady — EINE Farbpalette für ALLE Oberflächen.
 *
 * Verbraucher:
 *   • website-home/  (Root-Site + /panel/)      → src/index.css
 *   • website/       (Alt-SPA, /easa-ppl-training/*, /cockpit) → src/index.css
 *   • website-home/landingpages/ (/themen/)     → template/landing.css
 *
 * HELL ist der Default. Dunkel NUR, wenn der Nutzer im Header umschaltet
 * (html[data-theme='dark'], persistiert in localStorage 'soloready.theme' —
 * origin-weiter Vertrag, siehe shared/theme.ts).
 *
 * Beide Sites haben historisch eigene Variablennamen. Die Alt-Namen
 * (--c-ink/--c-soft/--c-surface/--c-edge) sind hier Aliase auf die
 * Cockpit-Namen — dadurch bleibt beider Tailwind-Config unverändert gültig
 * und es kann kein Drift mehr entstehen.
 * ================================================================== */

:root {
  color-scheme: light;

  /* Sky-Light — kontrastgeprüft (WCAG AA) gegen den Body-Verlauf:
     bone 8,6–12,9:1 · dim 5,0–7,5:1 · signalhi 5,1–6,5:1 auf JEDER Stufe. */
  --c-night: #eaf5fc;
  --c-panel: rgba(245, 250, 255, 0.94);
  --c-panel2: #ffffff;
  --c-bone: #0a2538;
  --c-dim: #2c4a68;
  --c-signalhi: #8f1109;
  --c-glass: rgba(245, 250, 255, 0.88);
  --c-line: rgba(10, 37, 56, 0.18);
  --c-linehi: rgba(10, 37, 56, 0.32);
  --body-bg-img: linear-gradient(180deg, #d6ecfa 0%, #b3dcf2 55%, #8fc7e8 100%);
  --body-bg-attach: fixed;

  /* Markenfarben — themenunabhängig fix. Gold-Fläche trägt IMMER --c-onGold. */
  --c-signal: #e0301e;
  --c-gold: #f0c040;
  --c-onGold: #0a2538;
  /* Gold als FLÄCHE ist Marke, Gold als SCHRIFT auf Hell ist unlesbar
     (#F0C040 auf der hellen Karte = 1,6:1). Für Text darum dunkler Bernstein
     — auf Dunkel und in .dark-scope bleibt es das Marken-Gold. */
  --c-goldtext: #7a5200;

  /* Aliase der Alt-SPA (tailwind.config.js von website/) */
  --c-ink: var(--c-bone);
  --c-soft: var(--c-dim);
  --c-surface: var(--c-panel);
  --c-surface2: var(--c-panel2);
  --c-edge: var(--c-line);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --c-goldtext: #f0c040;

  --c-night: #0a0c10;
  --c-panel: #131820;
  --c-panel2: #1b222c;
  --c-bone: #eef2f6;
  --c-dim: #93a1b0;
  --c-signalhi: #ff4a38;
  --c-glass: rgba(19, 24, 32, 0.82);
  --c-line: rgba(238, 242, 246, 0.12);
  --c-linehi: rgba(238, 242, 246, 0.25);
  --body-bg-img: radial-gradient(1200px 600px at 70% -10%, rgba(27, 42, 61, 0.55), transparent 70%);
  --body-bg-attach: fixed;
}

/* Dunkel verankerte Zonen (Hero-Video, Nachtbilder, Cockpit-Hardware,
   Anzeigetafel, Footer): hier gelten die Dark-Werte AUCH im hellen Theme —
   sonst steht Navy-Text auf einem dunklen Bild. */
.dark-scope {
  --c-goldtext: #f0c040;
  --c-night: #0a0c10;
  --c-panel: #131820;
  --c-panel2: #1b222c;
  --c-bone: #eef2f6;
  --c-dim: #93a1b0;
  --c-signalhi: #ff4a38;
  --c-glass: rgba(19, 24, 32, 0.82);
  --c-line: rgba(238, 242, 246, 0.12);
  --c-linehi: rgba(238, 242, 246, 0.25);
  /* Variablen allein reichen NICHT: `color` wird als fertiger Wert vom Body
     geerbt und würde im hellen Theme als Navy in der dunklen Zone landen
     (gesehen an den /themen/-Hero-Überschriften). Darum hier explizit. */
  color: var(--c-bone);
}