/* =============================================================================
   Life Change Management — Design Tokens (CSS Custom Properties)
   Basis: Design-Sprache v1 (Petrol) · v1.3.0 · Stand: 2026-06-19
   Spiegelt docs/design-system/tokens.json 1:1.

   Quellen: docs/content/design-sprache-v1.md (kanonisch),
            docs/content/brand-voice-v2.md (Voice).
   Legacy-Teal-System (docs/design/design-system.md) ABGELÖST — keine Werte übernommen.

   Phase 1b: v1-Lücken per Entscheidung geschlossen (A–D) bzw. mit konservativen
   Defaults gefüllt (E). Defaults sind mit "DEFAULT (Review)" gekennzeichnet.
   Phase 2b: Sub-Headline = Montserrat 500, Atemzug = Lora italic 400;
   feinkörniges 4px-Spacing-Raster + Stack/Inline-Rollen ergänzt (DEFAULT Review).
   Konvention Größenbereiche: Token = unterer v1-Wert, Bereich als Kommentar.
   ============================================================================= */

:root {
  /* --- Farbe · Primitive (v1-Palette + 1b-Ableitungen) --------------------- */
  --color-sand:        #F2EDE4; /* Sand-Off-White */
  --color-sand-light:  #F8F4EC; /* Helleres Sand */
  --color-petrol:      #1E3A4F; /* Tiefes Blau-Petrol */
  --color-petrol-dark: #2E4654; /* Dunkles Petrol */
  --color-petrol-light:#94B8CD; /* Helleres Petrol */
  --color-petrol-pale: #C9D8E0; /* Helles Petrol/Sand */
  --color-orange:      #D26B2A; /* Gebranntes Orange */
  --color-orange-hover:#BD6026; /* Orange −10% (1b) */
  --color-orange-active:#A85622;/* Orange −20% (1b, DEFAULT Review) */
  --color-ink:         #1A1A2E; /* Überschrift auf hell */
  --color-gray-body:   #555555; /* Fließtext */
  --color-white:       #FFFFFF; /* Text auf dunkel */

  /* --- Farbe · Rollen ------------------------------------------------------ */
  --color-bg-default:          var(--color-sand);
  --color-bg-alt:              var(--color-sand-light);
  --color-bg-dark:             var(--color-petrol);
  --color-text-heading:        var(--color-ink);
  --color-text-subheading:     var(--color-petrol-dark);
  --color-text-body:           var(--color-gray-body);
  --color-text-on-dark-heading:var(--color-white);
  --color-text-on-dark-body:   var(--color-petrol-pale);
  --color-text-on-dark-muted:  var(--color-petrol-light);
  --color-accent-cta:          var(--color-orange);        /* Buttons/CTAs/Checkmarks — NIE als Flächen-BG */
  --color-accent-cta-hover:    var(--color-orange-hover);
  --color-accent-cta-active:   var(--color-orange-active); /* DEFAULT (Review) */
  --color-label-phase:         var(--color-petrol-light);
  --color-border-faint:        var(--color-petrol-pale);
  --color-link-inline:         var(--color-petrol);        /* 1b: Fließtext-Link, unterstrichen */
  --color-link-inline-hover:   var(--color-petrol-dark);   /* 1b: Orange NICHT für Links */

  /* --- Farbe · Status (DEFAULT Review — dezent, mit Petrol/Orange harmonierend) */
  --color-success: #4F7A6A;
  --color-warning: #D49A3A;
  --color-error:   #B4452F;
  --color-info:    #2E4654;

  /* --- Typografie · Familien (1b: Montserrat=Display, Lora=Body; Design-Pass: Fraunces=Headline) -- */
  --font-display: "Montserrat"; /* Labels/Buttons/Nav/Sub-Headline — Schnitte 500/600/700, self-hosted woff2 */
  --font-headline:"Fraunces";   /* Design-Pass: H1/H2 als High-Contrast-Display-Serif (variable opsz+wght, OFL, self-hosted). Labels bleiben --font-display. */
  --font-body:    "Lora";       /* Fließtext/Kleintext/Zitate — Schnitte 400/500/600 + 400 italic, self-hosted woff2 */
  /* Kein Google-Fonts-CDN. */

  /* --- Typografie · Gewichte ----------------------------------------------- */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* --- Typografie · Line-Height / Letter-Spacing (DEFAULT Review) ---------- */
  --line-height-body:    1.6;
  --line-height-heading: 1.25;
  --letter-spacing-heading-large: -0.02em; /* H1, Preis */
  --letter-spacing-heading:       -0.01em; /* H2, H3 */
  --letter-spacing-body:          0em;

  /* --- Typografie · Größen Desktop ----------------------------------------- */
  --fs-h1:           56px; /* Design-Pass: mutigere Hero-Scale (vorher 44px) */
  --fs-h2:           40px; /* Design-Pass: mutigere Scale (vorher 32px) */
  --fs-h3:           22px;
  --fs-subheadline:  20px; /* 2b: Montserrat 500 */
  --fs-atemzug:      20px; /* 2b: Lora italic 400 */
  --fs-phase-label:  11px; /* uppercase */
  --fs-body:         16px; /* v1: 16–17px — Bereich, unterer Wert gesetzt */
  --fs-small:        14px; /* v1: 14–15px — Bereich, unterer Wert gesetzt */
  --fs-quote:        16px; /* italic */
  --fs-price:        48px; /* v1: 48–52px — Bereich, unterer Wert gesetzt */

  /* --- Typografie · Größen Mobile ------------------------------------------ */
  --fs-h1-mobile:          36px; /* Design-Pass: mutiger (vorher 30px) */
  --fs-h2-mobile:          28px; /* Design-Pass: mutiger (vorher 24px) */
  --fs-h3-mobile:          19px;
  --fs-subheadline-mobile: 18px;
  --fs-atemzug-mobile:     18px;
  --fs-phase-label-mobile: 11px;
  --fs-body-mobile:        16px;
  --fs-small-mobile:       14px;
  --fs-quote-mobile:       16px;
  --fs-price-mobile:       40px;

  /* --- Spacing · Sektions-Paddings (v1 Whitespace-Tabelle) ----------------- */
  --space-hero-top:        140px;
  --space-hero-bottom:     120px;
  --space-atemzug:         80px;
  --space-section:         96px;
  --space-petrol-section:  112px;
  --space-cta-close:       120px;
  --space-inline-x:        40px;
  --space-inline-x-mobile: 24px;

  /* --- Spacing · Feinraster (2b, DEFAULT Review — 4px-Basis, Vielfache von 4) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Spacing · Semantische Rollen (2b, DEFAULT Review) ------------------- */
  --space-stack-xs:  8px;
  --space-stack-sm:  12px;
  --space-stack-md:  16px;
  --space-stack-lg:  24px;
  --space-stack-xl:  32px;
  --space-inline-xs: 4px;
  --space-inline-sm: 8px;
  --space-inline-md: 16px;
  --space-inline-lg: 24px;

  /* --- Layout -------------------------------------------------------------- */
  --content-max-width-min: 780px;  /* Content-Elemente: max-width 780–1060px */
  --content-max-width-max: 1060px;
  /* Breakpoints (DEFAULT Review) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* --- Radius (1b: sm/md/lg — kein Pill) ----------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;  /* Buttons */
  --radius-lg: 16px;  /* Cards: md–lg */

  /* --- Border (DEFAULT Review) --------------------------------------------- */
  --border-hairline: 1px;

  /* --- Schatten (DEFAULT Review — zurückhaltend) --------------------------- */
  --shadow-sm: 0 1px 2px rgba(30, 58, 79, 0.08);
  --shadow-md: 0 4px 12px rgba(30, 58, 79, 0.10);

  /* --- Fokus (DEFAULT Review — AA-sichtbar) -------------------------------- */
  --focus-outline-width: 2px;
  --focus-outline-style: solid;
  --focus-outline-color: var(--color-petrol);
  --focus-outline-offset: 2px;

  /* --- Komponente · Button/CTA (1b) --------------------------------------- */
  --button-bg:         var(--color-accent-cta);        /* ausschließlich #D26B2A; kein Teal; warm */
  --button-text-color: var(--color-white);
  --button-font:       var(--font-display);
  --button-font-weight:var(--font-weight-semibold);
  --button-font-size:  16px;                            /* Mindestgröße */
  --button-min-height: 44px;                            /* Touch-Target */
  --button-radius:     var(--radius-md);
  --button-hover:      var(--color-accent-cta-hover);
  --button-active:     var(--color-accent-cta-active);  /* DEFAULT (Review) */
  --button-disabled-opacity: 0.5;                       /* DEFAULT (Review) */
  --button-padding:    16px 32px;                       /* DEFAULT (Review) */
  /* Kanonisches CTA-Label (Voice/SSoT): "Klarheitsgespräch buchen". */

  /* GAP: Formularfeld-Styling (Inputs/Selects/Textareas) — weder v1 noch 1b */

  /* --- Motion (2c) — minimal, dezent, reduced-motion-geschützt ------------- */
  --motion-fast:            150ms;  /* Zustände: Hover/Fokus */
  --motion-base:            250ms;  /* UI-Übergänge */
  --motion-reveal:          600ms;  /* Scroll-Reveal */
  --motion-reveal-distance: 16px;
  --motion-breath:          10s;    /* Hero-Atmen (sehr dezent) */
  --ease-calm:  cubic-bezier(0.22, 1, 0.36, 1);  /* weiches ease-out, „setzt sich" */
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);    /* Zustands-Übergänge */

  /* --- Design-Pass (Schwellen-Signatur + Textur + Tiefe) ------------------- */
  /* Schwellen-Signatur „Türschwelle" an dunkel→hell-Übergängen */
  --color-threshold-line:   color-mix(in srgb, var(--color-petrol) 40%, transparent); /* Sims-Linie 1 */
  --color-threshold-line-2: color-mix(in srgb, var(--color-petrol) 22%, transparent); /* Sims-Linie 2 */
  --shadow-threshold:       color-mix(in srgb, var(--color-petrol) 20%, transparent); /* weicher Schatten auf den „Boden" */
  /* Textur · Sand-Grain (CSS-Noise, Opazität als Token) */
  --grain-opacity:      0.07;  /* helle Sektionen */
  --grain-opacity-dark: 0.05;  /* Petrol-Sektionen */
  /* Sand-Tiefe · Hauch Wärme auf hellen Sektionen (sehr dezent) */
  --sand-depth: color-mix(in srgb, var(--color-orange) 6%, transparent);
  /* Petrol-Tiefe · Glow + Vignette */
  --glow-petrol:     color-mix(in srgb, var(--color-orange) 12%, transparent); /* leiser warmer Glow */
  --vignette-petrol: color-mix(in srgb, var(--color-ink) 28%, transparent);    /* dunklere Ränder */
}