/* Carabulario — Design Tokens
   Quelle: Carabulario_Design_und_Architektur_Briefing.md
   Schritt 1: ausschließlich Token-System
*/

:root {
  /* --------------------------------------------------
     1. Mathematische Grundlagen
     -------------------------------------------------- */
  --base-unit: 0.25rem;
  --type-scale-ratio: 1.25;

  /* --------------------------------------------------
     2. Spacing-Skala
     Ausschließlich aus --base-unit abgeleitet.
     -------------------------------------------------- */
  --space-1: var(--base-unit);
  --space-2: calc(var(--space-1) + var(--space-1));
  --space-3: calc(var(--space-2) + var(--space-1));
  --space-4: calc(var(--space-2) + var(--space-2));
  --space-6: calc(var(--space-4) + var(--space-2));
  --space-8: calc(var(--space-4) + var(--space-4));
  --space-12: calc(var(--space-8) + var(--space-4));
  --space-16: calc(var(--space-8) + var(--space-8));

  /* --------------------------------------------------
     3. Type-Scale — Major Third, Faktor 1.25
     Werte sind exakt aus 1rem × 1.25^n vorausberechnet.
     -------------------------------------------------- */
  --text-xs: 0.64rem;       /* 1rem / 1.25² */
  --text-sm: 0.8rem;        /* 1rem / 1.25  */
  --text-base: 1rem;        /* Basis          */
  --text-md: 1.25rem;       /* 1rem × 1.25    */
  --text-lg: 1.5625rem;     /* 1rem × 1.25²   */
  --text-xl: 1.953125rem;   /* 1rem × 1.25³   */
  --text-2xl: 2.44140625rem;/* 1rem × 1.25⁴   */

  /* Schriftgewichte laut Typografie-Hierarchie */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* --------------------------------------------------
     4. Fließende Größen aus dem Briefing
     -------------------------------------------------- */
  --text-vocabulary-fluid: clamp(1.75rem, 1.2rem + 2.5vw, 2.25rem);
  --page-padding-inline-fluid: clamp(1rem, 0.5rem + 3vw, 2rem);
  --sheet-max-width: min(28rem, 100%);

  /* --------------------------------------------------
     5. Radien
     -------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.5rem;
  --radius-full: 999px;

  /* --------------------------------------------------
     6. Elevation
     -------------------------------------------------- */
  --shadow-card:
    0 1px 3px rgba(31, 41, 51, 0.06),
    0 8px 24px rgba(31, 41, 51, 0.06);
  --shadow-sheet: 0 -4px 24px rgba(31, 41, 51, 0.12);

  /* --------------------------------------------------
     7. Motion
     Direkt als Transition-/Animation-Shorthand nutzbar.
     -------------------------------------------------- */
  --motion-fast: 150ms ease;
  --motion-base: 200ms ease;
  --motion-slow: 300ms ease;
  --motion-pulse: 1.4s ease-in-out infinite;

  /* --------------------------------------------------
     8. Light-Farben
     -------------------------------------------------- */
  color-scheme: light dark;

  --color-primary: #2b5c8a;
  --color-primary-light: #eaf1f7;
  --color-accent-de: #3a7ca5;
  --color-accent-es: #d98e5b;
  --color-success: #4c9a6e;
  --color-error: #c96a5a;
  --color-background: #fafaf8;
  --color-surface: #ffffff;
  --color-text-primary: #1f2933;
  --color-text-secondary: #6b7280;

  /* Semantischer Alias: Hotspot folgt immer der Primärfarbe. */
  --color-hotspot-highlight: var(--color-primary);
}

/* Manuell erzwungenes Light Theme */
:root[data-theme="light"] {
  color-scheme: light;
}

/* Automatisches Dark Theme nach Systemeinstellung.
   Ein manuell gesetztes data-theme="light" hat Vorrang. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-background: #14181d;
    --color-surface: #1e242b;
    --color-primary: #5b9bd6;
    --color-primary-light: #26313d;
    --color-accent-de: #6fa8cc;
    --color-accent-es: #e0a278;
    --color-success: #6bb98a;
    --color-error: #d98776;
    --color-text-primary: #f2f2f0;
    --color-text-secondary: #9aa3ae;
  }
}

/* Manuell erzwungenes Dark Theme */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-background: #14181d;
  --color-surface: #1e242b;
  --color-primary: #5b9bd6;
  --color-primary-light: #26313d;
  --color-accent-de: #6fa8cc;
  --color-accent-es: #e0a278;
  --color-success: #6bb98a;
  --color-error: #d98776;
  --color-text-primary: #f2f2f0;
  --color-text-secondary: #9aa3ae;
}

/* Bewegungsreduktion als globale Token-Überschreibung. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms linear;
    --motion-base: 0ms linear;
    --motion-slow: 0ms linear;
    --motion-pulse: none;
  }
}