:root {
    /* ---------- Core surfaces ---------- */
    --background: 0 0% 0%;
    /* True black for maximum contrast */
    --foreground: 0 0% 100%;
    /* Pure white text */

    --card: 240 6% 6%;
    /* Subtle zinc elevation */
    --card-foreground: var(--foreground);

    --popover: 240 8% 8%;
    /* Slightly elevated */
    --popover-foreground: var(--foreground);

    /* ---------- Brand / Primary ----------- */
    --primary: 240 6% 88%;
    /* 🔘 Bright silver - professional & vibrant */
    --primary-foreground: 240 12% 8%;
    /* Dark text on bright silver for readability */

    /* ---------- Subtle interactive states -- */
    --secondary: 240 5% 18%;
    /* Muted zinc for secondary actions */
    --secondary-foreground: 240 6% 88%;
    /* Silver text on dark zinc */

    --muted: 240 4% 12%;
    /* Background for disabled/inactive */
    --muted-foreground: 240 5% 64%;
    /* Mid-tone zinc for subtle text */

    --accent: 240 6% 22%;
    /* Hover states, selected items */
    --accent-foreground: var(--foreground);

    /* ---------- System colors ------------ */
    --destructive: 0 84% 60%;
    /* Warm red for errors */
    --destructive-foreground: 0 0% 100%;

    /* ---------- Borders & inputs --------- */
    --border: 240 6% 20%;
    /* Subtle but visible boundaries */
    --input: 240 5% 16%;
    /* Input backgrounds slightly recessed */
    --ring: var(--primary);
    /* Focus ring uses primary silver */

    /* ---------- Radius ------------------- */
    --radius: 0.5rem;
}

.light {
    --background: 0 0% 100%;
    /* Pure white */
    --foreground: 240 12% 8%;
    /* Very dark zinc */

    --card: 240 6% 98%;
    /* Barely tinted white */
    --card-foreground: var(--foreground);

    --popover: var(--background);
    --popover-foreground: var(--foreground);

    --primary: 240 8% 24%;
    /* Dark zinc primary for light mode */
    --primary-foreground: 0 0% 100%;
    /* White text on dark primary */

    --secondary: 240 5% 96%;
    /* Very light zinc */
    --secondary-foreground: 240 12% 8%;

    --muted: 240 5% 96%;
    /* Light muted backgrounds */
    --muted-foreground: 240 4% 46%;
    /* Medium zinc for muted text */

    --accent: 240 5% 94%;
    /* Subtle accent backgrounds */
    --accent-foreground: var(--foreground);

    --destructive: 0 84% 50%;
    /* Slightly darker red for light mode */
    --destructive-foreground: 0 0% 100%;

    --border: 240 6% 88%;
    /* Light zinc borders */
    --input: 240 6% 92%;
    /* Input field backgrounds */
    --ring: var(--primary);
}