:root {
    /* ── Page Layout ──────────────────────────── */
    --page-bg:          #f8f9fa;
    --surface-bg:       #ffffff;
    --card-bg:          #ffffff;
    --card-bg-rgb:      255,255,255;

    /* ── Header & Footer ──────────────────────── */
    --header-bg:        #030303;
    --header-bg-rgb:    3,3,3;
    --footer-bg:        #050505;
    --header-text:      #ffffff;
    --header-icons:     #ffffff;
    --footer-text:      #ffffff;
    --footer-icons:     #ffffff;
    --glass-opacity:    0.85;

    /* ── Typography ───────────────────────────── */
    --text-main:        #070f17;
    --text-muted:       #175b7d;

    /* ── Brand Colors ─────────────────────────── */
    --accent:           #0f2e4d;
    --accent-rgb:       15,46,77;
    --price-color:      #f00000;

    /* ── Buttons ──────────────────────────────── */
    --btn-primary-bg:   #000000;
    --btn-primary-rgb:  0,0,0;
    --btn-primary-text: #ffffff;

    /* ── Borders & Radius ─────────────────────── */
    --border-color:     rgba(255,255,255,0.08);
    --radius-sm:        6px;
    --radius-md:        12px;
    --radius-lg:        20px;
    --radius-xl:        32px;

    /* ── Shadows ──────────────────────────────── */
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.25);
    --shadow-md:  0 8px 24px rgba(0,0,0,0.35);
    --shadow-lg:  0 16px 48px rgba(0,0,0,0.45);
    --shadow-accent: 0 4px 20px rgba(15,46,77, 0.35);

    /* ── Transitions ──────────────────────────── */
    --transition:  all 0.28s cubic-bezier(0.4,0,0.2,1);
    --transition-fast: all 0.15s ease;

    /* ── Z-Indexes ────────────────────────────── */
    --z-header: 1000;
    --z-sidebar: 1100;
    --z-modal: 1200;
    --z-toast: 1300;
}