/* ============================================================
   tokens.css — Globale Design-Tokens
   ------------------------------------------------------------
   Theme-unabhängige Tokens. Farb-Tokens stehen in themes.css.
   Skalen sind ratio-basiert, mobile-first.
   ============================================================ */

:root {
  /* ---------- Typografie-Stack (system, GDPR-konform) ----------
     Display: roher, breit-bold Brutalism-Charakter
     Sans:    klar lesbarer Body-Text
     Mono:    Meta-/Archiv-Labels
     Später ggf. durch lokale Web-Fonts ersetzbar (Inter,
     Space Grotesk, JetBrains Mono).
  */
  --font-display: "Helvetica Neue", "Arial Black", "Inter", system-ui, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* ---------- Type Scale (modular, mobile-first) ----------
     Skaliert über clamp() responsiv. Display-Kopfzeilen
     erreichen auf großen Screens bewusst kantige Größen.
  */
  --fs-xs: 0.75rem;     /* 12px – mono labels */
  --fs-sm: 0.875rem;    /* 14px – meta */
  --fs-base: 1rem;      /* 16px – body */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.25rem;     /* 20px */
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --fs-3xl: clamp(2rem, 1.4rem + 3vw, 3rem);
  --fs-4xl: clamp(2.75rem, 1.5rem + 5vw, 4.5rem);
  --fs-5xl: clamp(3.5rem, 1.5rem + 8vw, 7rem);
  --fs-6xl: clamp(4.5rem, 2rem + 12vw, 10rem);

  /* ---------- Line Heights ---------- */
  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* ---------- Letter Spacing ---------- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-mono: 0.08em;

  /* ---------- Font Weights ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---------- Spacing Scale (4er-Raster) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --container-pad-inline: clamp(1rem, 4vw, 3rem);
  --section-pad-block: clamp(3rem, 7vw, 6rem);
  /* Höhe des sticky Site-Headers (padding-block 2× space-3 + icon-btn 44px + border 2px).
     Wird von der Sidebar/Backdrop genutzt, um genau unterhalb des Headers zu starten. */
  --header-h: 4.5rem;

  /* ---------- Borders (Neo-Brutalism: harte Linien) ---------- */
  --border-w-hair: 1px;
  --border-w: 2px;
  --border-w-strong: 3px;

  /* ---------- Radii (bewusst minimal) ---------- */
  --radius-none: 0;
  --radius-xs: 2px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap: cubic-bezier(0.7, 0, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;

  /* ---------- Z-Layer ---------- */
  --z-base: 0;
  --z-overlay: 50;
  --z-nav: 60;
  --z-sidebar: 70;
  --z-modal: 80;
  --z-toast: 90;

  /* ---------- Breakpoints (nur als Referenz, real in @media) ----------
     sm  : 480px
     md  : 768px
     lg  : 960px
     xl  : 1200px
     2xl : 1440px
  */
}