:root {
    /* Roles (defaults) */
    --primary: 221 83% 53%;
    --primary-foreground: 210 40% 98%;
    --secondary: 262 83% 58%;
    --secondary-foreground: 210 40% 98%;
    --tertiary: 26 95% 55%;
    --tertiary-foreground: 26 100% 10%;
    --accent: 173 80% 40%;
    --accent-foreground: 168 75% 97%;
    --info: 199 89% 48%;
    --info-foreground: 210 40% 98%;
    --success: 142 71% 45%;
    --success-foreground: 144 60% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 26 83% 15%;
    --danger: 0 84% 60%;
    --danger-foreground: 0 0% 100%;
    --neutral: 215 16% 47%;
    --neutral-foreground: 210 40% 98%;
    --link: 221 83% 53%;
    --link-visited: 262 83% 58%;
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --muted: 220 14% 96%;
    --muted-foreground: 215 16% 46%;
        --border: 214 31% 91%;
        --input: 214 31% 91%;
        --ring: 221 83% 53%;
    --background-50: hsl(230.8 86.7% 97.1%);
        --background-100: hsl(231.7 87.9% 93.5%);
        --background-200: hsl(230 90.9% 87.1%);
        --background-300: hsl(230 90% 80.4%);
        --background-400: hsl(228.3 89.8% 73.1%);
        --background-500: hsl(225.5 89.9% 64.9%);
        --background-600: hsl(221 83.3% 53.1%);
        --background-700: hsl(221.2 75.7% 40.4%);
        --background-800: hsl(221.1 79.9% 27.3%);
        --background-900: hsl(221.1 88% 16.3%);
        --background-950: hsl(223.2 89.3% 11%);
}

/* ---------- Brand palettes (swap only role colors) ---------- */
/* ocean */
[data-color="ocean"] {
    --primary: 199 89% 48%;
    --primary-foreground: 210 40% 98%;
    --secondary: 172 66% 45%;
    --secondary-foreground: 168 75% 97%;
    --tertiary: 260 84% 60%;
    --tertiary-foreground: 260 100% 98%;
    --accent: 205 100% 36%;
    --accent-foreground: 210 40% 98%;
    --info: 199 95% 62%;
    --success: 145 65% 43%;
    --success-foreground: 144 60% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 26 83% 15%;
    --danger: 0 84% 60%;
    --danger-foreground: 0 0% 100%;
    --neutral: 215 16% 47%;
    --neutral-foreground: 210 40% 98%;
    --background-50: hsl(212.5 100% 95.3%);
        --background-100: hsl(210.7 100% 91.2%);
        --background-200: hsl(208.4 97.9% 81%);
        --background-300: hsl(203.5 98.9% 65.1%);
        --background-400: hsl(199 89.3% 47.8%);
        --background-500: hsl(199.2 91.1% 39.6%);
        --background-600: hsl(199.2 93.6% 30.8%);
        --background-700: hsl(199.5 95% 23.5%);
        --background-800: hsl(200.3 97.6% 16.1%);
        --background-900: hsl(202 96.1% 10%);
        --background-950: hsl(203.2 100% 6.1%);
}

/* forest */
[data-color="forest"] {
    --primary: 142 71% 35%;
    --primary-foreground: 144 60% 98%;
    --secondary: 84 64% 35%;
    --secondary-foreground: 60 30% 96%;
    --tertiary: 25 86% 50%;
    --tertiary-foreground: 26 100% 10%;
    --accent: 160 84% 39%;
    --accent-foreground: 150 80% 96%;
    --info: 199 89% 48%;
    --success: 142 71% 42%;
    --success-foreground: 144 60% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 26 83% 15%;
    --danger: 0 84% 60%;
    --danger-foreground: 0 0% 100%;
    --neutral: 215 16% 47%;
    --neutral-foreground: 210 40% 98%;
    --background-50: hsl(132.3 95.7% 91%);
        --background-100: hsl(135.4 98.4% 75.9%);
        --background-200: hsl(141.7 81% 54.5%);
        --background-300: hsl(141.7 68% 47.8%);
        --background-400: hsl(141.8 69.5% 41.2%);
        --background-500: hsl(141.7 70.9% 35.1%);
        --background-600: hsl(141.8 73.9% 27.1%);
        --background-700: hsl(142 78.2% 19.8%);
        --background-800: hsl(141.1 85.1% 13.1%);
        --background-900: hsl(136.4 89.2% 7.3%);
        --background-950: hsl(133 92% 4.9%);
}

