:root {
    --primary: #0077B6;
    --primary-hover: #00BFFF;
    --primary-soft: color-mix(in srgb, #0077B6 12%, transparent);
    --secondary: #1BB148;
    --accent: #00BFFF;
    --dark: #003366;
    --light: #FFFFFF;
    --text: #333333;
    --heading: #003366;

    /* Derived brand helpers — follow the settings above automatically */
    --dark-2: color-mix(in srgb, #003366 90%, #ffffff);
    --secondary-soft: color-mix(in srgb, #1BB148 12%, transparent);
    --accent-soft: color-mix(in srgb, #00BFFF 12%, transparent);

    /* Surfaces & hairlines — flipped by the dark block below */
    --surface: #ffffff;
    --surface-2: color-mix(in srgb, #003366 4%, #ffffff);
    --border: color-mix(in srgb, #C0C0C0 60%, transparent); /* Silver Gray — borders, subtle dividers */
    color-scheme: light;

    --white: #ffffff;
    --gray: #94a3b8;
    --danger: #ef4444;
    --success: #10b981;
    --warning: #f59e0b;
    --info: #3b82f6;
    --shadow: 0 4px 20px color-mix(in srgb, #003366 8%, transparent);
    --shadow-lg: 0 12px 40px color-mix(in srgb, #003366 16%, transparent);
    --radius: 10px;
    --radius-lg: 18px;
    --transition: all 0.25s ease;

    --sidebar-bg: var(--dark);
    --sidebar-text: #cbd5e1;
}

/* ============================================================
   🌙 DARK THEME — storefront night mode
   Values come from Admin ▸ White Label & Settings ▸ Appearance
   ▸ Dark Theme. Visitors flip it with the 🌞/🌙 switch; the
   choice is kept in localStorage and applied before first paint.
   ============================================================ */
html[data-theme="dark"] {
    color-scheme: dark;
    --primary: #003366;
    --primary-hover: #00FFFF;
    --primary-soft: color-mix(in srgb, #003366 22%, transparent);
    --secondary: #145A32;
    --accent: #00FFFF;
    --dark: #121212;
    --dark-2: color-mix(in srgb, #121212 82%, #ffffff);
    --light: #121212;
    --text: #EAEAEA;
    --heading: #EAEAEA;
    --secondary-soft: color-mix(in srgb, #145A32 22%, transparent);
    --accent-soft: color-mix(in srgb, #00FFFF 22%, transparent);

    /* Polished Silver — muted text & icons on graphite */
    --gray: #B0B0B0;
    --border: color-mix(in srgb, #B0B0B0 32%, transparent);
    --surface: #1E1E1E;
    --surface-2: color-mix(in srgb, #EAEAEA 5%, #1E1E1E);
}