/* ==========================================================================
   Woman & Health — Design-Tokens (Meridian-Architektur, auf W&H ge-themed)
   Marke: Gold #BFA26E · Typografie: Fraunces (Editorial-Serif, Headlines)
   + Inter (Fließtext, UI, Buttons) via Google Fonts.
   Re-Theming = nur diese Datei (+ Font-Link im Layout) anpassen.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Fonts (Google Fonts) -------------------------------------------- */
  --dm-font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --dm-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dm-font-mono:    ui-monospace, "SF Mono", "Spline Sans Mono", monospace;

  /* ---- Colors: brand (Gold) ------------------------------------------- */
  --dm-color-primary: #bfa26e;
  --dm-color-on-primary: #ffffff;
  --dm-color-primary-hover: #a98a55;
  --dm-color-primary-subtle: #f5edd8;
  --dm-color-on-primary-subtle: #6f5722;

  /* ---- Colors: neutrals (warm) ---------------------------------------- */
  --dm-color-background: #fafaf8;
  --dm-color-on-background: #1f1a14;
  --dm-color-surface: #ffffff;
  --dm-color-on-surface: #1f1a14;
  --dm-color-surface-variant: #f6f1e7;
  --dm-color-on-surface-variant: #76716c;
  --dm-color-outline: #d6cfc1;
  --dm-color-outline-variant: #e8e4dc;
  --dm-color-inverse-surface: #2a241b;
  --dm-color-inverse-on-surface: #f4f1ea;

  /* ---- Colors: semantic ----------------------------------------------- */
  --dm-color-success: #2f8a4e;
  --dm-color-on-success: #ffffff;
  --dm-color-success-subtle: #eaf6ee;
  --dm-color-warning: #a9791a;
  --dm-color-on-warning: #ffffff;
  --dm-color-warning-subtle: #fdf3e2;
  --dm-color-error: #c0392b;
  --dm-color-on-error: #ffffff;
  --dm-color-error-subtle: #fbeceb;
  --dm-color-info: #2f6f9c;
  --dm-color-on-info: #ffffff;
  --dm-color-info-subtle: #eef3fb;

  /* ---- Focus ----------------------------------------------------------- */
  --dm-color-focus-ring: #bfa26e;

  /* ---- Typography ------------------------------------------------------
     Headlines (Display/H1–H3) -> Fraunces, moderates Gewicht ~550
     H4, Fließtext, Labels & Buttons -> Inter                              */
  --dm-type-display-xl: 550 4.5rem/1.05 var(--dm-font-display);
  --dm-type-display-lg: 550 3.25rem/1.08 var(--dm-font-display);
  --dm-type-h1: 550 2.5rem/1.12 var(--dm-font-display);
  --dm-type-h2: 550 1.875rem/1.18 var(--dm-font-display);
  --dm-type-h3: 560 1.375rem/1.3 var(--dm-font-display);
  --dm-type-h4: 600 1.0625rem/1.4 var(--dm-font-sans);
  --dm-type-body-lg: 400 1.125rem/1.65 var(--dm-font-sans);
  --dm-type-body-md: 400 1rem/1.6 var(--dm-font-sans);
  --dm-type-body-sm: 400 0.9375rem/1.55 var(--dm-font-sans);
  --dm-type-label-md: 600 0.9375rem/1.2 var(--dm-font-sans);
  --dm-type-label-sm: 700 0.75rem/1.2 var(--dm-font-sans);
  --dm-type-mono: 400 0.875rem/1.6 var(--dm-font-mono);

  --dm-tracking-display: -0.012em;
  --dm-tracking-heading: -0.008em;
  --dm-tracking-label: 0.01em;
  --dm-tracking-label-sm: 0.08em;

  /* ---- Spacing (8px grid) --------------------------------------------- */
  --dm-space-xs: 4px;
  --dm-space-sm: 8px;
  --dm-space-md: 16px;
  --dm-space-lg: 24px;
  --dm-space-xl: 32px;
  --dm-space-2xl: 48px;
  --dm-space-3xl: 64px;
  --dm-space-4xl: 96px;

  /* ---- Rounded --------------------------------------------------------- */
  --dm-rounded-xs: 4px;
  --dm-rounded-sm: 8px;
  --dm-rounded-md: 12px;
  --dm-rounded-lg: 18px;
  --dm-rounded-xl: 26px;
  --dm-rounded-full: 9999px;

  /* ---- Elevation (warm) ------------------------------------------------ */
  --dm-shadow-sm: 0 1px 2px rgba(31, 24, 17, 0.05), 0 2px 8px rgba(31, 24, 17, 0.05);
  --dm-shadow-md: 0 2px 8px rgba(31, 24, 17, 0.06), 0 12px 28px rgba(31, 24, 17, 0.10);
  --dm-shadow-lg: 0 6px 16px rgba(31, 24, 17, 0.10), 0 24px 56px rgba(31, 24, 17, 0.16);

  /* ---- Motion ---------------------------------------------------------- */
  --dm-duration-fast: 120ms;
  --dm-duration-base: 200ms;
  --dm-duration-slow: 320ms;
  --dm-duration-slower: 500ms;
  --dm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dm-ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --dm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Misc ------------------------------------------------------------ */
  --dm-backdrop: rgba(20, 17, 12, 0.5);
  --dm-control-height: 44px;
  --dm-input-height: 48px;
}