/* Dark Theme - Applied when .dark class is present on html */
.dark {
    color-scheme: dark;

    /* Base Colors */
    --base-text: rgb(243 244 246);
    --base-text-secondary: rgb(156 163 175);
    --base-text-muted: rgb(107 114 128);
    --base-text-subtle: rgb(75 85 99);
    
    --base-bg: rgb(17 24 39);
    --base-bg-secondary: rgb(31 41 55);
    --base-bg-hover: rgb(55 65 81);
    
    --base-border: rgb(55 65 81);
    --base-border-secondary: rgb(75 85 99);
    --base-border-strong: rgb(107 114 128);

    /* Primary (Blue) - desaturated */
    --bg-primary: rgb(29 78 216);
    --bg-primary-hover: rgb(37 99 235);
    --bg-primary-light: rgb(30 58 138);
    --text-on-primary: rgb(243 244 246);
    --border-primary: rgb(29 78 216);
    --border-primary-hover: rgb(37 99 235);
    --border-primary-light: rgb(30 64 175);
    --text-primary: rgb(96 165 250);
    --text-primary-hover: rgb(147 197 253);

    /* Secondary (Gray) */
    --bg-secondary: rgb(75 85 99);
    --bg-secondary-hover: rgb(107 114 128);
    --text-on-secondary: rgb(243 244 246);
    --border-secondary: rgb(75 85 99);
    --border-secondary-hover: rgb(107 114 128);
    --text-secondary: rgb(156 163 175);
    --text-secondary-hover: rgb(209 213 219);

    /* Success (Green) - desaturated */
    --bg-success: rgb(21 128 61);
    --bg-success-hover: rgb(22 163 74);
    --bg-success-light: rgb(20 83 45);
    --text-on-success: rgb(243 244 246);
    --border-success: rgb(21 128 61);
    --border-success-hover: rgb(22 163 74);
    --border-success-light: rgb(22 101 52);
    --text-success: rgb(74 222 128);
    --text-success-hover: rgb(134 239 172);

    /* Danger (Red) - desaturated */
    --bg-danger: rgb(185 28 28);
    --bg-danger-hover: rgb(220 38 38);
    --bg-danger-light: rgb(127 29 29);
    --text-on-danger: rgb(243 244 246);
    --border-danger: rgb(185 28 28);
    --border-danger-hover: rgb(220 38 38);
    --text-danger: rgb(248 113 113);
    --text-danger-hover: rgb(252 165 165);

    /* Warning (Yellow) - desaturated */
    --bg-warning: rgb(161 98 7);
    --bg-warning-hover: rgb(202 138 4);
    --text-on-warning: rgb(243 244 246);
    --border-warning: rgb(161 98 7);
    --border-warning-hover: rgb(202 138 4);
    --text-warning: rgb(250 204 21);
    --text-warning-hover: rgb(253 224 71);

    /* Info (Teal) - for informational states */
    --bg-info: rgb(15 118 110);
    --bg-info-hover: rgb(13 148 136);
    --text-on-info: rgb(243 244 246);
    --border-info: rgb(15 118 110);
    --border-info-hover: rgb(13 148 136);
    --text-info: rgb(45 212 191);

    /* Orange - used for expenses/payments */
    --bg-orange: rgb(194 65 12);
    --bg-orange-light: rgb(124 45 18);
    --bg-orange-hover: rgb(234 88 12);
    --border-orange: rgb(194 65 12);
    --text-orange: rgb(251 146 60);

    /* Purple/Violet - used for practices */
    --bg-purple-light: rgb(88 28 135);
    --bg-violet-light: rgb(91 33 182);
    --border-purple: rgb(147 51 234);
    --border-violet: rgb(124 58 237);
    --border-violet-light: rgb(109 40 217);

    /* Form & Input States */
    --input-border: rgb(75 85 99);
    --input-border-focus: rgb(59 130 246);
    --input-border-error: rgb(239 68 68);
    --input-bg-error: rgb(127 29 29);
}