/* ==========================================================================
   STURM & KLANG – Design Tokens
   Eine Quelle für Website, Pressekit und Styleguide (design-system/).
   Leitidee „Reifung“: Schwarzweiß-Fotografie auf Kalkweiß, dazu zwei Akzente
   aus dem Makole-Artwork – vom Rebgrün zum Sturm (junger Wein).
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-wdth.woff2") format("woff2-variations"),
       url("../fonts/archivo-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-opsz.woff2") format("woff2-variations"),
       url("../fonts/newsreader-opsz.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-opsz-italic.woff2") format("woff2-variations"),
       url("../fonts/newsreader-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Grundpalette ----------------------------------------------------- */
  --sk-kalk:        #EEEFEB;  /* Kalkweiß – gekalkte Hofmauer, heller Grund   */
  --sk-kalk-2:      #E3E5E0;  /* abgesetzte helle Fläche                      */
  --sk-kalk-3:      #D3D6D0;  /* Linien auf hell                              */
  --sk-tinte:       #161A18;  /* Text, Logo                                   */
  --sk-tinte-2:     #3B423F;  /* Fließtext sekundär                           */
  --sk-nebel:       #5A625E;  /* Meta, Bildnachweise (4,9:1 auf Kalk)        */
  --sk-keller:      #161114;  /* Weinkeller – dunkler Grund                   */
  --sk-keller-2:    #211A1E;  /* abgesetzte dunkle Fläche                     */
  --sk-keller-3:    #3A3036;  /* Linien auf dunkel                            */
  --sk-hell:        #EEEAEC;  /* Text auf Keller                              */
  --sk-hell-2:      #BDB4B9;  /* Fließtext zweiter Ebene auf Keller           */
  --sk-hell-3:      #8C8288;  /* Labels auf Keller                            */
  --sk-rebe:        #1D4A43;  /* Akzent 1: Rebgrün (Makole-Ornament)          */
  --sk-rebe-hell:   #8FC2B3;  /* Rebgrün auf dunklem Grund                    */
  --sk-sturm:       #5A1F38;  /* Akzent 2: Sturm / Wein (Makole-CD)           */
  --sk-sturm-hell:  #DDA4BD;  /* Schilcher-Rosé auf dunklem Grund             */

  /* Verlauf „Reifung“ – sparsam: Fortschrittslinie, Linkunterstreichung, CD */
  --sk-reifung: linear-gradient(90deg, var(--sk-rebe) 0%, var(--sk-sturm) 100%);
  --sk-reifung-hell: linear-gradient(90deg, var(--sk-rebe-hell) 0%, var(--sk-sturm-hell) 100%);

  /* --- Semantische Tokens (hell) ---------------------------------------- */
  --bg:            var(--sk-kalk);
  --bg-raised:     var(--sk-kalk-2);
  --fg:            var(--sk-tinte);
  --fg-2:          var(--sk-tinte-2);
  --fg-3:          var(--sk-nebel);
  --line:          var(--sk-kalk-3);
  --accent:        var(--sk-sturm);
  --accent-2:      var(--sk-rebe);
  --accent-fg:     #FFFFFF;
  --gradient:      var(--sk-reifung);
  --focus:         var(--sk-sturm);
  --scrim:         rgba(22, 17, 20, .55);

  /* --- Typografie -------------------------------------------------------- */
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui:      "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Fluid Type Scale (360px → 1440px) */
  --step--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.12vw, 0.90rem);
  --step-0:  clamp(1.06rem, 1.00rem + 0.28vw, 1.25rem);
  --step-1:  clamp(1.28rem, 1.16rem + 0.55vw, 1.62rem);
  --step-2:  clamp(1.62rem, 1.38rem + 1.05vw, 2.30rem);
  --step-3:  clamp(2.10rem, 1.62rem + 2.10vw, 3.50rem);
  --step-4:  clamp(2.80rem, 1.80rem + 4.40vw, 5.90rem);
  --step-5:  clamp(3.60rem, 1.60rem + 8.90vw, 9.60rem);

  --leading-tight: 0.92;
  --leading-snug:  1.18;
  --leading-text:  1.55;
  --tracking-label: 0.14em;

  /* Breitenachse der Archivo – „Balg“: gestaucht ↔ ausgezogen */
  --wdth-zu:   62;   /* Balg zu   */
  --wdth-mitte: 88;
  --wdth-auf: 118;   /* Balg auf  */

  /* --- Abstände (fluid) -------------------------------------------------- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.46rem + 0.19vw, 0.62rem);
  --space-xs:  clamp(0.75rem, 0.69rem + 0.28vw, 0.94rem);
  --space-s:   clamp(1.00rem, 0.93rem + 0.37vw, 1.25rem);
  --space-m:   clamp(1.50rem, 1.39rem + 0.56vw, 1.88rem);
  --space-l:   clamp(2.00rem, 1.85rem + 0.74vw, 2.50rem);
  --space-xl:  clamp(3.00rem, 2.50rem + 2.20vw, 4.50rem);
  --space-2xl: clamp(4.00rem, 3.00rem + 4.40vw, 7.00rem);
  --space-3xl: clamp(6.00rem, 4.00rem + 8.80vw, 12.00rem);

  /* --- Raster ------------------------------------------------------------ */
  --page-max: 1440px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --measure: 62ch;

  /* --- Form: kantig wie ein Plakat, rund nur für Pillen --------------------- */
  --radius-0: 0;
  --radius-s: 2px;
  --radius-pill: 999px;
  --rule: 1px;

  /* --- Bewegung ---------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);     /* Ankommen            */
  --ease-balg: cubic-bezier(0.65, 0, 0.35, 1);    /* Atmen, Auf & Zu     */
  --dur-1: 160ms;   /* Hover, Farbe        */
  --dur-2: 320ms;   /* Unterstreichung     */
  --dur-3: 700ms;   /* Einblenden          */
  --dur-4: 1200ms;  /* Bild-Reveal, CD     */

  /* --- Ebenen ------------------------------------------------------------ */
  --z-header: 50;
  --z-menu: 60;
  --z-dialog: 80;

  color-scheme: light;
}

