:root {
    --primary: #7c3aed;
    --primary-hover: #6d28d9;
    --primary-soft: color-mix(in srgb, #7c3aed 12%, transparent);
    --secondary: #22d3ee;
    --accent: #22d3ee;
    --dark: #0f172a;
    --light: #f8fafc;
    --text: #1e293b;
    --heading: #0f172a;

    /* Derived brand helpers — follow the settings above automatically */
    --dark-2: color-mix(in srgb, #0f172a 90%, #ffffff);
    --secondary-soft: color-mix(in srgb, #22d3ee 12%, transparent);
    --accent-soft: color-mix(in srgb, #22d3ee 12%, transparent);

    /* Surfaces & hairlines — flipped by the dark block below */
    --surface: #ffffff;
    --surface-2: color-mix(in srgb, #0f172a 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, #0f172a 8%, transparent);
    --shadow-lg: 0 12px 40px color-mix(in srgb, #0f172a 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: #8b5cf6;
    --primary-hover: #7c3aed;
    --primary-soft: color-mix(in srgb, #8b5cf6 22%, transparent);
    --secondary: #22d3ee;
    --accent: #22d3ee;
    --dark: #020617;
    --dark-2: color-mix(in srgb, #020617 82%, #ffffff);
    --light: #0f172a;
    --text: #e2e8f0;
    --heading: #FFFFFF;
    --secondary-soft: color-mix(in srgb, #22d3ee 22%, transparent);
    --accent-soft: color-mix(in srgb, #22d3ee 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, #FFFFFF 5%, #1E1E1E);
}