/* ==========================================================
   CSS CUSTOM PROPERTIES
   ========================================================== */
:root {
    /* Brand Palette */
    --sl-cream:       #F8F4EF;
    --sl-cream-deep:  #F0E8DE;
    --sl-sand:        #E6D9C8;
    --sl-sand-dark:   #D0BFA8;
    --sl-charcoal:    #1E1C1A;
    --sl-charcoal-soft: #2D2B28;
    --sl-sage:        #5C7A5E;
    --sl-sage-dark:   #486050;
    --sl-sage-light:  #8FA891;
    --sl-mist:        #ADA49B;
    --sl-soft-green:  #EBF2EC;
    --sl-terracotta:  #A86448;
    --sl-white:       #FFFFFF;
    --sl-text-muted:  #6B6257;
    --sl-text-light:  #9A9087;

    /* WhatsApp */
    --sl-whatsapp-bg-soft:       #EBF2EC;
    --sl-whatsapp-border-soft:   #C8DBC9;
    --sl-whatsapp-text-soft:     #3E6040;
    --sl-whatsapp-bg-strong:     #5C7A5E;
    --sl-whatsapp-border-strong: #5C7A5E;
    --sl-whatsapp-bg-hover:      #486050;

    /* Typography */
    --sl-font-display: 'Cormorant Garamond', Georgia, serif;
    --sl-font-body:    'Manrope', Arial, sans-serif;

    /* Radius */
    --sl-radius:      20px;
    --sl-radius-sm:   10px;
    --sl-radius-pill: 999px;

    /* Layout */
    --sl-max-width:   1300px;
    --sl-section-gap: 80px;
    --sl-card-gap:    22px;

    /* Shadows */
    --sl-shadow-soft:  0 2px 10px rgba(30,28,26,0.05);
    --sl-shadow-card:  0 10px 32px rgba(30,28,26,0.09);
    --sl-shadow-lift:  0 22px 56px rgba(30,28,26,0.13);
    --sl-shadow-float: 0 32px 80px rgba(30,28,26,0.15);
    --sl-reading-width: 760px;
}

/* ==========================================================
   PHASE 4 RESPONSIVE TOKENS
   ========================================================== */
@media (max-width: 1023px) {
    :root {
        --sl-section-gap: 64px;
    }
}

@media (max-width: 767px) {
    :root {
        --sl-section-gap: 52px;
        --sl-card-gap: 14px;
    }
}