/* ==========================================================================
   Design-Tokens – Kalle Glauch Sprachunterricht
   Werte 1:1 aus dem Designsystem (Abschnitt 19).
   Neue Werte nur ergänzen, wenn kein vorhandener Token die Funktion erfüllt.
   ========================================================================== */

:root {
  /* Farben */
  --color-background: #FBF8F3;
  --color-surface: #FFFDFC;
  --color-surface-subtle: #F7F2EB;
  --color-surface-warm: #F4E4D4;

  --color-ink: #1F3552;
  --color-ink-strong: #152A45;
  --color-ink-soft: #5B6A7D;
  --color-ink-muted: #7B8796;

  --color-apricot: #D89A6A;
  --color-apricot-light: #F2D7C2;
  --color-terracotta: #A35636;

  --color-sand: #E7D8CA;
  --color-sand-light: #F1E8DF;

  --color-sage: #AEBEAD;
  --color-sage-light: #E5ECE4;

  --color-sky: #B9CDDA;
  --color-sky-light: #E8F0F4;

  --color-border: #E3D7CC;
  --color-border-strong: #CDBCAD;

  --color-white: #FFFFFF;

  /* Typografie */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --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: 3.25rem;
  --text-5xl: 4.5rem;
  --text-hero: clamp(3rem, 7vw, 6rem);

  /* Abstände */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container-wide: 1180px;
  --container-standard: 1040px;
  --container-narrow: 760px;
  --page-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* Radien */
  --radius-small: 10px;
  --radius-medium: 18px;
  --radius-large: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Schatten */
  --shadow-soft: 0 12px 32px rgba(31, 53, 82, 0.08);
  --shadow-hover: 0 16px 36px rgba(31, 53, 82, 0.12);

  /* Bewegung */
  --duration-fast: 140ms;
  --duration-standard: 180ms;
  --duration-slow: 260ms;
}