/* Pippo's V3 — exakt das V1-Layout/Typo, Farben auf Logo-Palette Weiß/Rot/Grün.
   LIGHT = Default (primär weiß) · DARK via [data-theme="dark"]. Toggle im Header.
   Variablennamen identisch zu V1 → style.css/HTML praktisch unverändert. */
:root {
  /* ---------- LIGHT (Default, reines Weiß) ---------- */
  --truffle-950: #ffffff;  /* footer-bg + Text auf Akzent (weiß auf Rot) */
  --truffle-900: #ffffff;  /* --bg = reines Weiß */
  --truffle-850: #f5f5f4;  /* --bg-alt = ganz dezentes Grau */
  --truffle-800: #ffffff;  /* --bg-card */
  --truffle-700: #fafafa;
  --truffle-600: #ededec;

  --cream:       #1b1714;  /* → --ink (dunkler Text) */
  --cream-soft:  #2c2824;
  --cream-dim:   #564e45;  /* → --ink-soft */
  --cream-faint: #8a8073;  /* → --ink-faint */

  --gold:        #b82837;  /* Logo-Rot — primärer Akzent */
  --gold-bright: #008060;  /* Logo-Grün — sekundär */
  --gold-deep:   #8a1f2a;
  --wine:        #b82837;
  --wine-bright: #c8333f;
  --leaf:        #008060;

  /* Semantic (lazy-resolved → gelten in beiden Modi automatisch) */
  --bg:        var(--truffle-900);
  --bg-alt:    var(--truffle-850);
  --bg-card:   var(--truffle-800);
  --bg-card-2: var(--truffle-700);
  --ink:       var(--cream);
  --ink-soft:  var(--cream-dim);
  --ink-faint: var(--cream-faint);
  --accent:    var(--gold);
  --accent-hi: var(--gold-bright);
  --line:      rgba(0, 0, 0, 0.14);
  --line-soft: rgba(0, 0, 0, 0.09);

  --avail-yes-bg: rgba(0, 128, 96, 0.13);
  --avail-yes:    #006b50;
  --avail-no-bg:  rgba(184, 40, 55, 0.10);
  --avail-no:     #b82837;

  --hero-scrim:
    linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.66) 40%, rgba(255,255,255,0.12) 72%),
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 45%);
  --shadow:    0 24px 60px -30px rgba(40, 20, 10, 0.35);
  --shadow-sm: 0 10px 30px -20px rgba(40, 20, 10, 0.30);
  --on-accent: #ffffff;  /* Text auf Akzentflächen (Tricolore-Icons, Banner, Buttons) */
  --icon-cheese: #f0c64e; /* natürliches Käse-Gelb für Sortiment-Icon */
  /* Theme-Switcher Swatch-Farben (konstant, nicht pro Theme überschrieben) */
  --sw-weiss: #ffffff; --sw-rot: #b82837; --sw-gruen: #008060; --sw-dark: #3d042d;

  /* Text-spezifische Akzent-Tokens (für color:, NICHT für Flächen).
     Default = wie bisher; ROT/GRÜN überschreiben mit hellen WCAG-AA-Werten. */
  --accent-text: var(--accent);   /* Eyebrows etc. */
  --link:        var(--accent-hi); /* Links */

  /* Type + Rhythm — identisch zu V1 (modus-unabhängig) */
  --font-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw:      1400px;
  --maxw-text: 760px;
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --radius:    14px;
  --radius-sm: 8px;
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Neutraler Hero-Scrim (alle farbigen/dunklen Themes): Foto bleibt natürlich, Text lesbar. */
[data-theme="dark"], [data-theme="rot"], [data-theme="gruen"] {
  --hero-scrim:
    linear-gradient(180deg, rgba(18,14,11,0.5) 0%, rgba(18,14,11,0.28) 35%, rgba(18,14,11,0.9) 100%),
    linear-gradient(90deg, rgba(18,14,11,0.68) 0%, rgba(18,14,11,0.05) 62%);
  --line:      rgba(255, 255, 255, 0.15);
  --line-soft: rgba(255, 255, 255, 0.08);
}

/* ---------- DARK = Wine #3D042D ---------- */
[data-theme="dark"] {
  --truffle-950: #2a0320; --truffle-900: #3d042d; --truffle-850: #330426;
  --truffle-800: #490836; --truffle-700: #561141; --truffle-600: #6a1d52;
  --cream: #f8eef4; --cream-soft: #efdfe9; --cream-dim: #d6b8cc; --cream-faint: #a8839c;
  --gold: #e3596b; --gold-bright: #2bbd95; --gold-deep: #c8333f; --wine: #e3596b; --leaf: #2bbd95;
  --avail-yes-bg: rgba(43,189,149,0.18); --avail-yes: #5fe0bf;
  --avail-no-bg: rgba(227,89,107,0.2); --avail-no: #f4a2ac;
  --shadow: 0 24px 60px -28px rgba(20,0,14,0.85); --shadow-sm: 0 10px 30px -18px rgba(20,0,14,0.8);
}

/* ---------- ROT (Logo-Rot Grund, Logo-Grün Akzent) ---------- */
[data-theme="rot"] {
  /* Basis abgedunkelt für WCAG-AA-Headroom (vorher #b82837 → weißer Text nur 5.74). */
  --truffle-950: #82161f; --truffle-900: #9c1c29; --truffle-850: #8a1824;
  --truffle-800: #a82430; --truffle-700: #b32d3c; --truffle-600: #c03b49;
  --cream: #fff4f5; --cream-soft: #ffe4e7; --cream-dim: #ffdbe0; --cream-faint: #ffc4ca;
  /* Flächen-Akzent bleibt Logo-Rot (weißer Text 8.0:1). Text-Akzent = helles Gold, da Grün auf Rot durchfällt. */
  --gold: #b82837; --gold-bright: #2bbd95; --gold-deep: #8a1f2a; --wine: #008060; --leaf: #2bbd95;
  --accent-text: #ffd24a; --link: #ffd24a;
  --avail-yes-bg: rgba(255,255,255,0.16); --avail-yes: #ffffff;
  --avail-no-bg: rgba(0,0,0,0.22); --avail-no: #ffd0d4;
  --shadow: 0 24px 60px -28px rgba(70,8,14,0.7); --shadow-sm: 0 10px 30px -18px rgba(70,8,14,0.6);
}

/* ---------- GRÜN (Logo-Grün Grund, Logo-Rot Akzent) ---------- */
[data-theme="gruen"] {
  /* Basis abgedunkelt (#008060 → weißer Text nur 4.67, Karten fielen durch). */
  --truffle-950: #004d39; --truffle-900: #005c44; --truffle-850: #00513c;
  --truffle-800: #00684e; --truffle-700: #007557; --truffle-600: #0e8468;
  --cream: #f1fbf7; --cream-soft: #ddf6ec; --cream-dim: #d6f2e7; --cream-faint: #b0e6d2;
  /* Flächen-Akzent bleibt Logo-Grün. Text-Akzent = helles Gold (Grün auf Grün unsichtbar). */
  --gold: #008060; --gold-bright: #2bbd95; --gold-deep: #006b50; --wine: #b82837; --leaf: #e3596b;
  --accent-text: #ffe08a; --link: #ffe08a;
  --avail-yes-bg: rgba(255,255,255,0.16); --avail-yes: #ffffff;
  --avail-no-bg: rgba(0,0,0,0.2); --avail-no: #ffd6da;
  --shadow: 0 24px 60px -28px rgba(0,50,38,0.7); --shadow-sm: 0 10px 30px -18px rgba(0,50,38,0.6);
}