/* ==========================================================================
   Design Tokens — Stilton Commerce GmbH
   Alle CSS Custom Properties zentral definiert.
   ========================================================================== */

:root {
  /* --- Farben: Hintergründe --- */
  --color-bg-primary: #0F0E0D;
  --color-bg-secondary: #1A1918;
  --color-bg-tertiary: #272624;
  --color-bg-subtle: #14120F;

  /* --- Farben: Text --- */
  --color-text-primary: #F5F1EB;
  --color-text-secondary: #A8A29A;
  --color-text-muted: #878077;
  --color-text-label: #8B8278;

  /* --- Farben: Akzente --- */
  --color-accent: #C8896C;
  --color-accent-hover: #D9997D;
  --color-accent-muted: #A06E56;
  --color-link: #C8896C;
  --color-link-hover: #D9997D;
  --color-star: #D9A86C;

  /* --- Farben: Struktur --- */
  --color-border: #2E2C2A;
  --color-border-strong: #3E3B38;
  --color-success: #6BBF8F;
  --color-error: #D96C6C;

  /* --- Typografie --- */
  --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  --text-6xl: 5rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* --- Abstände --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

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

  /* --- Radien, Schatten --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}