/* sunset */
[data-color="sunset"] {
    --primary: 14 90% 57%;
    --primary-foreground: 24 100% 97%;
    --secondary: 340 82% 52%;
    --secondary-foreground: 0 0% 100%;
    --tertiary: 48 96% 53%;
    --tertiary-foreground: 26 100% 12%;
    --accent: 262 83% 58%;
    --accent-foreground: 210 40% 98%;
    --info: 199 89% 48%;
    --success: 142 71% 45%;
    --success-foreground: 144 60% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 26 83% 15%;
    --danger: 0 84% 60%;
    --danger-foreground: 0 0% 100%;
    --neutral: 215 16% 47%;
    --neutral-foreground: 210 40% 98%;
    --background-50: hsl(6.7 81.8% 95.7%);
        --background-100: hsl(6.5 86% 91.6%);
        --background-200: hsl(7.1 86.4% 82.7%);
        --background-300: hsl(8.9 88.9% 71.8%);
        --background-400: hsl(14 90% 57.1%);
        --background-500: hsl(13.9 68.9% 46.7%);
        --background-600: hsl(14 71.1% 36.7%);
        --background-700: hsl(14 73.8% 28.4%);
        --background-800: hsl(14.4 79.8% 19.4%);
        --background-900: hsl(12 86.2% 11.4%);
        --background-950: hsl(8.6 89.7% 7.6%);
}

/* grape */
[data-color="grape"] {
    --primary: 262 83% 58%;
    --primary-foreground: 210 40% 98%;
    --secondary: 292 84% 61%;
    --secondary-foreground: 210 40% 98%;
    --tertiary: 199 89% 48%;
    --tertiary-foreground: 210 40% 98%;
    --accent: 316 73% 52%;
    --accent-foreground: 0 0% 100%;
    --info: 199 89% 48%;
    --success: 150 70% 40%;
    --success-foreground: 150 40% 96%;
    --warning: 38 92% 50%;
    --warning-foreground: 26 83% 15%;
    --danger: 0 84% 60%;
    --danger-foreground: 0 0% 100%;
    --neutral: 215 16% 47%;
    --neutral-foreground: 210 40% 98%;
    --background-50: hsl(254.3 84% 95.1%);
        --background-100: hsl(253.2 83.7% 90.4%);
        --background-200: hsl(255 85.7% 80.8%);
        --background-300: hsl(257.1 84% 70.6%);
        --background-400: hsl(261.9 83.2% 58%);
        --background-500: hsl(263.9 71% 48.6%);
        --background-600: hsl(264.1 73.1% 39.4%);
        --background-700: hsl(263.9 74.7% 31%);
        --background-800: hsl(264.1 79.3% 22.7%);
        --background-900: hsl(263.2 86.1% 14.1%);
        --background-950: hsl(261.7 88.7% 10.4%);
}

/* slate (low-chroma) */
[data-color="slate"] {
    --primary: 215 20% 50%;
    --primary-foreground: 210 40% 98%;
    --secondary: 220 14% 34%;
    --secondary-foreground: 210 40% 98%;
    --tertiary: 220 10% 60%;
    --tertiary-foreground: 222 47% 10%;
    --accent: 215 16% 47%;
    --accent-foreground: 210 40% 98%;
    --info: 215 20% 65%;
    --success: 142 25% 45%;
    --success-foreground: 144 40% 96%;
    --warning: 38 60% 50%;
    --warning-foreground: 26 83% 15%;
    --danger: 0 70% 55%;
    --danger-foreground: 0 0% 100%;
    --neutral: 216 10% 40%;
    --neutral-foreground: 210 40% 98%;
    --background-50: hsl(220 29% 93.9%);
        --background-100: hsl(219 32.3% 87.8%);
        --background-200: hsl(218 33.3% 75.9%);
        --background-300: hsl(215.2 33% 62.5%);
        --background-400: hsl(215.3 20% 50%);
        --background-500: hsl(214.9 20.2% 41.8%);
        --background-600: hsl(215 21.4% 32.9%);
        --background-700: hsl(216.4 21.5% 25.5%);
        --background-800: hsl(217.1 23.6% 17.5%);
        --background-900: hsl(216 27.3% 10.8%);
        --background-950: hsl(218.2 35.5% 6.1%);
}

