[data-theme="dark"] {
    /* Backgrounds */
    --bg-canvas: var(--slate-950);
    --bg-surface: var(--slate-900);
    --bg-surface-hover: var(--slate-800);
    --bg-primary-subtle: rgba(37, 99, 235, 0.2);
    --bg-success-subtle: rgba(34, 197, 94, 0.15);
    --bg-warning-subtle: rgba(245, 158, 11, 0.15);
    --bg-danger-subtle: rgba(239, 68, 68, 0.15);
    --bg-danger-hover: rgba(239, 68, 68, 0.25);

    /* Text */
    --text-main: var(--slate-100);
    --text-muted: var(--slate-400);
    --text-inverse: var(--slate-900);
    --text-primary: var(--blue-400);
    --text-success: var(--green-400);
    --text-warning: var(--amber-400);
    --text-danger: var(--red-400);

    /* Borders */
    --border-subtle: var(--slate-800);
    --border-default: var(--slate-700);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.3);

    /* Legacy Aliases */
    --tertiary-color: var(--slate-700);
    --heavy-color: var(--blue-300);
    --blacktext-color: var(--slate-50);

    /* Charts */
    --chart-grid-color: rgba(255, 255, 255, 0.1);
    --chart-tick-color: var(--slate-400);
    --chart-tooltip-bg: var(--slate-900);
    --chart-tooltip-text: var(--slate-50);
    --chart-tooltip-border: var(--slate-800);
    --chart-band-red: rgba(239, 68, 68, 0.2);
    --chart-band-yellow: rgba(234, 179, 8, 0.2);
    --chart-band-green: rgba(34, 197, 94, 0.2);
}

/* Icon Inversion */
[data-theme="dark"] img.icon,
[data-theme="dark"] svg.icon,
[data-theme="dark"] nav section a:not(#active) img,
[data-theme="dark"] .btn-edit-patient img,
[data-theme="dark"] .btn-icon-small img,
[data-theme="dark"] .patient-avatar img,
[data-theme="dark"] .iziToast-icon,
[data-theme="dark"] .doctor-avatar,
[data-theme="dark"] .icon-box svg,
[data-theme="dark"] .doc-link svg {
    filter: invert(1) hue-rotate(180deg) brightness(1.2);
    background: transparent;
}

/* Medical Alert Icon */
[data-theme="dark"] .medical-alert-icon {
    stroke: var(--slate-400);
}

*,
*::before,
*::after {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.1s ease,
        box-shadow 0.2s ease;
}