/* BuyMyStash design tokens — single source of truth for the storefront overhaul.
   Loaded BEFORE store.css so component CSS can reference these.
   See memory/project_buymystash_brand.md for brand decisions. */

:root {
    /* ── Spacing scale (4pt grid) ── */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;

    /* ── Type scale (Inter, responsive via clamp) ── */
    --t-display-size:   clamp(2.5rem, 5vw, 3.5rem);
    --t-display-line:   1.05;
    --t-display-track:  -0.03em;
    --t-display-weight: 800;

    --t-h1-size:        clamp(2rem, 4vw, 2.75rem);
    --t-h1-line:        1.1;
    --t-h1-track:       -0.025em;
    --t-h1-weight:      800;

    --t-h2-size:        clamp(1.5rem, 3vw, 2rem);
    --t-h2-line:        1.2;
    --t-h2-track:       -0.02em;
    --t-h2-weight:      700;

    --t-h3-size:        clamp(1.25rem, 2vw, 1.5rem);
    --t-h3-line:        1.3;
    --t-h3-track:       -0.015em;
    --t-h3-weight:      600;

    --t-body-lg-size:   1.125rem;
    --t-body-lg-line:   1.55;

    --t-body-size:      1rem;
    --t-body-line:      1.5;

    --t-small-size:     0.875rem;
    --t-small-line:     1.45;

    --t-caption-size:   0.75rem;
    --t-caption-line:   1.4;
    --t-caption-track:  0.02em;
    --t-caption-weight: 500;

    /* ── Border radii ── */
    --r-1: 4px;
    --r-2: 8px;
    --r-3: 12px;
    --r-4: 16px;
    --r-pill: 999px;

    /* ── Elevation (shadow scale) ── */
    --e-0: none;
    --e-1: 0 1px 2px rgba(0, 0, 0, 0.05);
    --e-2: 0 4px 12px rgba(0, 0, 0, 0.08);
    --e-3: 0 16px 40px rgba(0, 0, 0, 0.18);
    --e-4: 0 32px 80px rgba(0, 0, 0, 0.28);

    /* ── Motion ── */
    --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-slow: 350ms;

    /* ── Z-index scale ── */
    --z-nav:      100;
    --z-dropdown: 200;
    --z-drawer:   300;
    --z-toast:    400;
    --z-modal:    500;
    --z-lightbox: 600;

    /* ── Touch target minimum (Apple HIG) ── */
    --touch-min: 44px;

    /* ── Brand color scale (Option A — Deep Gold on Charcoal, locked 2026-05-27) ── */
    /* These are intentionally separate from --rf-accent so:
       1. Components can move to --brand-* gradually
       2. The brand palette is self-documenting per the design system
       store.css still owns --rf-accent and aliases it to brand-500/brand-700 below. */
    --brand-50:  #FEF3C7;
    --brand-100: #FDE68A;
    --brand-300: #FBBF24;
    --brand-500: #F59E0B;
    --brand-700: #B45309;
    --brand-900: #78350F;
}

/* Dark theme — brand-500 reads best on charcoal */
[data-theme="dark"] {
    --brand:          var(--brand-500);
    --brand-hover:    var(--brand-700);
    --brand-tint:     rgba(245, 158, 11, 0.16);
    --brand-on:       #FFFFFF;
}

/* Light theme — brand-700 reads best on warm cream */
[data-theme="light"] {
    --brand:          var(--brand-700);
    --brand-hover:    var(--brand-900);
    --brand-tint:     var(--brand-50);
    --brand-on:       #FFFFFF;
}

/* Focus ring — accessible, brand-tinted */
*:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-1);
}

/* Reduced motion — honor user preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}