/* =========================================================
   SpeedLayer — Global design tokens & shared primitives
   Rule: only rules that are used by 2+ blocks live here.
   ========================================================= */

:root {
    /* Brand colors */
    --sl-gold:            #E2A037;
    --sl-gold-ui:         #E29D3C;
    --sl-gold-soft:       #C9A45C;
    --sl-green-cta:       #78BB53;
    --sl-green-light:     #8AC26C;
    --sl-green-muted:     #92B973;
    --sl-green-pale:      #A7CC8A;
    --sl-blue:            #7CB4E2;
    --sl-teal:            #4EA89D;
    --sl-olive:           #9DB477;
    --sl-coral:           #E76F51;

    /* Text / surfaces */
    --sl-text-dark:       #38312D;
    --sl-heading-brown:   #534844;
    --sl-cream:           #FEFAED;
    --sl-cream-btn-text:  #FAF3E8;
    --sl-green-tint:      #DBEFD6;
    --sl-sage-1:          #EEEFEA;
    --sl-sage-2:          #E7E9E0;
    --sl-sage-3:          #DCE0D1;

    /* Stone scale */
    --sl-stone-900:       #1C1917;
    --sl-stone-950:       #0C0A09;
    --sl-stone-800:       #292524;
    --sl-stone-200:       #E7E5E4;
    --sl-stone-400:       #A8A29E;
    --sl-stone-500:       #78716C;
    --sl-live-red:        #EF4444;

    /* Type */
    --sl-font:            'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sl-font-arabic:     'Cairo', 'Poppins', system-ui, sans-serif;
    --sl-body-size:       16px;

    /* Radii / layout */
    --sl-radius-pill:     90px;
    --sl-radius-card:     28px;
    --sl-radius-panel:    22px;

    /* Motion */
    --sl-ease:            cubic-bezier(.4, 0, .2, 1);
    --sl-dur:             .3s;
    --sl-shadow-soft:     0 30px 70px rgba(180, 210, 156, .26);
    --sl-shadow-lift:     0 30px 70px rgba(180, 210, 156, .45);
    --sl-shadow-cta:      0 16px 36px rgba(120, 187, 83, .35);
}

/* =========================================================
   Shared primitives — used by 2+ blocks
   ========================================================= */

/* Pill CTA button — used by button block + header block */
.sl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 35px;
    border-radius: var(--sl-radius-pill);
    border: none;
    font-family: var(--sl-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: capitalize;
    letter-spacing: .01em;
    text-decoration: none;
    background: var(--sl-green-cta);
    color: var(--sl-cream-btn-text);
    cursor: pointer;
    transition:
        background-color var(--sl-dur) var(--sl-ease),
        transform        var(--sl-dur) var(--sl-ease),
        box-shadow       var(--sl-dur) var(--sl-ease),
        border-color     var(--sl-dur) var(--sl-ease);
}

.sl-btn:hover,
.sl-btn:focus-visible {
    background: var(--sl-green-light);
    color: var(--sl-cream-btn-text);
    transform: translateY(-3px);
    box-shadow: var(--sl-shadow-cta);
}

.sl-btn:focus-visible {
    outline: 3px solid var(--sl-gold-soft);
    outline-offset: 3px;
}

/* Gold variant — used by header block, reusable elsewhere */
.sl-btn--gold {
    background: var(--sl-gold);
    color: #ffffff;
}
.sl-btn--gold:hover,
.sl-btn--gold:focus-visible {
    background: var(--sl-green-cta);
    color: var(--sl-cream-btn-text);
}

/* Glass variant — used by button block, reusable elsewhere */
.sl-btn--secondary {
    background: rgba(255, 255, 255, .8);
    color: var(--sl-text-dark);
    border: 1px solid var(--sl-stone-200);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.sl-btn--secondary:hover,
.sl-btn--secondary:focus-visible {
    background: #fff;
    color: var(--sl-text-dark);
    border-color: var(--sl-gold-soft);
    box-shadow: 0 12px 30px rgba(226, 160, 55, .18);
}
.sl-btn--secondary:focus-visible {
    outline-color: var(--sl-green-cta);
}

/* Small size modifier — used by header block, reusable elsewhere */
.sl-btn--sm {
    padding: 13px 26px;
    font-size: 15px;
    font-weight: 600;
}

/* Glass surface — used by header block (menu + burger) */
.sl-glass {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(231, 229, 228, .9);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

/* Universal focus ring — any block element that needs it */
.sl-focusable:focus-visible {
    outline: 3px solid var(--sl-gold);
    outline-offset: 3px;
}

/* =========================================================
   Universal rules — apply regardless of block
   ========================================================= */

/* RTL — Cairo font, no letter-spacing */
[dir="rtl"] .sl-btn,
[dir="rtl"] .sl-glass {
    font-family: var(--sl-font-arabic);
    letter-spacing: 0;
}

/* Reduced motion — kill transitions on shared primitives */
@media (prefers-reduced-motion: reduce) {
    .sl-btn,
    .sl-btn:hover,
    .sl-btn:focus-visible {
        transform: none !important;
        transition: none !important;
    }
}