/* ==========================================================================
   WestCom Design Tokens
   Abgeleitet aus dem bestehenden WestCom-Logo (Blau #00579B / #003868).
   Einzige Quelle für Farben, Typo, Abstände, Radien, Schatten, Bewegung.
   Spiegelbild: Design-System-Artifact „WestCom“ (tokens.json).
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Marke -------------------------------------------------------- */
  --wc-blue-950: #04172e;   /* Tiefstes Navy – Service-Flächen, Footer-Leiste */
  --wc-blue-900: #082747;   /* Navy – dunkle Flächen */
  --wc-blue-800: #003868;   /* Logo-Dunkelblau */
  --wc-blue-700: #00467d;   /* Hover auf Primär */
  --wc-blue-600: #00579b;   /* PRIMÄR – Logo-Blau, Aktionen, Links */
  --wc-blue-500: #1a6fb8;   /* Fokus, aktive Linien */
  --wc-blue-300: #8db4dc;   /* Linien auf Navy */
  --wc-blue-100: #e3edf7;   /* Auswahl, aktive Chips */
  --wc-blue-50:  #f1f6fb;   /* Hinweisflächen */

  /* --- Neutral (leicht kühl, passend zum Blau) ------------------------ */
  --wc-ink:      #0d1826;   /* Haupttext */
  --wc-ink-2:    #3a4757;   /* Sekundärtext */
  --wc-ink-3:    #5d6a7a;   /* Hinweistext (4.9:1 auf Weiß) */
  --wc-line:     #dfe5ec;   /* Trennlinien */
  --wc-line-2:   #c7d0db;   /* Formularränder */
  --wc-surface:  #ffffff;
  --wc-surface-2:#f5f7fa;   /* Abschnittshintergrund */
  --wc-surface-3:#ebeff4;   /* Produktbühne */

  /* --- Status --------------------------------------------------------- */
  --wc-success:     #17704a;
  --wc-success-bg:  #e8f4ee;
  --wc-error:       #b4261a;
  --wc-error-bg:    #fcecea;
  --wc-warning:     #8a5100;
  --wc-warning-bg:  #fdf3e1;
  --wc-placeholder: #8a5100;  /* Platzhalter-Kennzeichnung (gleich Warnung) */

  /* --- Semantisch ------------------------------------------------------ */
  --c-bg: var(--wc-surface);
  --c-bg-alt: var(--wc-surface-2);
  --c-text: var(--wc-ink);
  --c-text-2: var(--wc-ink-2);
  --c-text-3: var(--wc-ink-3);
  --c-primary: var(--wc-blue-600);
  --c-primary-hover: var(--wc-blue-700);
  --c-primary-active: var(--wc-blue-800);
  --c-focus: var(--wc-blue-500);
  --c-dark: var(--wc-blue-900);

  /* --- Typografie ------------------------------------------------------ */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.45rem + 3.9vw, 4.6rem);
  --fs-h1:      clamp(2.2rem, 1.45rem + 2.9vw, 3.9rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 1.12rem + .5vw, 1.5rem);
  --fs-product-xl: clamp(1.9rem, 1.4rem + 1.9vw, 3rem);
  --fs-product: 1.1875rem;
  --fs-lead:    clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   .9375rem;
  --fs-caption: .8125rem;
  --fs-eyebrow: .75rem;
  --fs-button:  .9375rem;

  --lh-tight: 1.02;
  --lh-head:  1.12;
  --lh-body:  1.6;
  --tracking-display: -.038em;
  --tracking-head: -.026em;
  --tracking-eyebrow: .09em;

  /* --- Abstände (4er-Raster) ------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --section-y: clamp(72px, 5vw + 40px, 144px);
  --gutter: clamp(16px, 2.6vw, 40px);
  --maxw: 1360px;
  --maxw-text: 680px;

  /* --- Radien ---------------------------------------------------------- */
  --r-xs: 4px;    /* Badges, Codes */
  --r-sm: 8px;    /* Buttons, Felder */
  --r-md: 14px;   /* Panels */
  --r-lg: 24px;   /* Produktbühnen */

  /* --- Schatten (sparsam) --------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(13, 24, 38, .06);
  --shadow-2: 0 10px 30px -12px rgba(8, 39, 71, .22);
  --shadow-pop: 0 24px 60px -20px rgba(4, 23, 46, .38);

  /* --- Bewegung -------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 600ms;

  --header-h: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}