/* =============================================================
   VARIABLES.CSS — Design Tokens
   Katharina Langguth | Fast, aber nie ganz
   ============================================================= */

:root {

    /* ─── Farben ─────────────────────────────────────────── */
    --clr-teal-deep:   #1e3a3a;
    --clr-teal:        #2d5555;
    --clr-teal-light:  #4a8080;
    --clr-teal-muted:  #7aadad;
    --clr-cream:       #f5f0e8;
    --clr-cream-dark:  #e8e0d0;
    --clr-cream-light: #faf7f2;
    --clr-warm-white:  #fdfcfa;
    --clr-text-dark:   #1a2e2e;
    --clr-text-body:   #3a4a4a;
    --clr-text-muted:  #6a7a7a;
    --clr-gold:        #c4a265;
    --clr-gold-light:  #d4b87a;

    /* ─── Typografie ─────────────────────────────────────── */
    --ff-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --ff-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fw-light:   300;
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;

    --fs-xs:   0.68rem;
    --fs-sm:   0.82rem;
    --fs-base: 1rem;
    --fs-md:   1.05rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.6rem;
    --fs-2xl:  2rem;

    --lh-tight:  1.05;
    --lh-snug:   1.25;
    --lh-base:   1.7;
    --lh-loose:  1.85;
    --lh-prose:  2.1;

    /* ─── Abstände ───────────────────────────────────────── */
    --sp-1:  0.5rem;
    --sp-2:  1rem;
    --sp-3:  1.5rem;
    --sp-4:  2rem;
    --sp-5:  3rem;
    --sp-6:  4rem;
    --sp-7:  6rem;
    --sp-8:  8rem;
    --sp-9:  10rem;
    --sp-10: 12rem;

    /* ─── Layout ─────────────────────────────────────────── */
    --max-w-narrow:  680px;
    --max-w-base:    900px;
    --max-w-wide:    1100px;
    --container-px:  2rem;
    --nav-height:    72px;

    /* ─── Rahmen ─────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   16px;
    --radius-pill: 100px;

    /* ─── Schatten ───────────────────────────────────────── */
    --shadow-sm:   0 2px 12px rgba(0, 0, 0, 0.05);
    --shadow-md:   0 8px 30px rgba(0, 0, 0, 0.09);
    --shadow-lg:   0 25px 60px rgba(0, 0, 0, 0.12);
    --shadow-nav:  0 2px 24px rgba(0, 0, 0, 0.07);
    --shadow-book: -6px 12px 40px rgba(0, 0, 0, 0.16),
                    0  4px 12px rgba(0, 0, 0, 0.08);

    /* ─── Übergänge ──────────────────────────────────────── */
    --ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:  cubic-bezier(0, 0, 0.2, 1);
    --t-fast:    0.2s;
    --t-base:    0.35s;
    --t-slow:    0.7s;
    --t-reveal:  0.8s;
}