/* =============================================================
   tokens.css — Design-Tokens Starthaus
   Zentrale Custom Properties. Keine Hardcodes in Komponenten-CSS.
   ============================================================= */

:root {
  /* ---- Marke / Primär (Petrol) ---- */
  --color-primary:            #0E5E5A;
  --color-primary-hover:      #0A4845;
  --color-primary-dark:       #06302E;
  --color-primary-tint:       #E4F0EF;
  --color-primary-tint-2:     #C9E3E1;

  /* ---- Akzent (Bernstein / Sonne) ---- */
  --color-accent:             #E8853B;
  --color-accent-hover:       #CC6E27;
  --color-accent-tint:        #FBEBDC;
  --color-accent-strong:      #B85A1C;

  /* ---- Sekundär (Salbei / Faktenmodus) ---- */
  --color-secondary:          #4A6B63;
  --color-secondary-tint:     #EDF1F0;

  /* ---- Neutrale ---- */
  --color-bg:                 #FBF9F5;
  --color-surface:            #FFFFFF;
  --color-surface-alt:        #F3EFE8;
  --color-border:             #E2DCD0;
  --color-border-strong:      #C4BCAB;

  --color-text:               #1F2422;
  --color-text-muted:         #55605C;
  --color-text-on-dark:       #F4F1EA;
  --color-text-on-primary:    #FFFFFF;

  /* ---- Status / Feedback ---- */
  --color-success:            #1F7A43;
  --color-success-tint:       #E1F1E7;
  --color-warning:            #B5740A;
  --color-warning-tint:       #FBEFD6;
  --color-error:              #C0322B;
  --color-error-tint:         #FBE6E4;
  --color-info:               #0E5E5A;
  --color-info-tint:          #E4F0EF;

  /* ---- Fokus & Interaktion ---- */
  --color-focus:              #1B73C9;
  --color-link:               #0A4845;
  --color-link-hover:         #E8853B;

  /* ---- WhatsApp ---- */
  --color-whatsapp:           #25D366;
  --color-whatsapp-dark:      #128C7E;

  /* ---- Typografie ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-arabic:  "Noto Sans Arabic", "Hanken Grotesk", sans-serif;

  --fs-300:  0.875rem;
  --fs-400:  1rem;
  --fs-500:  1.125rem;
  --fs-600:  1.25rem;
  --fs-h5:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h4:   clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  --fs-h3:   clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  --fs-h2:   clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-h1:   clamp(2.4rem, 1.9rem + 3vw, 3.9rem);

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

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

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ---- Layout & Maße ---- */
  --container-max:  1200px;
  --container-wide: 1360px;
  --container-text: 760px;
  --gutter:         clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --measure:        68ch;

  /* ---- Spacing-Skala ---- */
  --space-2:   0.125rem;
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-96:  6rem;
  --space-128: 8rem;
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* ---- Radien ---- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-arch: 999px 999px 0 0;
  --radius-pill: 999px;

  /* ---- Schatten ---- */
  --shadow-sm: 0 1px 2px rgba(6,48,46,.06), 0 1px 3px rgba(6,48,46,.08);
  --shadow-md: 0 4px 12px rgba(6,48,46,.08), 0 2px 4px rgba(6,48,46,.06);
  --shadow-lg: 0 12px 32px rgba(6,48,46,.12), 0 4px 8px rgba(6,48,46,.06);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.2, 0, .2, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---- Header-Höhe (für Scroll-Offset & Sticky) ---- */
  --header-h: 80px;

  /* ---- Audit-Korrektur Runde 1 ----------------------------------------
     Symbolbild-Hinweis (Demo-Fotos kennzeichnen, K2) und
     Avatar-Initialen-Tints (statt identischer Avatar-SVGs, K4)            */
  --symbol-badge-bg:     rgba(255, 255, 255, 0.85);
  --symbol-badge-color:  var(--color-text-muted);
  --avatar-tint-1: #C9E3E1;  /* Petrol-tint-2 */
  --avatar-tint-2: #FBEBDC;  /* Akzent-tint */
  --avatar-tint-3: #EDF1F0;  /* Secondary-tint (Salbei) */
  --avatar-tint-4: #D9E8DE;  /* Salbei-hell */
  --avatar-tint-5: #F2E1CE;  /* Sand-warm */
  --avatar-tint-6: #E0D5E8;  /* Lavendel-sehr-dezent */
}

/* Breakpoint-Referenz (für Doku — Media Queries direkt mit px geschrieben):
   --bp-sm 480px · --bp-md 768px · --bp-lg 992px · --bp-xl 1200px · --bp-xxl 1440px */