/**
 * Design Tokens — einzige Quelle für Rohwerte.
 * Nie Rohfarben/-maße im Komponenten-CSS verwenden, immer diese Variablen.
 */

/* ---------- Hell/Dunkel (Modus via [data-theme] auf <html>) ----------
   Palette ist die gewählte "warm & akademisch"-Richtung — light ist Standard,
   dark ist keine simple Invertierung, sondern eigens abgestimmt (wärmeres,
   dunkles Papier/Leder-Gefühl statt reinem Schwarz). */

:root,
[data-theme="light"] {
  --bg: #f6f1e7;
  --bg-alt: #efe6d4;
  --border: #ddd0b8;
  --text-primary: #2a2420;
  --text-secondary: #4d4436;
  --text-muted: #6b5f4f;
  --accent: #9c3d2e;
  --accent-dk: #7c2f22;
  --accent-2: #7c6a2e;
  --on-accent: #ffffff;
  /* Sagt dem Browser, welches Farbschema gerade aktiv ist — sonst rendert
     z. B. Safari native Formularelemente (Buttons, Scrollbars) weiterhin
     nach OS-Einstellung statt nach unserem data-theme, was Hintergrund-
     /Schriftfarbe von Buttons durcheinanderbringen kann. */
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #1b1610;
  --bg-alt: #241d15;
  --border: #3d3122;
  --text-primary: #f1e8d7;
  --text-secondary: #cdbca0;
  --text-muted: #9c8a72;
  --accent: #e08a68;
  --accent-dk: #f2a583;
  --accent-2: #d1a94e;
  --on-accent: #1b1610;
  color-scheme: dark;
}

/* ---------- Kategorie-Farben (Zeitstrahl etc.) ----------
   Fünf unterscheidbare, aber zur warmen Palette passende Töne.
   Bildung/Erfahrung nutzen die bestehenden Accents, drei weitere ergänzen. */

[data-theme="light"] {
  --cat-bildung: var(--accent);
  --cat-erfahrung: var(--accent-2);
  --cat-auszeichnung: #4b6b3f;
  --cat-projekt: #3f5c6b;
  --cat-persoenlich: #a14f63;
}

[data-theme="dark"] {
  --cat-bildung: var(--accent);
  --cat-erfahrung: var(--accent-2);
  --cat-auszeichnung: #8fb37a;
  --cat-projekt: #7fa8bd;
  --cat-persoenlich: #d98da0;
}

/* ---------- Typografie ---------- */

:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-md: 1.15rem;
  --text-lg: 1.35rem;
  --text-xl: clamp(1.6rem, 3vw, 2.1rem);
  --text-2xl: clamp(2.1rem, 4vw, 2.9rem);
  --text-hero: clamp(2.4rem, 5vw, 3.8rem);
}

/* ---------- Spacing ---------- */

:root {
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 0.75rem;
  --sp-lg: 1rem;
  --sp-xl: 1.5rem;
  --sp-2xl: 2rem;
  --sp-3xl: 3rem;
  --sp-4xl: 5rem;
}

/* ---------- Radius ----------
   Bewusst kein "voll rund" (9999px) auf Buttons/Chips —
   nur abgeflachte Ecken. --r-full bleibt für Kreisformen (z.B. Avatare) reserviert. */

:root {
  --r-sm: 4px;   /* Chips, Badges, Tags */
  --r-md: 8px;   /* Buttons, Inputs */
  --r-lg: 12px;  /* Cards, Panels */
  --r-xl: 16px;  /* große Flächen, Modals */
  --r-full: 9999px; /* nur Kreise/Avatare, nicht für Buttons/Pills */
}

/* ---------- Sonstiges ---------- */

:root {
  --shadow-card: 0 12px 24px -14px rgba(0, 0, 0, 0.25);
  --focus-ring: 0 0 0 3px var(--accent);
}

/* Breakpoints (Referenz — CSS erlaubt hier keine var(), Werte in Media Queries hart codieren)
   --bp-sm: 480px   Smartphone Querformat / kleine Tablets
   --bp-md: 720px   Nav-Umbruch (Hamburger unterhalb)
   --bp-lg: 1024px  Desktop
*/