/* IQspeakr Design Tokens
   Quelle: Brain/04 Ressourcen/IQspeakr Brand & Design.md
   Extrahiert aus macos_v2026.6.0/app.py */

:root {
  /* Fonts */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Akzente */
  --accent: #1B8A99;
  --accent-hover: #146E7B;
  --accent-soft: rgba(27, 138, 153, 0.14);
  --secondary: #D4A574;

  /* Akzent auf dunklem Grund.
     --accent schafft dort nur 2.61:1 und ist als Linkfarbe unlesbar.
     Dieser aufgehellte Teal kommt auf 5.17:1 gegen --text. */
  --accent-on-dark: #5CC3D1;

  /* Flächen */
  --bg: #EEEBE4;
  --surface: #E6E2D9;
  --input: #FBFAF6;
  --border: #D9D4C9;
  --border-hover: #C7C0B1;

  /* Text */
  --text: #3A3F42;
  --text-secondary: #565D61;
  --text-muted: #8A8E8B;

  /* Gedämpfter Text auf dunklem Grund.
     --text-muted schafft dort nur 3.21:1 und faellt durch WCAG AA (4.5:1).
     Dieser Ton haelt auch auf den leicht aufgehellten Karten-Flaechen der
     Datenschutz-Sektion ueber 4.5:1 und bleibt trotzdem zurueckhaltend. */
  --text-muted-on-dark: #B7BBB4;

  /* Status */
  --danger: #C0492F;
  --success: #1E9E54;
  --warning: #C98A1E;

  /* Typografische Skala — bewusst hoher Kontrast (Editorial) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --text-hero: clamp(2.5rem, 1rem + 6.5vw, 6.5rem);

  /* Rhythmus — bewusst ungleichmäßig, kein Uniform-Padding */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* Radien — abgestuft, nicht uniform */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* Tiefe — warm getönte Schatten statt neutralem Grau */
  --shadow-sm: 0 1px 2px rgba(58, 63, 66, 0.06);
  --shadow-md: 0 4px 16px -4px rgba(58, 63, 66, 0.12);
  --shadow-lg: 0 18px 48px -12px rgba(58, 63, 66, 0.20);
  --shadow-accent: 0 12px 32px -8px rgba(27, 138, 153, 0.40);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Layout */
  --measure: 62ch;
  --container: 1180px;
  --container-narrow: 720px;
}