/* Dunkler Kontext: Sektionen im „Weinkeller“ (.is-keller) */
.is-keller {
  --bg:        var(--sk-keller);
  --bg-raised: var(--sk-keller-2);
  --fg:        var(--sk-hell);
  --fg-2:      var(--sk-hell-2);
  --fg-3:      var(--sk-hell-3);
  --line:      var(--sk-keller-3);
  --accent:    var(--sk-sturm-hell);
  --accent-2:  var(--sk-rebe-hell);
  --accent-fg: var(--sk-keller);
  --gradient:  var(--sk-reifung-hell);
  --focus:     var(--sk-sturm-hell);
  color-scheme: dark;
}

/* Systemweiter Dunkelmodus: alles wird Keller, Keller-Sektionen eine Spur tiefer */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        var(--sk-keller);
    --bg-raised: var(--sk-keller-2);
    --fg:        var(--sk-hell);
    --fg-2:      var(--sk-hell-2);
    --fg-3:      var(--sk-hell-3);
    --line:      var(--sk-keller-3);
    --accent:    var(--sk-sturm-hell);
    --accent-2:  var(--sk-rebe-hell);
    --accent-fg: var(--sk-keller);
    --gradient:  var(--sk-reifung-hell);
    --focus:     var(--sk-sturm-hell);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .is-keller {
    --bg:        #0F0B0D;
    --bg-raised: #1A1418;
  }
}
:root[data-theme="dark"] {
  --bg:        var(--sk-keller);
  --bg-raised: var(--sk-keller-2);
  --fg:        var(--sk-hell);
  --fg-2:      var(--sk-hell-2);
  --fg-3:      var(--sk-hell-3);
  --line:      var(--sk-keller-3);
  --accent:    var(--sk-sturm-hell);
  --accent-2:  var(--sk-rebe-hell);
  --accent-fg: var(--sk-keller);
  --gradient:  var(--sk-reifung-hell);
  --focus:     var(--sk-sturm-hell);
  color-scheme: dark;
}
:root[data-theme="dark"] .is-keller {
  --bg:        #0F0B0D;
  --bg-raised: #1A1418;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms;
  }
}