/* Premium cinematic design tokens layer (easy rollback). */
:root {
    --font-heading: "Montserrat", "Inter", "Segoe UI", Arial, sans-serif;
    --font-body: "Inter", "Segoe UI", Arial, sans-serif;
    --brand-primary: #48a9f8;
    --brand-primary-dark: #176aa8;
    --brand-primary-soft: rgba(72, 169, 248, 0.16);
    --brand-text: #e7f0f8;
    --brand-text-muted: rgba(214, 228, 241, 0.78);
    --brand-text-soft: rgba(214, 228, 241, 0.58);
    --surface-card: rgba(10, 19, 29, 0.74);
    --surface-card-strong: rgba(8, 16, 25, 0.88);
    --surface-muted: rgba(255, 255, 255, 0.04);
    --surface-elevated: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
    --border-soft: rgba(196, 225, 247, 0.14);
    --border-strong: rgba(196, 225, 247, 0.22);
    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.24);
    --shadow-card: 0 22px 60px rgba(0, 0, 0, 0.28);
    --shadow-lift: 0 28px 80px rgba(0, 0, 0, 0.34);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.1);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
}

body {
    color: var(--brand-text);
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

.btn {
    border-radius: 999px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    border-color: transparent;
    box-shadow: 0 18px 42px rgba(47, 150, 226, 0.2);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #62b8fb, #12598d);
}

.card,
.account-card,
.checkout-section,
.order-summary,
.admin-section,
.stat-card {
    border-radius: var(--radius-md);
}