/* ============================================================
   VCI Design — Design Tokens
   Single Source of Truth. Werte stammen aus Abschnitt 1 des
   VCI-Design-Planungsdokuments. Ausserhalb dieser Datei werden
   keine Rohwerte notiert, sondern ausschliesslich Tokens.
   ============================================================ */

:root {
  /* --- Farben: Rohwerte -------------------------------------
     Kontrastwerte jeweils gegen --color-white (#fafafa),
     gerechnet nach WCAG 2.1 Relative Luminance.
     ---------------------------------------------------------- */
  --color-black: #0a0a0a;        /* 18.97:1 auf Weiss — AAA */
  --color-white: #fafafa;
  --color-grey: #6b6b6b;         /*  5.11:1 auf Weiss — AA    */
  --color-grey-light: #e6e6e6;   /* dekorativ, keine Textfarbe */

  /* Akzent Cyan. Nur 1.50:1 auf Weiss, deshalb NIEMALS als
     Textfarbe und nie als alleiniger Fokus-Indikator. Erlaubt
     fuer Flaechen, Fuellungen, Grafik und Hover-Unterlagen. */
  --color-accent: #00e5e8;
  /* Textfaehige Variante desselben Farbtons: 5.07:1 auf Weiss. */
  --color-accent-ink: #00787a;

  /* --- Farben: semantische Ebene ----------------------------
     Nur diese Tokens werden im uebrigen CSS verwendet. Eine
     spaetere Dark-Variante ist dadurch ein einzelner Block
     und kein Refactor.
     ---------------------------------------------------------- */
  --color-bg: var(--color-white);
  --color-fg: var(--color-black);
  --color-fg-muted: var(--color-grey);
  --color-border: var(--color-grey-light);
  --color-focus: var(--color-accent-ink);

  /* --- Typografie: Familien ---------------------------------
     Testvariante: eine Familie fuer die ganze Seite. Beide Token
     bleiben bestehen und zeigen auf dieselbe Schrift, damit die
     zwoelf Aufrufstellen unveraendert bleiben und der Weg zurueck
     zu zwei Familien eine Aenderung von zwei Zeilen ist.

     Fallback bewusst auf Serif. Waehrend font-display: swap und
     bei einem Ladefehler spraenge sonst eine serifenlose Schrift
     ein, die mit Playfair nichts gemein hat, und der Umbruch
     wuerde beim Tausch weiter springen als noetig.
     ---------------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-text: "Playfair Display", Georgia, "Times New Roman", serif;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* Nur fuer den grossen Kontakt-Link in der Statement-Sektion.
     Erst seit dem Wechsel auf Playfair Display ueberhaupt
     erreichbar, dessen Achse laeuft bis 900. */
  --weight-black: 900;

  /* --- Typografie: fluide Skala ----------------------------- */
  --text-display-large: clamp(2.75rem, 2rem + 3.5vw, 5.5rem);      /* 44–88px */
  --text-display-medium: clamp(2.25rem, 1.75rem + 2.5vw, 4rem);    /* 36–64px */
  --text-heading-large: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);      /* 28–40px */
  --text-heading-medium: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); /* 22–28px */
  --text-medium: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);          /* 16–17px, Standard */
  --text-small: 0.875rem;                                          /* 14px, statisch */
  --text-xx-small: 0.75rem;                                        /* 12px, nur Disclaimer */

  /* --- Typografie: Zeilenhoehe und Laufweite ---------------- */
  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-text: 1.6;
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-text: 0;
  --tracking-label: 0.08em;

  /* --- Spacing ----------------------------------------------
     Rhythmus-Basis 4px. Fluide Spacer sind Standard, statische
     Werte nur fuer Sonderfaelle.
     ---------------------------------------------------------- */
  --space-unit: 0.25rem;                                       /* 4px Raster */
  --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);        /*  8–12px */
  --space-s: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);            /* 12–16px */
  --space-m: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);            /* 16–24px, Standard */
  --space-l: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);            /* 24–40px */
  --space-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);               /* 32–64px */
  --space-xxl: clamp(4rem, 2.5rem + 7.5vw, 8rem);              /* 64–128px, zwischen Sektionen */

  /* --- Motion ----------------------------------------------
     Scroll-gekoppelte Animationen (Sticky-Stack) haben bewusst
     keinen Duration-Token, sie haengen am Scroll-Fortschritt.
     ---------------------------------------------------------- */
  --duration-short: 0.25s;    /* Hover, Buttons */
  --duration-medium: 0.4s;    /* Section-Reveals, Tab-Wechsel */
  --duration-long: 0.6s;      /* groessere Uebergaenge, Stat-Counter */

  /* Benennung enter/exit statt in/out, weil CSS ease-in genau
     die umgekehrte Bedeutung traegt. Zuordnung zum Dokument:
     ease-base = Basis-Kurve, ease-enter = In-Kurve (Elemente
     erscheinen), ease-exit = Out-Kurve (Elemente verschwinden). */
  --ease-base: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* --- Grid und Layout -------------------------------------
     Bewusst einstufig. Kein Extended/Wide/Narrow-System.
     ---------------------------------------------------------- */
  --grid-columns: 12;
  --container-max: 90rem;                                  /* 1440px */
  --page-padding: clamp(1.25rem, 0.75rem + 2.5vw, 4rem);   /* 20–64px */
  --gutter: clamp(1rem, 0.75rem + 1.25vw, 2rem);           /* 16–32px */

  /* Hoehe des klebenden Headers. Wird von scroll-padding-top
     und vom Mobile-Overlay mitbenutzt, deshalb ein Token. */
  --header-height: clamp(4rem, 3.5rem + 1.5vw, 5.25rem);   /* 64–84px */

  /* --- Stapelreihenfolge ----------------------------------- */
  --z-header: 100;
  --z-overlay: 200;
}

/* Mobile faellt auf 6 Spalten. Breakpoint deckungsgleich mit
   dem isMobile-Kontext in js/motion.js. */
@media (max-width: 768px) {
  :root {
    --grid-columns: 6;
  }
}