/* Default light theme */
:root {
    --text-50: hsl(192, 38%, 95%);
    --text-100: hsl(193, 37%, 90%);
    --text-200: hsl(191, 37%, 80%);
    --text-300: hsl(192, 39%, 70%);
    --text-400: hsl(192, 38%, 60%);
    --text-500: hsl(192, 38%, 50%);
    --text-600: hsl(192, 38%, 40%);
    --text-700: hsl(192, 39%, 30%);
    --text-800: hsl(191, 37%, 20%);
    --text-900: hsl(193, 37%, 10%);
    --text-950: hsl(192, 38%, 5%);

    --background-50: hsl(192, 38%, 95%);
    --background-100: hsl(194, 41%, 90%);
    --background-200: hsl(195, 39%, 80%);
    --background-300: hsl(195, 40%, 70%);
    --background-400: hsl(195, 40%, 60%);
    --background-500: hsl(195, 40%, 50%);
    --background-600: hsl(195, 40%, 40%);
    --background-700: hsl(195, 40%, 30%);
    --background-800: hsl(195, 39%, 20%);
    --background-900: hsl(194, 41%, 10%);
    --background-950: hsl(198, 38%, 5%);

    --primary-50: hsl(200, 36%, 95%);
    --primary-100: hsl(194, 33%, 90%);
    --primary-200: hsl(197, 35%, 80%);
    --primary-300: hsl(196, 35%, 70%);
    --primary-400: hsl(196, 35%, 60%);
    --primary-500: hsl(196, 35%, 50%);
    --primary-600: hsl(196, 35%, 40%);
    --primary-700: hsl(196, 35%, 30%);
    --primary-800: hsl(197, 35%, 20%);
    --primary-900: hsl(194, 33%, 10%);
    --primary-950: hsl(193, 36%, 5%);

    --secondary-50: hsl(293, 36%, 95%);
    --secondary-100: hsl(296, 33%, 90%);
    --secondary-200: hsl(295, 35%, 80%);
    --secondary-300: hsl(297, 35%, 70%);
    --secondary-400: hsl(296, 35%, 60%);
    --secondary-500: hsl(296, 35%, 50%);
    --secondary-600: hsl(296, 35%, 40%);
    --secondary-700: hsl(297, 35%, 30%);
    --secondary-800: hsl(295, 35%, 20%);
    --secondary-900: hsl(296, 33%, 10%);
    --secondary-950: hsl(300, 36%, 5%);

    --accent-50: hsl(327, 36%, 95%);
    --accent-100: hsl(325, 33%, 90%);
    --accent-200: hsl(325, 35%, 80%);
    --accent-300: hsl(325, 35%, 70%);
    --accent-400: hsl(325, 35%, 60%);
    --accent-500: hsl(325, 35%, 50%);
    --accent-600: hsl(325, 35%, 40%);
    --accent-700: hsl(325, 35%, 30%);
    --accent-800: hsl(325, 35%, 20%);
    --accent-900: hsl(325, 33%, 10%);
    --accent-950: hsl(327, 36%, 5%);
}

