/* Anne Fiedler — Design Tokens
   Verbindliche Designreferenz für die Website (Quelle: anne-fiedler-design-system/).
   ==================================================================================
   ACHTUNG: Eine Teilmenge dieser Token-Namen wird vom Customizer zur Laufzeit
   überschrieben (inc/customizer.php gibt sie als <style id="af-customizer-vars">
   auf wp_head aus; assets/js/customize-preview.js spiegelt sie für die
   Live-Vorschau). Token-Namen hier, in customizer.php und in
   customize-preview.js IMMER im Gleichschritt ändern.
   ================================================================================== */

/* ---------- Lokale Montserrat Variable Font ---------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
}

:root {
  /* Primary palette */
  --color-navy:         #36557D;
  --color-pink:         #E50077;
  --color-white:        #FFFFFF;

  /* Secondary palette */
  --color-surface-cool: #EEF3F7;
  --color-surface-warm: #F6F4F1;
  --color-ink:          #222222;
  --color-green:        #6F8F5F;   /* NUR Klima/Nachhaltigkeit */

  /* UI helpers */
  --color-navy-dark:    #2F4666;
  --color-raised:       #E3E8F0;
  --color-muted:        #7A8799;
  --color-success:      #1A9E4A;
  --color-error:        #D63031;
  --color-warning:      #B87400;  /* Warnhinweise — bewusst gedeckt, kein Signalgelb */
  --color-info:         #36557D;  /* Neutrale Hinweise = Navy, kein eigener Blauton */
  --color-pink-dim:     rgba(229, 0, 119, 0.10);

  /* Flächen für Hinweisboxen — 8 % Tint der jeweiligen Signalfarbe
     (af-msg-Kontrakt aus dem Design-System: umlaufender 1,5px-Rand in der
     Signalfarbe auf diesem Tint; einseitige Akzentkanten gibt es nicht) */
  --tint-info:          rgba( 54, 85, 125, 0.08);
  --tint-success:       rgba( 26, 158,  74, 0.09);
  --tint-warning:       rgba(184, 116,   0, 0.10);
  --tint-error:         rgba(214,  48,  49, 0.08);

  /* Semantic aliases */
  --fg-1:        var(--color-ink);
  --fg-2:        var(--color-muted);
  --fg-on-dark:  var(--color-white);
  --bg-base:     var(--color-white);
  --bg-soft:     var(--color-surface-cool);
  --bg-warm:     var(--color-surface-warm);
  --bg-strong:   var(--color-navy);
  --accent:      var(--color-pink);
  --border:      var(--color-raised);

  /* Gradients — Magenta startet, Navy endet. IMMER. Variation entsteht über
     den Winkel (Spiegelung: θ → 360° − θ), niemals über Farbumkehrung. */
  --gradient-surface:        linear-gradient( 40deg, #E50077 0%, #36557D 100%);
  --gradient-surface-mirror: linear-gradient(320deg, #E50077 0%, #36557D 100%);
  --gradient-signet:         linear-gradient(135deg, #E50077 0%, #36557D 100%);
  --gradient-vert:           linear-gradient(180deg, #E50077 0%, #36557D 100%);
  /* -30% Startpunkt lt. Design-System (colors_and_type.css) — Magenta läuft
     „von oberhalb der Kachel" hinein, sichtbar bleibt vor allem der Übergang. */
  --tile-standard:           linear-gradient(180deg, #E50077 -30%, #36557D 75%);
  --tile-alt:                radial-gradient(circle at 100% 0%, rgba(229,0,119,0.55) 0%, rgba(229,0,119,0) 55%), #36557D;

  /* Typografie */
  --font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;

  /* Type Scale — feste Referenzwerte (Druck/Grafik) */
  --fs-h1:    48px;
  --fs-h2:    40px;
  --fs-h3:    32px;
  --fs-h4:    24px;
  --fs-h5:    20px;
  --fs-h6:    17px;
  --fs-body:  16px;
  --fs-small: 12px;
  --fs-label: 11px;

  /* Type Scale — fluid (Website; entspricht den clamp()-Werten der
     Design-Entwürfe im Claude-Design-Projekt) */
  --fs-display:  clamp(34px, 4.6vw, 52px);   /* Seiten-H1 */
  --fs-h1-fluid: clamp(28px, 3.4vw, 40px);   /* Hero-/Sektions-H1 */
  --fs-h2-fluid: clamp(26px, 3.2vw, 38px);
  --fs-h3-fluid: clamp(24px, 2.8vw, 32px);
  --fs-lead:     clamp(16px, 1.4vw, 18px);

  /* Lesespalte — eigene Stufen, weil die 680px auf 18px gerechnet sind
     (Inhaltsseite.dc.html). Auf --fs-body/16px wäre die Zeile zu kurz. */
  --fs-lese:      18px;
  --fs-lese-lead: 21px;
  --fs-lese-mini: 14px;                       /* Bildunterschriften */

  /* Font Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line Heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  /* Spacing (8px Basisraster) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-xxl: 64px;

  /* Layout (fluid, aus den Design-Entwürfen) */
  --seite-max:    1440px;                     /* Customizer: af_content_width */
  --gutter:       clamp(20px, 4vw, 56px);
  --abschnitt-y:  clamp(48px, 6vw, 80px);
  /* Inhaltsseiten-Raster — Vertrag aus dem Design-Projekt
     (Inhaltsseite.dc.html). Drei Breiten, keine Zwischenwerte:
     680 Lesespalte · 680+2×180 = 1040 Ausbruch · volle Breite randlos. */
  --lese:           680px;                    /* ≈ 68 Zeichen bei 18px Montserrat */
  --ausbruch-seite: 180px;                    /* Reserve je Seite für .breit */

  /* Radius */
  --radius-sm:    6px;
  --radius-md:    8px;                        /* Customizer: af_btn_radius */
  --radius-lg:    16px;
  --radius-pill:  999px;
  --radius-round: 50%;

  /* Logo */
  --logo-hoehe:   66px;                       /* Customizer: af_logo_height */

  /* Shadows — Navy-getönt, nie schwarz */
  --shadow-sm:   0 1px 2px rgba(54, 85, 125, 0.06), 0 1px 3px rgba(54, 85, 125, 0.08);
  --shadow-md:   0 4px 12px rgba(54, 85, 125, 0.10);
  --shadow-lg:   0 12px 32px rgba(54, 85, 125, 0.14);
  --shadow-pink: 0 4px 16px rgba(229, 0, 119, 0.18);
}