/**
 * Storefront Design Tokens.
 * Loaded globally — the design language for the entire storefront.
 */

:root {
    /* Palette */
    --jw-ivory:        #FAF7F2;
    --jw-ivory-2:      #F3EEE5;
    --jw-charcoal:     #1A1A1A;
    --jw-charcoal-70:  rgba(26,26,26,0.72);
    --jw-charcoal-50:  rgba(26,26,26,0.52);
    --jw-charcoal-30:  rgba(26,26,26,0.28);
    --jw-charcoal-20:  rgba(26,26,26,0.16);
    --jw-charcoal-10:  rgba(26,26,26,0.08);
    --jw-champagne:    #B8935A;
    --jw-champagne-d:  #9A7A47;
    --jw-champagne-l:  #D4B080;
    --jw-sage:         #8A9A85;
    --jw-danger:       #B4453B;
    --jw-success:      #4B7B4A;
    --jw-warning:      #B98A2E;

    /* Radii */
    --jw-radius-sm:    4px;
    --jw-radius:       6px;
    --jw-radius-lg:    10px;
    --jw-radius-pill:  999px;

    /* Shadows */
    --jw-shadow-xs:    0 1px 2px rgba(26,26,26,0.04);
    --jw-shadow-sm:    0 1px 3px rgba(26,26,26,0.06);
    --jw-shadow-md:    0 4px 20px rgba(26,26,26,0.07);
    --jw-shadow-lg:    0 20px 50px rgba(26,26,26,0.10);

    /* Motion */
    --jw-ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --jw-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);

    /* Typography */
    --jw-font-serif:   'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --jw-font-sans:    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    --jw-font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

    /* Rhythm */
    --jw-space-1:  4px;
    --jw-space-2:  8px;
    --jw-space-3:  12px;
    --jw-space-4:  16px;
    --jw-space-5:  20px;
    --jw-space-6:  24px;
    --jw-space-8:  32px;
    --jw-space-10: 40px;
    --jw-space-12: 48px;
    --jw-space-16: 64px;
    --jw-space-24: 96px;

    /* Layout */
    --jw-container: 1440px;
    --jw-container-narrow: 900px;
}

/* ---- Global button base (shared between admin + frontend) ---- */
.jw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--jw-space-2);
    padding: 14px 28px;
    font-family: var(--jw-font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--jw-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: transform 200ms var(--jw-ease), box-shadow 200ms var(--jw-ease),
                background 200ms var(--jw-ease), border-color 200ms var(--jw-ease),
                color 200ms var(--jw-ease);
}
.jw-btn--primary {
    background: var(--jw-charcoal);
    color: var(--jw-ivory);
    border-color: var(--jw-charcoal);
}
.jw-btn--primary:hover:not(:disabled) {
    background: #000;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--jw-shadow-md);
}
.jw-btn--secondary {
    background: transparent;
    color: var(--jw-charcoal);
    border-color: var(--jw-charcoal);
}
.jw-btn--secondary:hover:not(:disabled) {
    background: var(--jw-charcoal);
    color: var(--jw-ivory);
}
.jw-btn--ghost {
    background: transparent;
    color: var(--jw-charcoal-70);
    border-color: var(--jw-charcoal-20);
}
.jw-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Global section head ---- */
.jw-section-head { margin-bottom: var(--jw-space-8); }
.jw-eyebrow {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--jw-champagne);
    font-weight: 700;
    margin: 0 0 var(--jw-space-2);
}
.jw-section-title {
    font-family: var(--jw-font-serif);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--jw-charcoal);
    margin: 0;
}