/* mint */
[data-color="mint"] {
    --primary: 158 64% 45%;
    --primary-foreground: 160 84% 98%;
    --secondary: 174 60% 40%;
    --secondary-foreground: 168 75% 97%;
    --tertiary: 192 84% 40%;
    --tertiary-foreground: 210 40% 98%;
    --accent: 173 80% 40%;
    --accent-foreground: 168 75% 97%;
    --info: 199 90% 50%;
    --success: 156 72% 36%;
    --success-foreground: 158 70% 96%;
    --warning: 38 92% 50%;
    --warning-foreground: 26 83% 15%;
    --danger: 2 83% 63%;
    --danger-foreground: 0 0% 100%;
    --neutral: 215 16% 47%;
    --neutral-foreground: 210 40% 98%;
    --background-50: hsl(149.4 95.9% 90.4%);
        --background-100: hsl(152.1 98.2% 77.6%);
        --background-200: hsl(158 83.6% 57.1%);
        --background-300: hsl(157.7 65.6% 51%);
        --background-400: hsl(158 64.2% 44.9%);
        --background-500: hsl(158 65.8% 36.7%);
        --background-600: hsl(158 68.1% 28.2%);
        --background-700: hsl(157.9 71.7% 20.8%);
        --background-800: hsl(158.6 80% 13.7%);
        --background-900: hsl(156.4 89.2% 7.3%);
        --background-950: hsl(152.7 91.7% 4.7%);
}

/* amber */
[data-color="amber"] {
    --primary: 38 94% 55%;
    --primary-foreground: 26 83% 12%;
    --secondary: 14 90% 57%;
    --secondary-foreground: 24 100% 97%;
    --tertiary: 26 100% 55%;
    --tertiary-foreground: 26 100% 12%;
    --accent: 199 89% 48%;
    --accent-foreground: 210 40% 98%;
    --info: 199 89% 48%;
    --success: 142 71% 45%;
    --success-foreground: 144 60% 98%;
    --warning: 38 94% 55%;
    --warning-foreground: 26 83% 15%;
    --danger: 0 84% 60%;
    --danger-foreground: 0 0% 100%;
    --neutral: 215 16% 47%;
    --neutral-foreground: 210 40% 98%;
    --background-50: hsl(26.7 100% 96.5%);
        --background-100: hsl(25.7 94.6% 92.7%);
        --background-200: hsl(28.1 97.5% 84.5%);
        --background-300: hsl(32.1 98.6% 72.2%);
        --background-400: hsl(38.1 93.9% 54.9%);
        --background-500: hsl(38.1 79% 44.9%);
        --background-600: hsl(37.9 80.9% 34.9%);
        --background-700: hsl(38 84.8% 25.9%);
        --background-800: hsl(37.2 90.8% 17.1%);
        --background-900: hsl(35.7 92.2% 10%);
        --background-950: hsl(33.1 93.5% 6.1%);
}

/* crimson */
[data-color="crimson"] {
    --primary: 350 85% 55%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 84% 60%;
    --secondary-foreground: 0 0% 100%;
    --tertiary: 17 88% 60%;
    --tertiary-foreground: 26 100% 12%;
    --accent: 262 83% 58%;
    --accent-foreground: 210 40% 98%;
    --info: 199 89% 48%;
    --success: 142 71% 45%;
    --success-foreground: 144 60% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 26 83% 15%;
    --danger: 0 84% 60%;
    --danger-foreground: 0 0% 100%;
    --neutral: 215 16% 47%;
    --neutral-foreground: 210 40% 98%;
    --background-50: hsl(357 83.3% 95.3%);
        --background-100: hsl(355.5 83.3% 90.6%);
        --background-200: hsl(355.7 85.6% 81%);
        --background-300: hsl(354.6 88.1% 70.4%);
        --background-400: hsl(350.2 85.2% 55.1%);
        --background-500: hsl(349.9 70.9% 45.9%);
        --background-600: hsl(350.2 72.2% 36.7%);
        --background-700: hsl(350.4 75.7% 27.5%);
        --background-800: hsl(350 81.3% 18.8%);
        --background-900: hsl(352.2 87.1% 12.2%);
        --background-950: hsl(354.9 89.7% 7.6%);
}

