/* ============================================================
   Design Tokens — abgeleitet aus BITS-Referenz
   ============================================================ */

:root {
  /* Farben */
  --color-bg: #F9F1EA;
  --color-bg-alt: #F2E8DD;
  --color-surface: #FFFFFF;
  --color-surface-dark: #1C1C1C;
  --color-ink: #000000;
  --color-ink-soft: #2A2A2A;
  --color-ink-muted: #8F8B86;
  --color-accent-warm: #C9AF9D;
  --color-accent-sand: #E7D6C8;
  --color-accent-brand: #B85C38;       /* Terrakotta – primärer Akzent */
  --color-accent-brand-deep: #8E4427;  /* dunkler für Hover/Aktiv */
  --color-border: #D9C4B2;             /* spürbarer als zuvor */
  --color-border-soft: #EFE3D6;
  --color-danger: #B3261E;
  --color-focus: #000000;

  /* Typografie */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", "Gelica", Georgia, serif;
  --font-mono: "JetBrains Mono", "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid Font-Sizes */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.45rem + 2vw, 2.75rem);
  --fs-4xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);
  --fs-5xl: clamp(2.75rem, 1.8rem + 4.5vw, 5rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  /* Spacing (fluid) */
  --space-2xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3125rem);
  --space-xs:  clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
  --space-sm:  clamp(0.75rem, 0.7rem + 0.25vw, 0.9375rem);
  --space-md:  clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --space-lg:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --space-xl:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --space-2xl: clamp(3rem, 2.3rem + 3.5vw, 5rem);
  --space-3xl: clamp(4rem, 2.8rem + 6vw, 8rem);

  /* Radien — etwas straffer für klarere Kanten */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Layout-Hilfsvariablen */
  --header-h: 64px;

  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-dark: 0 20px 40px rgba(28, 28, 28, 0.18);

  /* Layout */
  --container-max: 1280px;
  --container-padding: clamp(1rem, 4vw, 2.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 450ms;

  /* Touch */
  --touch-min: 44px;

  /* Z-Layer */
  --z-nav: 30;
  --z-overlay: 50;
  --z-float: 40;
  --z-top: 80;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}