/**
 * Dark mode stylesheet for VisualAgentic Support.
 * Overrides Tailwind CDN utility classes when html.dark is present.
 *
 * NOTE: Written as plain CSS (no @apply) — @apply is a Tailwind build-time
 * directive that browsers ignore in a linked stylesheet. Each override uses
 * !important to beat the CDN-generated utilities.
 */

/* Background color utilities */
html.dark .bg-background { background-color: #0f1114 !important; }
html.dark .bg-surface { background-color: #14161a !important; }
html.dark .bg-surface-container-lowest { background-color: #0f1114 !important; }
html.dark .bg-surface-container-low { background-color: #14161a !important; }
html.dark .bg-surface-container { background-color: #1a1d22 !important; }
html.dark .bg-surface-container-high { background-color: #1f2228 !important; }
html.dark .bg-surface-container-highest { background-color: #262b33 !important; }
html.dark .bg-surface-dim { background-color: #0f1114 !important; }
html.dark .bg-surface-bright { background-color: #1a1d22 !important; }
html.dark .bg-error-container { background-color: #5d1b1f !important; }

/* Text color utilities */
html.dark .text-on-background { color: #e7e9ec !important; }
html.dark .text-on-surface { color: #e7e9ec !important; }
html.dark .text-on-surface-variant { color: #a8acb3 !important; }
html.dark .text-primary { color: #ffffff !important; }
html.dark .text-on-error-container { color: #ffb4ab !important; }

/* Border color utilities */
html.dark .border-outline-variant { border-color: #48484f !important; }

/* Secondary remains consistent (teal accent) - keep from light mode */
/* html.dark .bg-secondary and text-on-secondary remain unchanged for vibrant accent */