/* =============================================================
   St. Anton am Arlberg - Design Tokens
   Digitale Erweiterung des CD-Manuals (2019)
   Regeln: ANALYSE.md, Abschnitt 3
   ============================================================= */

:root {

  /* ---- Marke (CD-Manual, verbindlich) ---- */
  --st-rot:        #d52817;  /* Primär: Vignette, CTAs, Akzente. Auf Weiß 5,07:1 */
  --st-rot-dunkel: #941f09;  /* Hover, Hervorhebungen. Weiß darauf 8,54:1 */
  --st-beige:      #998573;  /* Nur Flächen, Rahmen, Großtext ab 24px. Auf Weiß 3,53:1 */
  --st-schwarz:    #000000;  /* Reserve; Text nutzt --ink */

  /* ---- Erweiterung: Text ---- */
  --ink:           #141414;  /* Fließtext, 17,6:1 */
  --text-2:        #4a4a4a;  /* Sekundärtext, 8,86:1 */
  --beige-text:    #75634f;  /* AA-sichere Textvariante des Beige, 5,75:1 */

  /* ---- Erweiterung: Flächen (warme Grau-Familie) ---- */
  --paper:         #ffffff;
  --creme:         #fdfcfa;
  --flaeche:       #f6f4f3;  /* aus dem Bestand */
  --flaeche-2:     #efeae5;
  --taupe:         #d8cdc3;  /* Fond, gemessen am Markenhandbuch-Cover */
  --linie:         #e9e4df;
  --rahmen:        #d8d1c9;
  --nacht:         #191512;  /* Bild-Overlays, Footer */

  /* ---- Statusfarben (sparsam) ---- */
  --ok:            #2e6b34;  /* Bergbahn offen, inklusive */
  --ok-flaeche:    #e9f2ea;

  /* ---- Typografie ---- */
  --font-sans:     "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-cond:     "IBM Plex Sans Condensed", "IBM Plex Sans", Arial, sans-serif;
  --font-serif:    "IBM Plex Serif", Georgia, serif;

  /* Skala: Display = IBM Plex Sans Light, Sentence case (Markenhandbuch-Stimme).
     Condensed-Versalien nur für kompakte Flächen (Kacheln, Flaggen, Caps auf Taupe). */
  --fs-hero:       clamp(2.75rem, 6.5vw + 1rem, 6.25rem);
  --fs-h1:         clamp(2.375rem, 4vw + 0.75rem, 4.25rem);
  --fs-h2:         clamp(1.875rem, 2.6vw + 0.75rem, 3.125rem);
  --fs-h3:         1.375rem;
  --fs-lead:       1.1875rem;
  --fs-body:       1.0625rem;
  --fs-ui:         0.9375rem;
  --fs-meta:       0.8125rem;

  --lh-display:    1.06;
  --lh-tight:      1.2;
  --lh-body:       1.6;

  --track-display: -0.015em;
  --track-caps:    0.08em;

  /* ---- Spacing (4er-Basis) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --section-y:     clamp(5rem, 11vw, 10.5rem);
  --content-max:   1360px;
  --content-pad:   clamp(1.25rem, 4.5vw, 3rem);

  /* ---- Form: Radien-System ----
     Flächen/Bilder 0 | Inputs/Buttons 2px | Chips Pille */
  --r-0:           0;
  --r-ui:          2px;
  --r-pill:        999px;

  /* ---- Vignette: 10° Schrägschnitt (tan 10° = 0.176) ---- */
  --vignette-clip:       polygon(0 0, 100% 0, 100% calc(100% - 0.176 * var(--vw, 200px)), 0 100%);
  --schraeg-badge:       polygon(0 0, 100% 0, 100% 70%, 0 100%);
  --schraeg-flag:        polygon(0 0, 100% 0, 100% calc(100% - 8px), 0 100%);

  /* ---- Ebenen ---- */
  --z-nav:         100;
  --z-mega:        110;
  --z-drawer:      200;
  --z-cart:        300;
  --z-modal:       400;

  /* ---- Schatten (getönt, nie schwarz-hart) ---- */
  --shadow-1:      0 1px 3px rgba(25, 21, 18, 0.08), 0 8px 24px rgba(25, 21, 18, 0.07);
  --shadow-2:      0 4px 12px rgba(25, 21, 18, 0.10), 0 24px 56px rgba(25, 21, 18, 0.12);
  --shadow-cta:    0 6px 18px rgba(213, 40, 23, 0.28);

  /* ---- Motion: ruhig und selbstsicher ---- */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:        160ms;
  --t-ui:          220ms;
  --t-slow:        480ms;
}

/* Fokus: sichtbar, markenfarben, überall gleich */
:focus-visible {
  outline: 2px solid var(--st-rot);
  outline-offset: 2px;
  border-radius: var(--r-ui);
}
.on-rot :focus-visible,
.btn-rot:focus-visible {
  outline-color: #ffffff;
}