/* indigo */
[data-color="indigo"] {
    --primary: 231 89% 60%;
    --primary-foreground: 210 40% 98%;
    --secondary: 262 83% 58%;
    --secondary-foreground: 210 40% 98%;
    --tertiary: 173 80% 40%;
    --tertiary-foreground: 168 75% 97%;
    --accent: 199 89% 48%;
    --accent-foreground: 210 40% 98%;
    --info: 201 96% 48%;
    --success: 142 71% 45%;
    --success-foreground: 144 60% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 26 83% 15%;
    --danger: 0 84% 60%;
    --danger-foreground: 0 0% 100%;
    --neutral: 215 16% 47%;
    --neutral-foreground: 210 40% 98%;
    --background-50: hsl(234.5 91.7% 95.3%);
        --background-100: hsl(235.9 91.7% 90.6%);
        --background-200: hsl(235.7 89.2% 81.8%);
        --background-300: hsl(234.4 90.2% 72%);
        --background-400: hsl(231.1 89.2% 60%);
        --background-500: hsl(228.2 78.6% 50.6%);
        --background-600: hsl(228.1 78.6% 40.4%);
        --background-700: hsl(228.2 81.5% 31.8%);
        --background-800: hsl(228.5 86.1% 22.5%);
        --background-900: hsl(229.7 89.7% 15.3%);
        --background-950: hsl(231.6 92.6% 10.6%);
}

[data-color="neutral"] {
    --primary: 215 16% 47%;
    --primary-foreground: 210 40% 98%;
    --secondary: 220 14% 34%;
    --secondary-foreground: 210 40% 98%;
    --tertiary: 220 10% 60%;
    --tertiary-foreground: 222 47% 10%;
    --accent: 216 12% 52%;
    --accent-foreground: 210 40% 98%;
    --info: 201 96% 48%;
    --success: 142 71% 45%;
    --success-foreground: 144 60% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 26 83% 15%;
    --danger: 0 84% 60%;
    --danger-foreground: 0 0% 100%;
    --neutral: 215 16% 47%;
    --neutral-foreground: 210 40% 98%;
--background-50: hsl(217.5 25% 93.7%);
    --background-100: hsl(218.8 24.6% 86.5%);
    --background-200: hsl(215.7 27% 73.1%);
    --background-300: hsl(215 24% 60.8%);
    --background-400: hsl(214.7 15.8% 47.1%);
    --background-500: hsl(214.5 16.4% 39.4%);
    --background-600: hsl(214.6 16.7% 30.6%);
    --background-700: hsl(214.3 17.6% 23.3%);
    --background-800: hsl(216 18.1% 16.3%);
    --background-900: hsl(212.7 22.4% 9.6%);
    --background-950: hsl(217.5 26.7% 5.9%);
}

[data-color="gray"] {
    --primary: 220 9% 46%;
    --primary-foreground: 210 40% 98%;
    --secondary: 220 7% 38%;
    --secondary-foreground: 210 40% 98%;
    --tertiary: 220 10% 60%;
    --tertiary-foreground: 222 47% 10%;
    --accent: 220 12% 52%;
    --accent-foreground: 210 40% 98%;
    --info: 201 96% 48%;
    --success: 142 71% 45%;
    --success-foreground: 144 60% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 26 83% 15%;
    --danger: 0 84% 60%;
    --danger-foreground: 0 0% 100%;
    --neutral: 220 10% 40%;
    --neutral-foreground: 210 40% 98%;
--color-background-50: hsl(225 10.5% 92.5%);
    --color-background-100: hsl(220 12.7% 86.1%);
    --color-background-200: hsl(220 12.9% 72.5%);
    --color-background-300: hsl(219.2 12.6% 59.6%);
    --color-background-400: hsl(220 8.9% 46.1%);
    --color-background-500: hsl(218.8 8.7% 38.2%);
    --color-background-600: hsl(222.9 9% 30.6%);
    --color-background-700: hsl(220 10.2% 23.1%);
    --color-background-800: hsl(220 10.8% 16.3%);
    --color-background-900: hsl(220 12% 9.8%);
    --color-background-950: hsl(225 13.3% 5.9%);
}

/* =======================
   Dark surfaces baseline
   ======================= */
:root.dark {
    color-scheme: dark;
    --background: 222 14% 12%;
    --foreground: 210 40% 96%;
    --card: 222 12% 14%;
    --card-foreground: 210 40% 96%;
    --popover: 222 12% 14%;
    --popover-foreground: 210 40% 96%;
    --muted: 220 10% 18%;
    --muted-foreground: 215 20% 72%;
    --border: 220 12% 22%;
    --input: 220 12% 22%;
    --ring: 217 91% 60%;
}

/* =======================
   Dark platters (surface-only)
   ======================= */

/* gray */
:root.dark[data-color="ocean"] {
    --background: 201 20% 13%;
    --foreground: 210 40% 96%;
    --card: 201 18% 15%;
    --card-foreground: 210 40% 96%;
    --popover: 201 18% 15%;
    --popover-foreground: 210 40% 96%;
    --muted: 201 16% 20%;
    --muted-foreground: 200 20% 78%;
    --border: 201 16% 24%;
    --input: 201 16% 24%;
}

