/* AKGadgets — design tokens for the mobile-first storefront rebuild.
   Brand palette is white / black / purple, matching the AKGadgets logo mark.
   Loaded on every storefront page during the migration; the Admin area keeps its own tokens. */

:root {
    /* ---- Colour ---- */
    --color-bg: #F7F6FB;
    --color-surface: #FFFFFF;
    --color-surface-alt: #EDEBF4;
    --color-text: #0A0A0F;
    --color-text-muted: #66707D;
    --color-border: #E4E2EC;

    --color-navy: #0A0A0F;
    --color-navy-soft: #17151C;
    --color-accent: #6D28D9;
    --color-accent-dark: #4C1D95;
    --color-sale: #C026D3;
    --color-sale-dark: #A21CAF;
    --color-success: #1AA971;
    --color-danger: #E14B4B;

    --color-on-accent: #FFFFFF;
    --color-on-navy: #D9D3EA;

    /* ---- Radii ---- */
    --radius-sm: 12px;
    --radius-card: 20px;
    --radius-pill: 999px;

    /* ---- Spacing scale ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* ---- Typography ---- */
    --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ---- Layered z-index scale ---- */
    --z-content: 1;
    --z-sticky: 100;
    --z-toast: 200;
    --z-overlay: 300;
    --z-drawer: 400;

    /* ---- Layout metrics ---- */
    --topbar-height: 56px;
    --topbar-total-height: 108px; /* topbar-row + the search field row beneath it — used to stick a SubNav bar right under it */
    --bottomnav-height: 64px;
    --tap-target-min: 44px;

    /* ---- Frosted-glass buttons (with a solid @supports fallback where used) ---- */
    --glass-blur: 16px;
    --glass-bg: rgba(255, 255, 255, 0.14);
    --glass-border: rgba(255, 255, 255, 0.35);
}