/* ═══════════════════════════════════════════════════════════════
   WL Buchshop — Design Tokens
   Zentrales Design-System fuer alle White-Label-Shops.
   Wird per Customizer-Overrides in functions.php ergaenzt.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Farbpalette — Edition Wort & Wert CI ────── */

    --wl-primary:       #9d0d21;   /* CI-Rot */
    --wl-primary-light: #b81026;
    --wl-primary-dark:  #7a0a19;

    --wl-secondary:     #9d0d21;   /* gleich Primär */
    --wl-secondary-light: #b81026;

    --wl-accent:        #9d0d21;
    --wl-accent-light:  #b8102626;
    --wl-accent-dark:   #7a0a19;

    --wl-text:          #1a1a1a;   /* fast schwarz */
    --wl-text-light:    #4a4a4a;
    --wl-text-muted:    #767676;

    --wl-bg:            #ffffff;   /* weißer Hintergrund */
    --wl-bg-warm:       #ffffff;
    --wl-bg-light:      #f8f8f8;
    --wl-bg-dark:       #f0f0f0;

    --wl-border:        #e0e0e0;
    --wl-border-light:  #ebebeb;

    --wl-success:       #2e7d32;
    --wl-error:         #9d0d21;
    --wl-warning:       #c17f00;

    /* ── Typografie — Figtree ─────────────────────── */

    --wl-font-heading:  'Figtree', 'Segoe UI', -apple-system, sans-serif;
    --wl-font-body:     'Figtree', 'Segoe UI', -apple-system, sans-serif;

    --wl-fs-xs:         0.75rem;
    --wl-fs-sm:         0.85rem;
    --wl-fs-base:       0.95rem;
    --wl-fs-md:         1.05rem;
    --wl-fs-lg:         1.25rem;
    --wl-fs-xl:         1.5rem;
    --wl-fs-2xl:        2rem;
    --wl-fs-3xl:        2.5rem;
    --wl-fs-4xl:        3.25rem;

    --wl-lh-tight:      1.2;
    --wl-lh-base:       1.6;
    --wl-lh-relaxed:    1.8;

    --wl-fw-normal:     400;
    --wl-fw-medium:     500;
    --wl-fw-semibold:   600;
    --wl-fw-bold:       700;

    --wl-ls-tight:      -0.02em;
    --wl-ls-normal:     0;
    --wl-ls-wide:       0.04em;
    --wl-ls-caps:       0.08em;

    /* ── Abstande (4px-Basis) ─────────────────────── */

    --wl-space-1:       0.25rem;
    --wl-space-2:       0.5rem;
    --wl-space-3:       0.75rem;
    --wl-space-4:       1rem;
    --wl-space-5:       1.25rem;
    --wl-space-6:       1.5rem;
    --wl-space-8:       2rem;
    --wl-space-10:      2.5rem;
    --wl-space-12:      3rem;
    --wl-space-16:      4rem;
    --wl-space-20:      5rem;
    --wl-space-24:      6rem;

    /* ── Radii ────────────────────────────────────── */

    --wl-radius-sm:     6px;
    --wl-radius:        12px;
    --wl-radius-lg:     16px;
    --wl-radius-xl:     24px;
    --wl-radius-full:   9999px;

    /* ── Schatten ──────────────────────────────────── */

    --wl-shadow-sm:     0 1px 3px rgba(26, 58, 58, 0.04);
    --wl-shadow:        0 4px 12px rgba(26, 58, 58, 0.06);
    --wl-shadow-md:     0 8px 24px rgba(26, 58, 58, 0.08);
    --wl-shadow-lg:     0 16px 40px rgba(26, 58, 58, 0.10);
    --wl-shadow-cover:  0 6px 24px rgba(0, 0, 0, 0.12);

    /* ── Uebergaenge ──────────────────────────────── */

    --wl-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --wl-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --wl-duration-fast: 150ms;
    --wl-duration:      250ms;
    --wl-duration-slow: 400ms;

    /* ── Layout ───────────────────────────────────── */

    --wl-max-width:     1400px;
    --wl-max-width-narrow: 800px;
    --wl-header-height: 96px;
    --wl-nav-height:    56px;
}