/* Brand Tokens — Single Source of Truth für CSS Custom Properties.
 * Siehe docs/aesthetik-website-richtlinie.md → CSS-Tokens-Architektur.
 * Alle neuen Seiten verwenden ausschließlich diese Tokens.
 */
:root {
  /* Farben — Brand */
  --gold-primary: #b98c47;
  --gold-hover: #a07a3f;
  --gold-light: #d4a866;
  --gold-shadow: rgba(185, 140, 71, 0.3);
  --gold-glow: rgba(185, 140, 71, 0.1);

  /* Button-Primary — Gradient identisch zur Live-Seite augenheilkunde.html
   * (Frau-Dr.-Review P-03, 18.05.2026): Live-CTA "Termin vereinbaren" nutzt
   * linear-gradient(135deg, #b98c47, #d4a866). Alle Primary-Buttons im
   * Ästhetik-Bereich sind darauf vereinheitlicht. */
  --button-primary: linear-gradient(135deg, #b98c47, #d4a866);
  --shadow-button-live-hover: 0 5px 20px rgba(185, 140, 71, 0.4);

  /* Button "Maison" — P-04 (18.05.2026), Frau-Dr.-Review nach P-03.
   * 4-Stop-Gradient für visuelle Tiefe; Multi-Layer-Shadow für "schwebenden"
   * Eindruck; Inset-Highlights simulieren Material-Reflexion.
   * Brand-Identität "mattes Gold" #b98c47 bleibt als Start-Stop respektiert. */
  --button-primary-gradient: linear-gradient(135deg,
    #b98c47 0%,
    #c69b53 30%,
    #d4a866 60%,
    #e0b870 100%
  );

  --button-primary-shadow:
    0 1px 0 rgba(255,255,255,0.30) inset,
    0 -1px 0 rgba(0,0,0,0.06) inset,
    0 2px 5px rgba(31,46,61,0.08),
    0 8px 20px rgba(185,140,71,0.25),
    0 16px 36px rgba(185,140,71,0.14);

  --button-primary-shadow-hover:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 -1px 0 rgba(0,0,0,0.06) inset,
    0 4px 8px rgba(31,46,61,0.10),
    0 14px 32px rgba(185,140,71,0.32),
    0 24px 52px rgba(185,140,71,0.18);

  --button-primary-shadow-active:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 1px 2px rgba(31,46,61,0.10),
    0 4px 8px rgba(185,140,71,0.15);

  --button-easing: cubic-bezier(0.16, 1, 0.3, 1);

  /* Farben — Struktur */
  --anthracite: #2c3e50;
  --footer-bg: #1f2e3d;
  --cream-bg: #f9f6f1;
  --cream-accent: #f4f1eb;
  --white: #ffffff;

  /* Farben — Text */
  --text-primary: #2c2c2c;
  --text-section: #4a3b2a;
  --text-muted: #7f8c8d;

  /* Farben — Borders */
  --border-light: #e0e0e0;
  --border-accent: #e8e4dc;
  --border-gold-subtle: rgba(185, 140, 71, 0.15);

  /* Typografie — radikal kompakter v2 (Magazin/Mobile-First, 17.05.2026) */
  --font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --fs-h1: 2.25rem;         /* v2: 2.5rem → 2.25rem */
  --fs-h2: 1.5rem;          /* v2: 1.75rem → 1.5rem */
  --fs-h3: 1.25rem;
  --fs-body: 16px;
  --fs-body-large: 18px;    /* für Hero-Description und FAQ-Summary */
  --fs-eyebrow: 11px;
  --fs-small: 13px;
  --lh-body: 1.5;           /* v2: 1.55 → 1.5 */
  --lh-text: 1.65;
  --fw-light: 300;
  --fw-medium: 500;
  --fw-semibold: 600;
  --ls-headline: 0.5px;
  --ls-subtitle: 1px;
  --ls-eyebrow: 4px;

  /* Spacing — radikal kompakter v2 */
  --space-section: 2rem;       /* v2: 3rem → 2rem */
  --space-block: 1.25rem;      /* v2: 2rem → 1.25rem */
  --space-element: 0.875rem;   /* v2: 1.25rem → 0.875rem */
  --space-tight: 0.5rem;       /* v2: 0.75rem → 0.5rem */
  --space-mini: 0.4rem;

  /* Layout */
  --container-max: 1200px;
  --container-padding: 20px;
  --radius-card: 20px;
  --radius-card-mobile: 14px;
  --radius-button: 30px;
  --radius-pill: 25px;

  /* Shadows */
  --shadow-header: 0 2px 20px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.1);
  --shadow-button-gold: 0 10px 25px rgba(185, 140, 71, 0.3);
  --shadow-button-gold-small: 0 5px 15px rgba(185, 140, 71, 0.3);
  --shadow-mobile-card: 0 4px 12px rgba(0, 0, 0, 0.05);

  /* Bento-Layout — radikal kompakter v2 */
  --bento-card-large-min-h: 110px;  /* v2: 140 → 110 */
  --bento-card-small-min-h: 95px;   /* v2: 120 → 95 */
  --bento-card-mobile-min-h: 75px;  /* v2: 90 → 75 */
  --bento-card-mobile-list-h: 60px;
  --bento-gap-desktop: 0.75rem;     /* v2: 1rem → 0.75rem */
  --bento-gap-mobile: 0.5rem;
}