/* Dark theme when system prefers dark */
@media (prefers-color-scheme: dark) {
    :root {
        --text-50: hsl(187, 36%, 5%);
        --text-100: hsl(189, 37%, 10%);
        --text-200: hsl(189, 37%, 20%);
        --text-300: hsl(191, 37%, 30%);
        --text-400: hsl(190, 37%, 40%);
        --text-500: hsl(190, 37%, 50%);
        --text-600: hsl(190, 37%, 60%);
        --text-700: hsl(191, 37%, 70%);
        --text-800: hsl(189, 37%, 80%);
        --text-900: hsl(189, 37%, 90%);
        --text-950: hsl(193, 36%, 95%);

        --background-50: hsl(198, 38%, 5%);
        --background-100: hsl(194, 41%, 10%);
        --background-200: hsl(195, 39%, 20%);
        --background-300: hsl(195, 40%, 30%);
        --background-400: hsl(195, 40%, 40%);
        --background-500: hsl(195, 40%, 50%);
        --background-600: hsl(195, 40%, 60%);
        --background-700: hsl(195, 40%, 70%);
        --background-800: hsl(195, 39%, 80%);
        --background-900: hsl(194, 41%, 90%);
        --background-950: hsl(192, 38%, 95%);

        --primary-50: hsl(193, 36%, 5%);
        --primary-100: hsl(194, 33%, 10%);
        --primary-200: hsl(197, 35%, 20%);
        --primary-300: hsl(196, 35%, 30%);
        --primary-400: hsl(196, 35%, 40%);
        --primary-500: hsl(196, 35%, 50%);
        --primary-600: hsl(196, 35%, 60%);
        --primary-700: hsl(196, 35%, 70%);
        --primary-800: hsl(197, 35%, 80%);
        --primary-900: hsl(194, 33%, 90%);
        --primary-950: hsl(200, 36%, 95%);

        --secondary-50: hsl(293, 36%, 5%);
        --secondary-100: hsl(296, 33%, 10%);
        --secondary-200: hsl(295, 35%, 20%);
        --secondary-300: hsl(295, 35%, 30%);
        --secondary-400: hsl(295, 35%, 40%);
        --secondary-500: hsl(295, 35%, 50%);
        --secondary-600: hsl(295, 35%, 60%);
        --secondary-700: hsl(295, 35%, 70%);
        --secondary-800: hsl(295, 35%, 80%);
        --secondary-900: hsl(296, 33%, 90%);
        --secondary-950: hsl(293, 36%, 95%);

        --accent-50: hsl(327, 36%, 5%);
        --accent-100: hsl(325, 33%, 10%);
        --accent-200: hsl(325, 35%, 20%);
        --accent-300: hsl(325, 35%, 30%);
        --accent-400: hsl(325, 35%, 40%);
        --accent-500: hsl(325, 35%, 50%);
        --accent-600: hsl(325, 35%, 60%);
        --accent-700: hsl(325, 35%, 70%);
        --accent-800: hsl(325, 35%, 80%);
        --accent-900: hsl(325, 33%, 90%);
        --accent-950: hsl(327, 36%, 95%);
    }
}

/* Force dark theme when checkbox is checked (overrides system preference) */
html:has(.theme-switch:checked) {
    --text-50: hsl(187, 36%, 5%);
    --text-100: hsl(189, 37%, 10%);
    --text-200: hsl(189, 37%, 20%);
    --text-300: hsl(191, 37%, 30%);
    --text-400: hsl(190, 37%, 40%);
    --text-500: hsl(190, 37%, 50%);
    --text-600: hsl(190, 37%, 60%);
    --text-700: hsl(191, 37%, 70%);
    --text-800: hsl(189, 37%, 80%);
    --text-900: hsl(189, 37%, 90%);
    --text-950: hsl(193, 36%, 95%);

    --background-50: hsl(198, 38%, 5%);
    --background-100: hsl(194, 41%, 10%);
    --background-200: hsl(195, 39%, 20%);
    --background-300: hsl(195, 40%, 30%);
    --background-400: hsl(195, 40%, 40%);
    --background-500: hsl(195, 40%, 50%);
    --background-600: hsl(195, 40%, 60%);
    --background-700: hsl(195, 40%, 70%);
    --background-800: hsl(195, 39%, 80%);
    --background-900: hsl(194, 41%, 90%);
    --background-950: hsl(192, 38%, 95%);

    --primary-50: hsl(193, 36%, 5%);
    --primary-100: hsl(194, 33%, 10%);
    --primary-200: hsl(197, 35%, 20%);
    --primary-300: hsl(196, 35%, 30%);
    --primary-400: hsl(196, 35%, 40%);
    --primary-500: hsl(196, 35%, 50%);
    --primary-600: hsl(196, 35%, 60%);
    --primary-700: hsl(196, 35%, 70%);
    --primary-800: hsl(197, 35%, 80%);
    --primary-900: hsl(194, 33%, 90%);
    --primary-950: hsl(200, 36%, 95%);

    --secondary-50: hsl(293, 36%, 5%);
    --secondary-100: hsl(296, 33%, 10%);
    --secondary-200: hsl(295, 35%, 20%);
    --secondary-300: hsl(295, 35%, 30%);
    --secondary-400: hsl(295, 35%, 40%);
    --secondary-500: hsl(295, 35%, 50%);
    --secondary-600: hsl(295, 35%, 60%);
    --secondary-700: hsl(295, 35%, 70%);
    --secondary-800: hsl(295, 35%, 80%);
    --secondary-900: hsl(296, 33%, 90%);
    --secondary-950: hsl(293, 36%, 95%);

    --accent-50: hsl(327, 36%, 5%);
    --accent-100: hsl(325, 33%, 10%);
    --accent-200: hsl(325, 35%, 20%);
    --accent-300: hsl(325, 35%, 30%);
    --accent-400: hsl(325, 35%, 40%);
    --accent-500: hsl(325, 35%, 50%);
    --accent-600: hsl(325, 35%, 60%);
    --accent-700: hsl(325, 35%, 70%);
    --accent-800: hsl(325, 35%, 80%);
    --accent-900: hsl(325, 33%, 90%);
    --accent-950: hsl(327, 36%, 95%);
}

