/* ==========================================================================
   VENTIVA — 01 Tokens
   Design-Sprache: "Druckentlastung". Tiefes Petrol als Ruhe-Ton,
   warmes Amber ausschliesslich als "Hitze"-Signal (Druck, CTA, Fokus).
   Die Farbachse cool -> heat ist dieselbe wie in der Druckkarte.
   ========================================================================== */

:root {
  /* --- Farbe ------------------------------------------------------------ */
  --v-ink:        #0C1614;  /* Text, fast-schwarz mit Grünstich            */
  --v-deep:       #123A34;  /* Primärfläche, Tiefenpetrol                  */
  --v-deep-soft:  #1B4F47;  /* Hover / erhöhte Fläche auf Deep             */
  --v-cool:       #4E8F86;  /* kaltes Ende der Druckskala                  */
  --v-mist:       #EDF1EE;  /* Seitenhintergrund, kühler Dunst             */
  --v-paper:      #FFFFFF;
  --v-heat:       #E4A04A;  /* heisses Ende der Druckskala = CTA           */
  --v-heat-deep:  #C9822C;  /* CTA hover                                   */

  --v-ink-60:     rgba(12, 22, 20, .60);
  /* --v-ink-40 und --v-paper-45 sind KEINE Textfarben.

     Nachgerechnet: rgba(12,22,20,.40) ergibt auf --v-mist 2,5:1 und auf Weiss
     2,6:1; --v-paper-45 kommt auf --v-deep auf 3,8:1. WCAG AA verlangt für
     Text unter 18,7 px 4,5:1 — alle drei fallen durch. Der Token stand
     trotzdem an 42 Stellen auf Fliesstext, darunter die Pflichtangaben zu
     Steuer und Versand im Warenkorb und die Kopfzeilen der Maßtabelle.

     Für Text gilt --v-ink-60 (4,6:1 auf Mist) — in .v-invert unten bereits auf
     --v-paper-70 gemappt, deckt also beide Kontexte ab. Diese Stufe hier ist
     für Trennlinien, Rahmen, Symbole und deaktivierte Bedienelemente. */
  --v-ink-40:     rgba(12, 22, 20, .40);
  --v-paper-70:   rgba(255, 255, 255, .70);
  --v-paper-45:   rgba(255, 255, 255, .45);

  --v-line:       rgba(12, 22, 20, .12);
  --v-line-deep:  rgba(255, 255, 255, .16);

  /* --- Typografie ------------------------------------------------------- */
  --v-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --v-body:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --v-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid-Skala, Basis 17px, Verhältnis ~1.28 */
  --fs-mono:   .72rem;
  --fs-sm:     .875rem;
  --fs-base:   1.0625rem;
  --fs-lg:     clamp(1.15rem, .95rem + .6vw, 1.4rem);
  --fs-h3:     clamp(1.4rem,  1.15rem + .9vw, 1.95rem);
  --fs-h2:     clamp(2rem,    1.4rem + 2.4vw, 3.4rem);
  --fs-h1:     clamp(2.7rem,  1.6rem + 4.6vw, 5.6rem);

  --lh-tight:  0.98;
  --lh-snug:   1.14;
  --lh-body:   1.62;

  /* --- Raster & Rhythmus ------------------------------------------------ */
  --v-max:      1340px;
  --v-gutter:   clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
  --v-col-gap:  clamp(1rem, .5rem + 1.6vw, 2.25rem);
  --v-section:  clamp(4.5rem, 3rem + 7vw, 9.5rem);

  --v-radius:   14px;
  --v-radius-lg: 26px;

  /* --- Bewegung --------------------------------------------------------- */
  --v-ease:     cubic-bezier(.22, .61, .36, 1);
  --v-ease-out: cubic-bezier(.16, 1, .3, 1);
  --v-fast:     .18s;
  --v-slow:     .7s;

  --v-shadow:   0 1px 2px rgba(12,22,20,.05), 0 12px 34px -18px rgba(12,22,20,.35);
  --v-shadow-lg:0 30px 70px -34px rgba(12,22,20,.55);
}

/* Dunkle Sektionen erben denselben Token-Satz, drehen aber die Rollen um. */
.v-invert {
  --v-ink:    #F2F6F3;
  --v-ink-60: var(--v-paper-70);
  --v-ink-40: var(--v-paper-45);
  --v-line:   var(--v-line-deep);
  --v-mist:   var(--v-deep);
  --v-paper:  var(--v-deep-soft);
  color: var(--v-ink);
  background: var(--v-deep);
}