/*
 * Zentrale Design-Tokens fuer jenius.
 * Leitidee "Das geordnete Dossier" (Record 003): Tinte auf Papier mit einem
 * Siegelrot-Akzent, Hairlines statt Schatten, kaum Rundungen.
 * Alle Farben, Abstaende, Radien und Typografie-Werte werden ausschliesslich
 * hier definiert. Komponenten verwenden ausschliesslich diese Custom Properties.
 *
 * Kontraste geprueft (WCAG 2.2 AA):
 *   - Weiss auf --color-accent (#B33A20):            5.9:1
 *   - --color-accent auf --color-background:         5.4:1
 *   - --color-text-muted auf --color-background:     5.2:1
 *   - --color-text-on-dark-muted auf --color-ink:    9.5:1
 */

:root {
  /* ---- Farben: Papier (Flaechen) ---- */
  --color-background: #f7f3eb;
  --color-background-muted: #efe9dc;
  --color-surface: #fcfaf5;
  --color-surface-elevated: #fcfaf5;

  /* ---- Farben: Tinte (Text) ---- */
  --color-ink: #1d1b18;
  --color-text-primary: #1d1b18;
  --color-text-secondary: #4a463f;
  --color-text-muted: #6b655a;
  --color-text-on-dark: #f3efe6;
  --color-text-on-dark-muted: #c9c2b4;

  /* ---- Farben: Marke (Tinte dominiert) ---- */
  --color-brand-primary: #1d1b18;
  --color-brand-primary-hover: #3a362f;
  --color-brand-primary-dark: #171512;
  --color-brand-secondary: #4a463f;
  --color-brand-tint: #efe9dc;

  /* ---- Farben: Akzent Siegelrot (CTA, Nummern, Markierungen) ---- */
  --color-accent: #b33a20;
  --color-accent-hover: #96301a;
  --color-accent-tint: #f2e4dc;

  /* ---- Farben: Funktional ---- */
  --color-border: #ddd5c4;
  --color-border-strong: #b8ae98;
  --color-hairline-ink: #1d1b18;
  --color-focus: #1d1b18;
  --color-success: #2f6b44;
  --color-success-tint: #e5f0e8;
  --color-warning: #8a5a17;
  --color-warning-tint: #f7edda;
  --color-error: #a93b2a;
  --color-error-tint: #f8e7e3;

  /* ---- Typografie ---- */
  --font-heading: "Fraunces Variable", Georgia, "Times New Roman", serif;
  --font-body:
    "Albert Sans Variable", -apple-system, "Segoe UI", Helvetica, Arial,
    sans-serif;

  --text-hero: clamp(2.5rem, 1.4rem + 4.6vw, 4.25rem);
  --text-display: clamp(1.9rem, 1.3rem + 2.6vw, 2.875rem);
  --text-h1: clamp(2.125rem, 1.5rem + 2.8vw, 3.125rem);
  --text-h2: clamp(1.625rem, 1.25rem + 1.7vw, 2.25rem);
  --text-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.375rem);
  --text-h4: 1.0625rem;
  --text-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-meta: 0.8125rem;
  --text-numeral: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);

  --weight-heading: 420;
  --weight-heading-strong: 560;

  --leading-tight: 1.08;
  --leading-heading: 1.2;
  --leading-body: 1.65;

  --measure-prose: 65ch;

  /* ---- Abstaende (4px-Basis) ---- */
  --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-section: clamp(4rem, 2.5rem + 5vw, 7rem);

  /* ---- Radien (bewusst minimal: Dossier, nicht Software) ---- */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-pill: 999px;

  /* ---- Rahmen & Schatten (Hairlines statt Schatten) ---- */
  --border-hairline: 1px solid var(--color-border);
  --border-rule: 1px solid var(--color-hairline-ink);
  --shadow-soft: none;
  --shadow-raised: 0 12px 32px rgb(29 27 24 / 0.14);

  /* ---- Layout ---- */
  --container-max: 71.25rem; /* 1140px */
  --container-narrow: 46rem; /* 736px  */
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Breakpoints (Referenzwerte, in Media Queries wiederholt):
     sm 40em / 640px - md 48em / 768px - lg 64em / 1024px */

  /*
   * ---- Bewegung (Record 005) ----
   * Eine einzige Easing-Kurve fuer die ganze Website; nur die Dauer
   * unterscheidet Interaktion, Komponentenwechsel und Inhaltseintritt.
   */
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-duration-fast: 180ms; /* Hover, Fokus, Buttons, Links */
  --motion-duration-medium: 300ms; /* Navigation, FAQ, Formularmeldungen */
  --motion-duration-slow: 520ms; /* Hero, Abschnittseintritt, Portrait */
  --motion-distance-small: 8px;
  --motion-distance-medium: 20px;
  --motion-stagger: 70ms;
  --motion-stagger-max: 350ms;

  /* Kurzformen fuer Transitions (Alt-Namen bleiben als Alias bestehen) */
  --transition-fast: var(--motion-duration-fast) var(--motion-ease);
  --transition-medium: var(--motion-duration-medium) var(--motion-ease);

  /* ---- Z-Index-Ebenen ---- */
  --z-header: 50;
  --z-mobile-nav: 60;
  --z-skip-link: 100;
}