/**
 * Storefront palette: button tiers (--pri-*, --sec-* …), accents, borders, shadows.
 * Typography on the storefront follows Bootstrap theme vars (--bs-body-color, --bs-secondary-color, --bs-body-bg) set in storefront_head.php.
 * Structural overlays use --scrim. Checkout / focus uses --primary-color (overridden from admin theme).
 */
:root {
    /* Primary */
    --pri-bg: #111111;
    --pri-bg-hover: #1a1a1a;
    --pri-bg-active: #222222;
    --pri-text: #ffffff;
    --pri-text-hover: #f5f5f5;
    --pri-text-active: #e5e5e5;

    /* Secondary */
    --sec-bg: #f5f5f5;
    --sec-bg-hover: #ebebeb;
    --sec-bg-active: #dddddd;
    --sec-text: #111111;
    --sec-text-hover: #000000;
    --sec-text-active: #222222;

    /* Tertiary */
    --ter-bg: #e8e8e8;
    --ter-bg-hover: #dddddd;
    --ter-bg-active: #d1d1d1;
    --ter-text: #111111;
    --ter-text-hover: #000000;
    --ter-text-active: #222222;

    /* Quaternary */
    --qua-bg: #d6d6d6;
    --qua-bg-hover: #c9c9c9;
    --qua-bg-active: #bbbbbb;
    --qua-text: #111111;
    --qua-text-hover: #000000;
    --qua-text-active: #222222;

    /* Quinary */
    --qui-bg: #c2c2c2;
    --qui-bg-hover: #b5b5b5;
    --qui-bg-active: #a8a8a8;
    --qui-text: #111111;
    --qui-text-hover: #000000;
    --qui-text-active: #222222;

    /* Accent Colors */
    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;

    --accent-green: #22c55e;
    --accent-green-hover: #16a34a;

    --accent-red: #ef4444;
    --accent-red-hover: #dc2626;

    --accent-gold: #eab308;
    --accent-gold-hover: #ca8a04;

    /* Borders & Shadows */
    --border: #d4d4d4;
    --border-dark: #2a2a2a;

    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.1);
    /* Drawer / modal backdrop */
    --scrim: rgba(0, 0, 0, 0.55);

    /* Misc */
    --radius: 100px;
    --transition: 0.2s ease;

    /* Theme primary (checkout focus, links); storefront_head.php overrides from admin. */
    --primary-color: var(--accent-blue);
}