/*
 * Exotic CDP - Theme Variables
 * ─────────────────────────────────────────────────────────────────────────────
 * All palette values live here. To retheme the entire UI, edit only this file.
 *
 * Colors are expressed as bare RGB channels (R G B) so that Tailwind's CDN
 * config can consume them with the `rgb(var(--name) / <alpha-value>)` pattern,
 * enabling opacity modifiers like `bg-surface/70` to work correctly.
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {
    /* ── Background / Surface scale ───────────────────────────────────────── */
    --color-base:         17  24  39;    /* gray-900  — page background       */
    --color-surface:      31  41  55;    /* gray-800  — cards & panels        */
    --color-raised:       55  65  81;    /* gray-700  — buttons, inputs       */
    --color-lifted:       75  85  99;    /* gray-600  — hover state on raised */

    /* ── Text scale ───────────────────────────────────────────────────────── */
    --color-body:        243 244 246;    /* gray-100  — primary body text     */
    --color-secondary:   229 231 235;    /* gray-200  — secondary / nav text  */
    --color-label:       209 213 219;    /* gray-300  — form labels           */
    --color-muted:       156 163 175;    /* gray-400  — hints & metadata      */
    --color-faint:       107 114 128;    /* gray-500  — very muted details    */

    /* ── Brand accent (sky-blue palette, matches "exotic" Tailwind alias) ── */
    --color-accent-50:   240 249 255;
    --color-accent-100:  224 242 254;
    --color-accent-200:  186 230 253;
    --color-accent-300:  125 211 252;
    --color-accent-400:   56 189 248;
    --color-accent-500:   14 165 233;    /* primary accent                    */
    --color-accent-600:    2 132 199;
    --color-accent-700:    3 105 161;
    --color-accent-800:    7  89 133;
    --color-accent-900:   12  74 110;
}

html[data-theme="light"] {
    /* ── Background / Surface scale ───────────────────────────────────────── */
    --color-base:        248 250 252;    /* slate-50  — page background      */
    --color-surface:     241 245 249;    /* slate-100 — cards & panels       */
    --color-raised:      226 232 240;    /* slate-200 — buttons, inputs      */
    --color-lifted:      203 213 225;    /* slate-300 — hover state          */

    /* ── Text scale ───────────────────────────────────────────────────────── */
    --color-body:         15  23  42;    /* slate-900 — primary body text    */
    --color-secondary:    30  41  59;    /* slate-800 — secondary / nav text */
    --color-label:        51  65  85;    /* slate-700 — form labels          */
    --color-muted:        71  85 105;    /* slate-600 — hints & metadata     */
    --color-faint:       100 116 139;    /* slate-500 — very muted details   */
}

/* Improve legacy neutral-surface contrast in light mode without touching
   intentional white text on strongly colored action buttons/badges. */
html[data-theme="light"] :is(h1, h2, h3, h4, h5, h6, p, span, div, label, td, th, li).text-white {
    color: rgb(var(--color-body)) !important;
}

html[data-theme="light"] :is(input, select, textarea).text-white,
html[data-theme="light"] :is(input, select, textarea).bg-raised,
html[data-theme="light"] :is(input, select, textarea).bg-base,
html[data-theme="light"] :is(input, select, textarea).bg-surface {
    color: rgb(var(--color-body)) !important;
    caret-color: rgb(var(--color-body));
}

html[data-theme="light"] :is(input, select, textarea)::placeholder {
    color: rgb(var(--color-muted));
}

html[data-theme="light"] .divide-gray-700 > :not([hidden]) ~ :not([hidden]),
html[data-theme="light"] .divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--color-raised)) !important;
}

/* Soft accent/badge contrast fixes for light mode. */
html[data-theme="light"] .text-red-200 { color: rgb(185 28 28) !important; }
html[data-theme="light"] .text-red-300 { color: rgb(153 27 27) !important; }
html[data-theme="light"] .text-amber-200 { color: rgb(146 64 14) !important; }
html[data-theme="light"] .text-amber-300 { color: rgb(180 83 9) !important; }
html[data-theme="light"] .text-green-300 { color: rgb(21 128 61) !important; }
html[data-theme="light"] .text-blue-300 { color: rgb(30 64 175) !important; }
html[data-theme="light"] .text-indigo-300 { color: rgb(67 56 202) !important; }
html[data-theme="light"] .text-exotic-300 { color: rgb(var(--color-accent-700)) !important; }
html[data-theme="light"] .text-lifted { color: rgb(var(--color-muted)) !important; }

html[data-theme="light"] .bg-red-500\/10 { background-color: rgb(239 68 68 / 0.16) !important; }
html[data-theme="light"] .bg-amber-500\/10 { background-color: rgb(245 158 11 / 0.2) !important; }
html[data-theme="light"] .bg-green-500\/10 { background-color: rgb(34 197 94 / 0.16) !important; }
html[data-theme="light"] .bg-blue-500\/10 { background-color: rgb(59 130 246 / 0.16) !important; }
html[data-theme="light"] .bg-blue-600\/20 { background-color: rgb(37 99 235 / 0.2) !important; }
html[data-theme="light"] .bg-indigo-600\/20 { background-color: rgb(79 70 229 / 0.2) !important; }

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: rgb(var(--color-surface)); }
::-webkit-scrollbar-thumb   { background: rgb(var(--color-lifted)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-muted)); }

/* ── Animations (shared across pages) ─────────────────────────────────────── */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pulse-dot {
    animation: pulseDot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}