/* Design-Tokens – zbDEMO Weingut */

@font-face {
  font-family: "Gambetta";
  src: url("../fonts/Gambetta-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-v20-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --color-offwhite: #F6F4F1;
  --color-black: #111111;
  --color-warmblack: #17120E;
  --color-silver: #A6A6A6;
  --color-champagne: #C8B68E;
  --color-wine: #6B1221;
  --color-wine-hover: #5A0E1B;

  --color-text-on-dark: var(--color-offwhite);
  --color-nav-on-dark: rgba(246, 244, 241, 0.86);
  --color-muted-on-dark: rgba(246, 244, 241, 0.9);
  --color-text-on-light: var(--color-black);
  --color-muted-on-light: rgba(17, 17, 17, 0.7);
  --color-line-on-light: rgba(17, 17, 17, 0.14);
  --color-line-on-dark: rgba(246, 244, 241, 0.18);
  --color-border-on-dark: rgba(246, 244, 241, 0.42);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Abdunklung für Lesbarkeit (warm, kein reines Schwarz) */
  --scrim: 22, 14, 9;

  /* Schriften */
  --font-display: "Gambetta", "Instrument Serif", Georgia, serif;
  --font-body: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Typo-Skala */
  --fs-logo: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  --fs-hero: clamp(3.25rem, 1.2rem + 7.4vw, 7.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --fs-body: 1rem;
  --fs-nav: 0.9375rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --fs-h2: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --fs-h3: clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem);

  /* Abstände (8px-Raster) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 80px;
  --space-8: 120px;

  --pad-l: 24px;
  --pad-r: 24px;
  --header-h: 64px;
  --container: 1280px;
  --section-y: 80px;

  /* Bewegung */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.8s;

  --radius: 0;
}

@media (min-width: 1024px) {
  :root {
    --pad-l: 56px;
    --pad-r: 48px;
    --header-h: 80px;
    --section-y: 120px;
  }
}