/* ==========================================================================
   Königswieser Design System — Colors & Type
   Source of truth for all KGD design work. Tokens lifted directly from
   koenigswieser-child/style.css (production WordPress theme).
   ========================================================================== */

@import url("../fonts/fonts.css");

:root {
    /* === BORDEAUX — Akzentfarbe (CI Kern, Logo-Guide designkitchen.at) === */
    --kw-bordeaux:        #97233F;  /* Primary accent — CTAs, headlines accents */
    --kw-bordeaux-dark:   #7A1C33;  /* Hover, dark sections, footer bg */
    --kw-bordeaux-light:  #B02A4A;  /* Used sparingly */

    /* === ERDIGE NEUTRALS (Sand) ===
       Nur Sand + Sand-Light. Olive/Army wurden komplett entfernt — Grün
       ist als Brand-Akzent in JEDER Form verboten (CI-Regel). */
    --kw-sand:            #C2A684;  /* Overline labels on dark, subtle dividers — Tan-Beige (OKLCH h 72°, Khaki vermieden) */
    --kw-sand-light:      #E2D2BB;  /* Pills, chips, lighter sand — warmes Hellbeige (h 77°) */

    /* === BACKGROUNDS ===
       Warm off-white / gedecktes Hellgrau, NIEMALS reines Weiß für Sektionen. */
    --kw-cream:           #F5F0EB;  /* Section bg, cards on dark */
    --kw-cream-dark:      #EDE5DC;  /* Hover row, alt zebra */
    --kw-bg-alt:          #FDFBF9;  /* Almost-white tint */
    --kw-white:           #FFFFFF;

    /* === TEXT ===
       Fast-schwarz, NIE reines #000. Headlines + Body verwenden BEIDE
       #1A1A1A (kein Near-Black, kein warmgrünbrauner Ton — bewusst
       neutralgrau). Olivbraun ist VERBOTEN für Text. */
    --kw-body-text:       #1A1A1A;  /* Headlines + Body — fast-schwarz */
    --kw-text-muted:      #3D3D3D;  /* Captions / sekundär — angehoben für 60+/Sonne (8.7:1 auf cream-dark, AAA) */
    --kw-text-light:      #585858;  /* Tertiär — neutral grau, AA+ (5.7:1 auf cream-dark) */
    --kw-border:          #E0D2BC;  /* Card-Border — h 79°, wärmer als alt (#DDD5C8) */

    /* === SEMANTIC ===
       KEIN Grün als Text/Hintergrund-Akzent (CI-Regel). --kw-success existiert
       für Schema/State-Indikatoren, sollte aber NICHT als Brand-Farbe gelesen
       werden. Bordeaux ist die einzige "Erfolgs"-Farbe im Marken-Sinn. */
    --kw-success:         #2D6A4F;  /* Form-state only — never decorative */
    --kw-warning:         #B8860B;  /* Form-state only */
    --kw-error:           #C4243B;  /* Form-state only */

    /* === GRADIENTS ===
       Hero-Overlay neutral schwarz (war früher Army — Produktfotos wirken
       jetzt natürlich). CTA/Dark-Gradient = Bordeaux-Verlauf. */
    --kw-overlay-hero:
        linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.15) 100%);
    --kw-gradient-cta:    linear-gradient(135deg, #97233F, #7A1C33);
    --kw-gradient-dark:   linear-gradient(135deg, #7A1C33, #5A1426);

    /* === SHADOWS ===
    /* === SHADOWS ===
       Neutral-schwarz (rgba 0,0,0). Opacity bewusst etwas stärker als im
       typischen Web-Default — Zielgruppe 60+ braucht klar lesbare Tiefe. */
    --kw-shadow-sm:       0 2px 8px  rgba(0,0,0,0.08);
    --kw-shadow-md:       0 8px 24px rgba(0,0,0,0.12);
    --kw-shadow-lg:       0 16px 48px rgba(0,0,0,0.18);
    --kw-shadow-hover:    0 22px 60px rgba(0,0,0,0.22);

    /* === Z-INDEX STACK ===
       Single source of truth for stacking layers. Use these tokens instead
       of magic numbers. Values leave room (10er-Schritte) for hotfixes.
       Stack (bottom → top):
         base content     :  auto / 1–10
         sticky header    : 1000 (.kw-header, hardcoded legacy)
         sticky-cta       :   60 → --kw-z-sticky
         drawer           :   65 → --kw-z-drawer
         modal            :   70 → --kw-z-modal
         toast            :   80 → --kw-z-toast
       (Higher legacy z-indexes wie 1500/1600 in tokens.css für Drawer/Backdrop
       bleiben bis zur vollständigen Migration bestehen.) */
    --kw-z-sticky:        60;
    --kw-z-drawer:        65;
    --kw-z-modal:         70;
    --kw-z-toast:         80;

    /* === RADIUS === */
    --kw-radius-sm:       8px;
    --kw-radius:          12px;
    --kw-radius-lg:       20px;

    /* === MOTION ===
       Eine einzige Easing-Funktion. Keine Bounces, keine Spring-Anims. */
    --kw-transition:      0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* === SPACING SCALE ===
       Skala für Zielgruppe 60+ (großzügiger Whitespace, klare Section-Trennung).
       Section-Padding ist responsive: lg mobile → xl tablet → 2xl desktop. */
    --kw-space-xs:        8px;
    --kw-space-sm:        16px;
    --kw-space-md:        32px;
    --kw-space-lg:        48px;   /* Section-Padding mobile */
    --kw-space-xl:        64px;   /* Section-Padding tablet (≥768px) */
    --kw-space-2xl:       96px;   /* Section-Padding desktop (≥1024px) */
    --kw-tap-min:         48px;   /* Min-Höhe Buttons/Nav/Tap-Targets (60+ > 44px iOS-Default) */

    /* === TYPE SCALE — Pixel values, not rem (legacy WordPress theme) === */
    --kw-text-xs:         12px;
    --kw-text-sm:         14px;
    --kw-text-base:       17px;   /* Body default */
    --kw-text-lg:         20px;
    --kw-text-xl:         28px;
    --kw-text-2xl:        36px;
    --kw-text-3xl:        48px;
    --kw-text-hero:       56px;

    /* === FONT FAMILIES ===
       Headlines = Josefin Sans (geometric sans, traditionsbewusst).
       Body / Akzent = PT Serif (warm, lesbar, "wie ein guter Handschlag"). */
    --kw-font-display:    "Josefin Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --kw-font-body:       "PT Serif", Georgia, serif;
}

/* === SEMANTIC TYPE PRESETS ===
   Use these classes/element styles instead of re-typing font-family + size
   on every component. */

html { scroll-behavior: smooth; }

body,
.kw-body {
    font-family: var(--kw-font-body);
    font-size: var(--kw-text-base);
    line-height: 1.7;
    color: var(--kw-body-text);
    background: var(--kw-bg-alt);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headlines — H1 (Hero) ist die EINZIGE Display-Stufe in ALL-CAPS, als
   gestalterisches Marken-Statement. H2/H3/H4 verwenden Mixed Case
   (Title/Sentence Case) — lange Komposita ("Längstrommelwinde",
   "Bündelgerät") verlieren in CAPS Lesbarkeit, besonders mobil bei 375 px. */
h1, h2, h3, h4, h5, h6,
.kw-display {
    font-family: var(--kw-font-display);
    color: var(--kw-body-text);
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 0.4em;
    letter-spacing: 0;
}

/* H1 / Hero — ALL-CAPS für kurze Marken-Statements
   ("Hausverstand", "Made in Austria"). Bei langen Produkt-Headlines
   stattdessen Mixed Case einsetzen — class .kw-h1--mixed nutzen. */
h1, .kw-h1 {
    font-size: var(--kw-text-hero);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.kw-h1--mixed { text-transform: none; letter-spacing: 0; }

/* H2-H4 — IMMER Mixed Case. Kein text-transform. */
h2, .kw-h2 { font-size: var(--kw-text-3xl); }                          /* desktop 48px */
h3, .kw-h3 { font-size: var(--kw-text-2xl); font-weight: 600; }        /* desktop 36px */
h4, .kw-h4 { font-size: var(--kw-text-xl);  font-weight: 600; }        /* desktop 28px */
h5, .kw-h5 { font-size: var(--kw-text-lg);  font-weight: 600; letter-spacing: 0.5px; }
h6, .kw-h6 { font-size: var(--kw-text-base); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

/* Mobile-Skalierung — Pflicht. Lange deutsche Komposita brauchen Headroom. */
@media (max-width: 600px) {
    h1, .kw-h1 { font-size: clamp(36px, 9vw, 40px); letter-spacing: 0.5px; }
    h2, .kw-h2 { font-size: clamp(28px, 7vw, 32px); }
    h3, .kw-h3 { font-size: clamp(22px, 5.5vw, 24px); }
    h4, .kw-h4 { font-size: clamp(18px, 4.5vw, 20px); }
}

p, .kw-p {
    font-family: var(--kw-font-body);
    font-size: var(--kw-text-base);
    line-height: 1.7;
    color: var(--kw-body-text);
    margin: 0 0 1em;
    text-wrap: pretty;
}

.kw-lead {
    font-family: var(--kw-font-body);
    font-size: var(--kw-text-lg);
    line-height: 1.6;
    color: var(--kw-body-text);
}

.kw-small {
    font-family: var(--kw-font-body);
    font-size: var(--kw-text-sm);
    color: var(--kw-text-muted);
}

/* Overline — uppercase mini-label, used on dark sections in --kw-sand */
.kw-overline {
    font-family: var(--kw-font-display);
    font-size: var(--kw-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--kw-bordeaux);
    margin: 0;
}

/* Quote / cite block — PT Serif italic */
blockquote, .kw-quote {
    font-family: var(--kw-font-body);
    font-style: italic;
    font-size: var(--kw-text-lg);
    line-height: 1.7;
    color: var(--kw-body-text);
    margin: 0;
    padding: 0;
    border: none;
}

cite, .kw-cite {
    font-family: var(--kw-font-body);
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    color: var(--kw-text-muted);
}

a {
    color: var(--kw-bordeaux);
    transition: color var(--kw-transition);
}
a:hover { color: var(--kw-bordeaux-dark); }

::selection {
    background: var(--kw-bordeaux);
    color: var(--kw-white);
}