/*
 * STREAKS look for Eventify: black accent instead of orange; in dark mode, black
 * background and white text like fidelite.groupestreaks.com. Overrides the theme
 * variables Eventify's interface is built on (loaded after its own stylesheet).
 */
:root {
    --color-brand-50: #f4f4f5;
    --color-brand-100: #e4e4e7;
    --color-brand-200: #d4d4d8;
    --color-brand-300: #a1a1aa;
    --color-brand-400: #27272a;
    --color-brand-500: #0b0b0c;
    --color-brand-600: #000000;
    --color-brand-700: #18181b;
    --color-brand-800: #09090b;
    --color-brand-900: #0b0b0c;
    --color-canvas: #fafafa;
    --color-surface: #ffffff;
    --color-rail: #0b0b0c;
    --color-rail-hover: #18181b;
    --color-ink: #0b0b0c;
    --color-muted: #71717a;
    --color-hairline: #e8e8eb;
    --shadow-glow: 0 0 0 1px rgb(0 0 0 / 0.12), 0 30px 60px -30px rgb(0 0 0 / 0.35);
    color-scheme: light;
}
.band-cream { background: var(--color-canvas) !important; }
.dot-pattern { background-image: radial-gradient(rgb(255 255 255 / 0.18) 1px, transparent 1px) !important; }
/* Black buttons on the dark panels (rail): white with black text instead. */
:is(.bg-rail, [class*='bg-rail'], [class*='bg-ink']) :is(.bg-brand-500, .bg-brand-600) { background-color: #ffffff !important; color: #0a0a0a !important; }
:is(.bg-rail, [class*='bg-rail'], [class*='bg-ink']) :is(.bg-brand-500, .bg-brand-600) :is(.text-white, svg) { color: #0a0a0a !important; }
:is(.bg-rail, [class*='bg-rail']) .hover\:bg-brand-400:hover { background-color: #e4e4e7 !important; }

@keyframes pulse-dot {
    0% { box-shadow: 0 0 0 0 rgb(161 161 170 / 0.55); }
    70% { box-shadow: 0 0 0 8px rgb(161 161 170 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(161 161 170 / 0); }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-brand-50: #18181b;
        --color-brand-100: #27272a;
        --color-brand-200: #3f3f46;
        --color-brand-300: #a1a1aa;
        --color-brand-400: #d4d4d8;
        --color-brand-500: #fafafa;
        --color-brand-600: #ffffff;
        --color-brand-700: #e4e4e7;
        --color-brand-800: #f4f4f5;
        --color-brand-900: #0a0a0a;
        --color-canvas: #000000;
        --color-surface: #0a0a0a;
        --color-rail: #0a0a0a;
        --color-rail-hover: #18181b;
        --color-ink: #fafafa;
        --color-muted: #a1a1aa;
        --color-hairline: #27272a;
        --shadow-card: 0 1px 2px rgb(0 0 0 / 0.5), 0 14px 34px -22px rgb(0 0 0 / 0.8);
        --shadow-float: 0 22px 50px -26px rgb(0 0 0 / 0.9);
        --shadow-glow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 30px 60px -30px rgb(0 0 0 / 0.9);
        color-scheme: dark;
    }
    html, body { background: #000 !important; color: #fafafa; }
    /* Primary buttons become white: their label turns black. */
    :is(.bg-brand-500, .bg-brand-600, .bg-brand-400).text-white,
    :is(.bg-brand-500, .bg-brand-600, .bg-brand-400) .text-white { color: #0a0a0a !important; }
    .bg-white { background-color: var(--color-surface) !important; }
    .text-slate-900, .text-slate-800, .text-gray-900 { color: #fafafa !important; }
    .text-slate-700, .text-slate-600, .text-slate-500, .text-gray-600, .text-gray-500 { color: #a1a1aa !important; }
    .border-slate-200, .border-gray-200, .border-slate-100 { border-color: #27272a !important; }
    .bg-slate-50, .bg-slate-100, .bg-gray-50, .bg-gray-100 { background-color: #18181b !important; }
    input, select, textarea { background-color: #0a0a0a; color: #fafafa; border-color: #27272a; }
    input::placeholder, textarea::placeholder { color: #71717a; }
    .workspace-main h1 { color: #fafafa; }
}