/**
 * myKaiserstuhl — Brand-Tokens als CSS-Custom-Properties
 *
 * Source of Truth: Bricks Theme Style "MyKaiserstuhl Main Designset" + Color-Palette.
 * Diese Datei wird global geladen — alle Custom-Pages konsumieren nur diese Variablen.
 *
 * Aufbau: Jedes Brand-Token ist ein Alias auf den echten Bricks-Slug mit Hex-Fallback.
 * Aenderst du in Bricks die Farbe (gleicher Slug, anderer Hex), wirkt das automatisch ueberall.
 *
 * Dokumentation siehe bricks-tokens.md.
 */

:root {
    /* ─── Farben ───
     * Konsumiert die im Bricks-Style-Manager benannten CSS-Variablen.
     * (Stand 2026-06-28 nach Color-Rename: Bricks emittiert --brand-gold etc.
     * statt --bricks-color-<random-id>.) Hex-Werte als Fallback. */
    --myk-gold:             var(--brand-gold,      #b69a4c);   /* Brand-Gold (matt) */
    --myk-gold-bright:      var(--gold-bright,    #f3c74b);   /* Hell-Gold (Hover-Akzent) */
    --myk-dark:             var(--brand-dark,      #191923);   /* Brand-Dunkel */
    --myk-light:            var(--brand-white,     #ffffff);   /* Weiss */
    --myk-text-muted:       var(--text-muted,      #75737c);   /* Body-Text-Grau */
    --myk-text-muted-alt:   var(--text-muted-alt,  #75737b);   /* Variante */
    --myk-soft-bg:          var(--soft-bg,         #f1f1f1);   /* Section-BG hellgrau */
    --myk-off-white:        var(--off-white,       #fafbfc);   /* Off-White */
    --myk-lavender-light:   var(--lavender-light,  #e6eaf6);
    --myk-blue-soft:        var(--blue-soft,      #b7c3f3);   /* Hellblau-Akzent */
    --myk-beige:            var(--beige,           #9d9688);

    /* ─── Abgeleitete semantische Aliase ─── */
    --myk-text:             var(--myk-dark);                       /* Default Headings/Text-Dark */
    --myk-text-on-dark:     var(--myk-light);
    --myk-border-soft:      rgba(25, 25, 35, 0.12);                /* aus .u-border */
    --myk-border-strong:    var(--myk-dark);

    /* ─── Typografie ─── */
    --myk-font-display:     "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --myk-font-body:        inherit;

    /* ─── Radius (aus Klassen-Bibliothek extrahiert) ─── */
    --myk-radius-pill:      100px;     /* .button, Pills */
    --myk-radius-card:      20px;      /* .u-border, Cards */
    --myk-radius-card-sm:   15px;      /* Mobile-Cards */
    --myk-radius-input:     12px;      /* Inputs/Suche */

    /* ─── Schatten (aus .u-shadow / .u-hover-shadow) ─── */
    --myk-shadow-soft:      0 8px 15px 5px rgba(25, 25, 35, 0.03);
    --myk-shadow-card:      0 18px 36px -22px rgba(0, 0, 0, 0.35);
    --myk-shadow-pop:       0 32px 80px -20px rgba(0, 0, 0, 0.45);

    /* ─── Transitions / Hover ─── */
    --myk-transition:       all .3s;
    --myk-hover-scale:      1.05;

    /* ─── Spacing-Skala ───
     * T-shirt-Skala aus dem Bricks-Variablenmanager. Mobile 16px-Basis
     * (Major Third 1.25), Desktop 20px-Basis (Perfect Fourth 1.333).
     * Werte fluid via clamp(). Hex-Fallback fuer nicht-Bricks-Kontexte. */
    --myk-space-2xs:        var(--space-2xs, clamp(0.51rem, 0.51rem + 0.0296vw, 0.53rem));
    --myk-space-xs:         var(--space-xs,  clamp(0.64rem, 0.64rem + 0.0889vw, 0.70rem));
    --myk-space-s:          var(--space-s,   clamp(0.80rem, 0.80rem + 0.2074vw, 0.94rem));
    --myk-space-m:          var(--space-m,   clamp(1.00rem, 1.00rem + 0.3704vw, 1.25rem));
    --myk-space-l:          var(--space-l,   clamp(1.25rem, 1.25rem + 0.6222vw, 1.67rem));
    --myk-space-xl:         var(--space-xl,  clamp(1.56rem, 1.56rem + 0.9778vw, 2.22rem));
    --myk-space-2xl:        var(--space-2xl, clamp(1.95rem, 1.95rem + 1.4963vw, 2.96rem));

    /* ─── Layout ─── */
    --myk-container-max:    1440px;
    --myk-container-pad:    var(--myk-space-m);
    --myk-section-pad-y:    var(--myk-space-2xl);
}

/* ─── Notice-Boxen (Erfolg / Info / Achtung / Brand) ───
 * Standard-Hinweisboxen. Weicher BG, abgerundete Ecken, keine farbige Linie
 * (kein KI-Look). Globale Klasse, weil in mehreren Pages benutzt
 * (E-Mail-Validierung, Styleguide, Self-Service-Resend, Hilfecenter etc.). */
.myk-notice {
    padding: 0.9rem 1.1rem;
    border-radius: var(--myk-radius-card-sm, 15px);
    font-size: 0.95rem;
    line-height: 1.55;
}
.myk-notice strong { font-weight: 700; }

.myk-notice--success { background: rgba(76, 175, 80, 0.10);  color: #2c5e2e; }
.myk-notice--info    { background: rgba(33, 150, 243, 0.10); color: #1d4d70; }
.myk-notice--warn    { background: rgba(244, 67, 54, 0.10);  color: #7a2620; }
/* Brand-Variante: Gold-getoent. Fuer Vorschlaege/Suggestions. */
.myk-notice--brand {
    background: color-mix(in srgb, var(--myk-gold) 16%, #fff);
    color: var(--myk-dark);
}

/* ─── Brand-Eyebrow (Kicker ueber H1/H2) ───
 * Standard fuer Sektions-/Page-Kicker. Matched den Look der Gutschein-V3-Seite.
 * Kein Pill, kein Hintergrund — nur Gold-Uppercase-Text. */
.myk-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--myk-gold);
    font-family: var(--myk-font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.2;
}