:root.dark[data-color="forest"] {
    --background: 150 16% 12%;
    --foreground: 160 30% 96%;
    --card: 150 14% 14%;
    --card-foreground: 160 30% 96%;
    --popover: 150 14% 14%;
    --popover-foreground: 160 30% 96%;
    --muted: 150 12% 19%;
    --muted-foreground: 150 16% 78%;
    --border: 150 12% 23%;
    --input: 150 12% 23%;
}

:root.dark[data-color="sunset"] {
    --background: 18 20% 12%;
    --foreground: 24 30% 96%;
    --card: 18 18% 14%;
    --card-foreground: 24 30% 96%;
    --popover: 18 18% 14%;
    --popover-foreground: 24 30% 96%;
    --muted: 18 16% 20%;
    --muted-foreground: 20 20% 80%;
    --border: 18 16% 24%;
    --input: 18 16% 24%;
}

:root.dark[data-color="grape"] {
    --background: 275 22% 13%;
    --foreground: 0 0% 98%;
    --card: 275 20% 15%;
    --card-foreground: 0 0% 98%;
    --popover: 275 20% 15%;
    --popover-foreground: 0 0% 98%;
    --muted: 275 18% 21%;
    --muted-foreground: 275 14% 78%;
    --border: 275 16% 25%;
    --input: 275 16% 25%;
}

:root.dark[data-color="slate"] {
    --background: 220 12% 12%;
    --foreground: 210 40% 96%;
    --card: 220 11% 14%;
    --card-foreground: 210 40% 96%;
    --popover: 220 11% 14%;
    --popover-foreground: 210 40% 96%;
    --muted: 220 8% 20%;
    --muted-foreground: 215 18% 74%;
    --border: 220 10% 24%;
    --input: 220 10% 24%;
}

:root.dark[data-color="indigo"] {
    --background: 238 22% 14%;
    --foreground: 210 40% 96%;
    --card: 238 20% 16%;
    --card-foreground: 210 40% 96%;
    --popover: 238 20% 16%;
    --popover-foreground: 210 40% 96%;
    --muted: 238 18% 22%;
    --muted-foreground: 220 25% 80%;
    --border: 238 18% 26%;
    --input: 238 18% 26%;
}

/* Aliases for the remaining brands */
:root.dark[data-color="mint"] {
    /* use forest surfaces */
    --background: 150 16% 12%;
    --foreground: 160 30% 96%;
    --card: 150 14% 14%;
    --card-foreground: 160 30% 96%;
    --popover: 150 14% 14%;
    --popover-foreground: 160 30% 96%;
    --muted: 150 12% 19%;
    --muted-foreground: 150 16% 78%;
    --border: 150 12% 23%;
    --input: 150 12% 23%;
}

:root.dark[data-color="amber"] {
    /* use sunset surfaces */
    --background: 18 20% 12%;
    --foreground: 24 30% 96%;
    --card: 18 18% 14%;
    --card-foreground: 24 30% 96%;
    --popover: 18 18% 14%;
    --popover-foreground: 24 30% 96%;
    --muted: 18 16% 20%;
    --muted-foreground: 20 20% 80%;
    --border: 18 16% 24%;
    --input: 18 16% 24%;
}

:root.dark[data-color="crimson"] {
    /* use gray baseline surfaces */
    --background: 222 14% 12%;
    --foreground: 210 40% 96%;
    --card: 222 12% 14%;
    --card-foreground: 210 40% 96%;
    --popover: 222 12% 14%;
    --popover-foreground: 210 40% 96%;
    --muted: 220 10% 18%;
    --muted-foreground: 215 20% 72%;
    --border: 220 12% 22%;
    --input: 220 12% 22%;
}

:root.dark[data-color="neutral"] {
    --background: 220 12% 12%;
    --foreground: 210 40% 96%;
    --card: 220 11% 14%;
    --card-foreground: 210 40% 96%;
    --popover: 220 11% 14%;
    --popover-foreground: 210 40% 96%;
    --muted: 220 8% 20%;
    --muted-foreground: 215 18% 74%;
    --border: 220 10% 24%;
    --input: 220 10% 24%;
}

:root.dark[data-color="gray"] {
    --background: 220 10% 12%;
    --foreground: 210 40% 96%;
    --card: 220 9% 14%;
    --card-foreground: 210 40% 96%;
    --popover: 220 9% 14%;
    --popover-foreground: 210 40% 96%;
    --muted: 220 8% 19%;
    --muted-foreground: 215 18% 74%;
    --border: 220 9% 23%;
    --input: 220 9% 23%;
}