/* ==========================================================================
   Blue Zone Vita — Design Tokens
   Übernommen aus dem Design-Handoff (design_system/tokens/).
   Farbwerte sind aus einem Screenshot der Live-Seite gemessen, nicht geschätzt.
   Nichts hier hart überschreiben — immer die semantischen Aliase benutzen.
   ========================================================================== */

:root {
  /* --- Marke ------------------------------------------------------------ */
  --bzv-navy-900: #0c1424;
  --bzv-navy-800: #141f37;   /* Hero-Grund, Footer */
  --bzv-navy-700: #1b2947;
  --bzv-navy-600: #22335a;
  --bzv-royal-700: #253c69;
  --bzv-royal-600: #2b4477;
  --bzv-royal-500: #314c85;  /* Markenfarbe: Bänder, Buttons, Links */
  --bzv-royal-400: #4a6cb0;
  --bzv-royal-300: #7f9ad1;
  --bzv-ice-200: #a8c3ea;    /* Kicker auf dunklem Grund */
  --bzv-ice-100: #dde5f4;
  --bzv-ice-050: #f3f6fb;

  --bzv-white: #ffffff;
  --bzv-ink: #141f37;
  --bzv-muted: #5a6780;
  --bzv-line: rgba(20, 31, 55, 0.14);
  --bzv-line-dark: rgba(255, 255, 255, 0.14);

  /* --- Semantische Aliase (im Seitencode diese verwenden) --------------- */
  --text-strong: var(--bzv-ink);
  --text-body: var(--bzv-ink);
  --text-muted: var(--bzv-muted);
  --text-on-dark: var(--bzv-white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.78);
  --text-kicker: var(--bzv-royal-500);
  --text-kicker-on-dark: var(--bzv-ice-200);

  --surface-page: var(--bzv-white);
  --surface-subtle: var(--bzv-ice-050);
  --surface-card: var(--bzv-white);
  --surface-media: linear-gradient(160deg, #f8fafd, var(--bzv-ice-100));
  --surface-band: var(--bzv-royal-500);
  --surface-deep: var(--bzv-navy-800);
  --surface-hero: linear-gradient(168deg, var(--bzv-navy-800) 0%, var(--bzv-navy-700) 55%, var(--bzv-navy-600) 100%);
  --surface-underwater: linear-gradient(180deg, var(--bzv-navy-600) 0%, var(--bzv-navy-700) 50%, var(--bzv-navy-800) 100%);
  --surface-form: #f5f7fc;

  --action-primary: var(--bzv-royal-500);
  --action-primary-hover: var(--bzv-royal-600);
  --action-primary-active: var(--bzv-royal-700);
  --action-on-dark: var(--bzv-white);
  --border-subtle: var(--bzv-line);
  --border-on-dark: var(--bzv-line-dark);
  --focus-ring: var(--bzv-royal-400);

  /* --- Schrift ---------------------------------------------------------- */
  /* Annäherung: die Live-Seite läuft mit Elementor, dessen Font-Konfiguration
     nicht auslesbar war. Sobald die echten Schriften vorliegen, nur diese
     beiden Variablen tauschen. */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 800;   /* nur die Wortmarke */

  --type-hero: clamp(40px, 7vw, 84px);
  --type-h1: clamp(34px, 5.2vw, 60px);
  --type-h2: clamp(28px, 3.6vw, 44px);
  --type-h3: clamp(24px, 3vw, 32px);
  --type-card-title: 21px;
  --type-card-title-sm: 19px;

  --type-lead: 19px;
  --type-body: 17px;
  --type-body-sm: 15.5px;
  --type-caption: 13.5px;
  --type-kicker: 13px;

  --leading-display: 1.12;
  --leading-hero: 1.06;
  --leading-body: 1.68;
  --leading-tight: 1.45;

  --track-display: -0.02em;
  --track-hero: 0.02em;   /* die Versalien der Wortmarke öffnen sich */
  --track-kicker: 0.16em;

  /* --- Abstände, Raster, Radien ----------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 44px;
  --space-9: 52px;
  --space-10: 76px;
  --space-11: 88px;
  --space-12: 104px;

  --shell: min(1200px, 100% - 48px);
  --gutter: 24px;
  --section-y: 88px;
  --section-y-lg: 104px;
  --measure: 58ch;
  --measure-narrow: 46ch;

  /* Das System ist weich, nie eckig. */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Schatten, Schleier, Bewegung ------------------------------------- */
  --shadow-card: 0 26px 50px -44px rgba(20, 31, 55, 0.7);
  --shadow-raised: 0 24px 48px -40px rgba(20, 31, 55, 0.55);
  --shadow-action: 0 18px 40px -18px rgba(49, 76, 133, 1);
  --shadow-media: 0 26px 50px -24px rgba(0, 0, 0, 0.6);
  --shadow-portrait: 0 40px 70px -40px rgba(0, 0, 0, 0.65);

  --blur-chrome: blur(14px);
  --scrim-hero: linear-gradient(180deg, rgba(20,31,55,.42) 0%, rgba(20,31,55,.18) 40%, rgba(20,31,55,.55) 100%);
  --scrim-band: linear-gradient(180deg, transparent, rgba(20,31,55,.8));

  --ease-out: cubic-bezier(.2, .75, .2, 1);
  --dur-reveal: 800ms;
  --dur-chrome: 350ms;
}

/* Bewegungsvokabular: Wasser in Zeitlupe. Einblendungen steigen auf, Licht
   driftet, Bläschen steigen. Nichts federt, nichts dreht sich schnell. */
@keyframes bzv-rise   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes bzv-drift  { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-5%,3%,0) scale(1.1); } }
@keyframes bzv-rays   { 0% { opacity: .30; transform: translateX(-3%); } 50% { opacity: .55; transform: translateX(3%); } 100% { opacity: .30; transform: translateX(-3%); } }
@keyframes bzv-bubble { 0% { transform: translateY(0) scale(.85); opacity: 0; } 12% { opacity: .55; } 70% { opacity: .35; } 100% { transform: translateY(-560px) scale(1.15); opacity: 0; } }