/* Force light theme when checkbox is checked AND system prefers dark */
@media (prefers-color-scheme: dark) {
    html:has(.theme-switch:checked) {
        --text-50: hsl(192, 38%, 95%);
        --text-100: hsl(193, 37%, 90%);
        --text-200: hsl(191, 37%, 80%);
        --text-300: hsl(192, 39%, 70%);
        --text-400: hsl(192, 38%, 60%);
        --text-500: hsl(192, 38%, 50%);
        --text-600: hsl(192, 38%, 40%);
        --text-700: hsl(192, 39%, 30%);
        --text-800: hsl(191, 37%, 20%);
        --text-900: hsl(193, 37%, 10%);
        --text-950: hsl(192, 38%, 5%);

        --background-50: hsl(192, 38%, 95%);
        --background-100: hsl(194, 41%, 90%);
        --background-200: hsl(195, 39%, 80%);
        --background-300: hsl(195, 40%, 70%);
        --background-400: hsl(195, 40%, 60%);
        --background-500: hsl(195, 40%, 50%);
        --background-600: hsl(195, 40%, 40%);
        --background-700: hsl(195, 40%, 30%);
        --background-800: hsl(195, 39%, 20%);
        --background-900: hsl(194, 41%, 10%);
        --background-950: hsl(198, 38%, 5%);

        --primary-50: hsl(200, 36%, 95%);
        --primary-100: hsl(194, 33%, 90%);
        --primary-200: hsl(197, 35%, 80%);
        --primary-300: hsl(196, 35%, 70%);
        --primary-400: hsl(196, 35%, 60%);
        --primary-500: hsl(196, 35%, 50%);
        --primary-600: hsl(196, 35%, 40%);
        --primary-700: hsl(196, 35%, 30%);
        --primary-800: hsl(197, 35%, 20%);
        --primary-900: hsl(194, 33%, 10%);
        --primary-950: hsl(193, 36%, 5%);

        --secondary-50: hsl(293, 36%, 95%);
        --secondary-100: hsl(296, 33%, 90%);
        --secondary-200: hsl(295, 35%, 80%);
        --secondary-300: hsl(297, 35%, 70%);
        --secondary-400: hsl(296, 35%, 60%);
        --secondary-500: hsl(296, 35%, 50%);
        --secondary-600: hsl(296, 35%, 40%);
        --secondary-700: hsl(297, 35%, 30%);
        --secondary-800: hsl(295, 35%, 20%);
        --secondary-900: hsl(296, 33%, 10%);
        --secondary-950: hsl(300, 36%, 5%);

        --accent-50: hsl(327, 36%, 95%);
        --accent-100: hsl(325, 33%, 90%);
        --accent-200: hsl(325, 35%, 80%);
        --accent-300: hsl(325, 35%, 70%);
        --accent-400: hsl(325, 35%, 60%);
        --accent-500: hsl(325, 35%, 50%);
        --accent-600: hsl(325, 35%, 40%);
        --accent-700: hsl(325, 35%, 30%);
        --accent-800: hsl(325, 35%, 20%);
        --accent-900: hsl(325, 33%, 10%);
        --accent-950: hsl(327, 36%, 5%);
    }
}