/**
 * tokens.css
 * Design Tokens: Farben, Typo, Spacing, Radius, Shadow, Container
 * Ziel: Alles modular über var() nutzbar, fluid via clamp()
 */

:root {
  /* -----------------------------
   * Farben (Beispiel-Set)
   * ----------------------------- */
  --color-bg: #ffffff;
  --color-surface: #151a22;
  --color-text: #000000;
  --color-text-light:#ffffff;
  --color-muted: #999999;
  --color-brand: #ef7024;
  --color-accent: #f8d26e;
  --color-border: color-mix(in srgb, var(--color-text) 12%, transparent);

  /* -----------------------------
   * Typography
   * ----------------------------- */
  --font-base: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* Fluid Type Scale (Beispiele)
   * Du kannst das an dein bevorzugtes Scale-System anpassen.
   * Faustregel: clamp(min, preferred vw, max)
   */
  --fs--1: clamp(0.875rem, 0.84rem + 0.2vw, 0.95rem);
  --fs-0:  clamp(1rem,     0.95rem + 0.3vw, 1.125rem);
  --fs-1:  clamp(1.125rem, 1.05rem + 0.6vw, 1.375rem);
  --fs-2:  clamp(1.375rem, 1.20rem + 1.0vw, 1.875rem);
  --fs-3:  clamp(1.75rem,  1.45rem + 1.6vw, 2.5rem);
  --fs-4:  clamp(2.25rem,  1.80rem + 2.4vw, 3.25rem);
  --fs-5:  clamp(2.75rem,  2.10rem + 3.4vw, 4.25rem);

  --lh-base: 1.6;
  --lh-tight: 1.15;

  /* -----------------------------
   * Spacing Scale (fluid)
   * ----------------------------- */
  --space-1: clamp(0.25rem, 0.20rem + 0.3vw, 0.5rem);
  --space-2: clamp(0.5rem,  0.40rem + 0.5vw, 0.875rem);
  --space-3: clamp(0.75rem, 0.60rem + 0.7vw, 1.25rem);
  --space-4: clamp(1rem,    0.80rem + 1.0vw, 1.75rem);
  --space-5: clamp(1.5rem,  1.10rem + 1.6vw, 2.5rem);
  --space-6: clamp(2rem,    1.50rem + 2.2vw, 3.5rem);
  --space-7: clamp(3rem,    2.20rem + 3.4vw, 5rem);
  --space-8: clamp(4rem,    3.00rem + 4.8vw, 7rem);

  /* -----------------------------
   * Layout / Container
   * ----------------------------- */
  --container-max: 72rem; /* ~1152px */
  --container-max-wide: 80rem;   /* Wide Sections */
  --container-max-narrow: 64rem; /* Optional: Text-lastig */
  --gutter: clamp(1rem, 0.8rem + 1vw, 1.75rem);

  /* -----------------------------
   * Radius / Shadow
   * ----------------------------- */
  --radius-1: 0.5rem;
  --radius-2: 0.9rem;
  --radius-3: 1.25rem;

  --shadow-1: 0 8px 24px rgba(0,0,0,0.25);
  --shadow-2: 0 16px 40px rgba(0,0,0,0.35);

  /* -----------------------------
   * UI / Motion
   * ----------------------------- */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-accent) 55%, transparent);
  --transition-fast: 160ms ease;
  --transition: 220ms ease;
}

/* Optional: Light Mode über prefers-color-scheme */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #ffffff;
    --color-surface: #f6f7fb;
    --color-text: #0f1115;
    --color-muted: #445066;
    --color-border: color-mix(in srgb, var(--color-text) 10%, transparent);
  }
}