/* ============================================================
   kosten-preise-ratgeber.de — Canonical Design Tokens
   Fresh line (INIT_080 Phase 2). Era B = Calm-Advisor
   (DOMAIN_NATIVE_CALM, editorial-warm). Single owned namespace.

   Generated from src/tokens/tokens.json — do not hand-edit;
   edit the JSON then regenerate. Replaces the live drift:
   - /mmb-shell/design-system.css :root --accent #2563eb (blue, v4.0)
   - the split /css/design-system.css --ds-* namespace
   Accent = AD-INIT080-P1-ACCENT-A (#a8782d, reversible).
   ============================================================ */

:root {
  /* ---- color: neutrals ---- */
  --ds-bg:             #fafaf8;
  --ds-surface:        #ffffff;
  --ds-surface-hover:  #f5f5f3;
  --ds-border:         #e5e5e0;
  --ds-border-subtle:  #eeeeea;
  --ds-text:           #1a1a2e;
  --ds-text-secondary: #5c5c70;
  --ds-text-tertiary:  #8c8c9e;

  /* ---- color: accent (warm-desaturated amber, Option A) ---- */
  --ds-accent:         #a8782d;
  --ds-accent-hover:   #8a6321;
  --ds-accent-dark:    #856016;
  --ds-accent-light:   #f6eeda;
  --ds-accent-mid:     #ddc18c;
  --ds-accent-tint:    rgba(168,120,45,.06);

  /* ---- color: semantic (cost context) ---- */
  --ds-success:        #5c8a47;
  --ds-success-light:  #e8f0e2;
  --ds-warn:           #c08a2e;
  --ds-warn-light:     #f7eed8;
  --ds-danger:         #a04a4a;
  --ds-danger-light:   #f3e3e3;

  /* ---- color: footer ---- */
  --ds-footer-bg:      #1a1a2e;
  --ds-footer-text:    #b0b0c0;

  /* ---- color: dataviz scales (color-blind-safe, Wong 2011 mod) ---- */
  --ds-viz-cat-1: #1a4d6b; --ds-viz-cat-2: #a8782d; --ds-viz-cat-3: #5c8a47;
  --ds-viz-cat-4: #a04a4a; --ds-viz-cat-5: #6b5b8a; --ds-viz-cat-6: #3d3d3d;

  /* ---- typography: families ---- */
  --ds-font-display: "Playfair Display", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --ds-font-body:    Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- typography: type scale (size / line-height) ---- */
  --ds-fs-display: clamp(2.5rem, 5vw, 4rem);
  --ds-fs-h1:      clamp(2rem, 3.5vw, 2.75rem);
  --ds-fs-h2:      clamp(1.5rem, 2.5vw, 1.875rem);
  --ds-fs-h3:      1.25rem;
  --ds-fs-h4:      1.0625rem;
  --ds-fs-body:    1.0625rem;   /* 17px — premium reading comfort */
  --ds-fs-lead:    1.25rem;
  --ds-fs-small:   0.875rem;
  --ds-fs-xsmall:  0.8125rem;
  --ds-fs-byline:  0.9375rem;
  --ds-lh-tight:   1.15;
  --ds-lh-heading: 1.25;
  --ds-lh-body:    1.7;

  /* ---- spacing scale ---- */
  --ds-space-xs:  4px;
  --ds-space-sm:  8px;
  --ds-space-md:  16px;
  --ds-space-lg:  24px;
  --ds-space-xl:  32px;
  --ds-space-2xl: 48px;
  --ds-space-3xl: 64px;
  --ds-space-4xl: 96px;
  --ds-space-5xl: 128px;
  --ds-section-y:        96px;
  --ds-section-y-mobile: 64px;

  /* ---- layout ---- */
  --ds-container-max:    1200px;
  --ds-reading-max:      720px;
  --ds-container-pad:    24px;
  --ds-container-pad-mobile: 16px;

  /* ---- radius ---- */
  --ds-radius-sm:   6px;
  --ds-radius-md:   10px;
  --ds-radius-lg:   16px;
  --ds-radius-xl:   24px;
  --ds-radius-pill: 999px;

  /* ---- shadow ---- */
  --ds-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --ds-shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --ds-shadow-lg: 0 8px 24px rgba(0,0,0,.10);
  --ds-shadow-card: 0 1px 0 rgba(0,0,0,.04), 0 12px 24px -8px rgba(0,0,0,.06);

  /* ---- motion ---- */
  --ds-motion:      200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ds-motion-calm: 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ds-motion: 0ms; --ds-motion-calm: 0ms; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}