/* ==========================================================================
   CodeWave — Theme Tokens + Light-Mode Bridge
   All colors live here. Never hardcode a color in a feature file.
   Use var(--cw-*) or the Tailwind classes with overrides below.
   ========================================================================== */

/* ---------- CSS custom properties ---------- */

:root {
    --cw-bg-canvas: #f4f6fb;
    --cw-bg-surface: #ffffff;
    --cw-bg-surface-muted: rgba(248, 250, 252, 0.95);
    --cw-bg-elevated: #ffffff;
    --cw-bg-overlay: rgba(15, 23, 42, 0.4);

    --cw-text-primary: #18181b;
    --cw-text-secondary: #3f3f46;
    --cw-text-tertiary: #52525b;
    --cw-text-muted: #71717a;
    --cw-text-faint: #a1a1aa;
    --cw-text-on-accent: #ffffff;

    --cw-border-subtle: #e4e4e7;
    --cw-border-default: #d4d4d8;
    --cw-border-strong: #a1a1aa;

    --cw-brand: #6366f1;
    --cw-brand-hover: #818cf8;
    --cw-brand-subtle: rgba(99, 102, 241, 0.12);
    --cw-brand-text: #4f46e5;
    --cw-brand-text-strong: #3730a3;

    --cw-success: #10b981;
    --cw-success-subtle: rgba(16, 185, 129, 0.1);
    --cw-success-text: #059669;
    --cw-success-text-strong: #065f46;

    --cw-warning: #f59e0b;
    --cw-warning-subtle: rgba(245, 158, 11, 0.1);
    --cw-warning-text: #d97706;
    --cw-warning-text-strong: #b45309;

    --cw-error: #f43f5e;
    --cw-error-subtle: rgba(244, 63, 94, 0.1);
    --cw-error-text: #e11d48;
    --cw-error-text-strong: #9f1239;

    --cw-info: #6366f1;
    --cw-info-subtle: rgba(99, 102, 241, 0.1);
    --cw-info-text: #4f46e5;
    --cw-info-text-strong: #3730a3;

    --cw-code-bg: #fafafa;
    --cw-code-line-active: rgba(99, 102, 241, 0.16);
    --cw-code-gutter: #a1a1aa;
    --cw-var-name: #4f46e5;
    --cw-var-value: #059669;
    --cw-var-empty: #a1a1aa;

    --cw-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --cw-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    --cw-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08);
    --cw-shadow-brand: 0 10px 30px rgba(99, 102, 241, 0.25);
}

html.dark {
    --cw-bg-canvas: #09090b;
    --cw-bg-surface: #18181b;
    --cw-bg-surface-muted: rgba(24, 24, 27, 0.6);
    --cw-bg-elevated: #18181b;
    --cw-bg-overlay: rgba(0, 0, 0, 0.6);

    --cw-text-primary: #fafafa;
    --cw-text-secondary: #e4e4e7;
    --cw-text-tertiary: #d4d4d8;
    --cw-text-muted: #a1a1aa;
    --cw-text-faint: #71717a;
    --cw-text-on-accent: #ffffff;

    --cw-border-subtle: #27272a;
    --cw-border-default: #3f3f46;
    --cw-border-strong: #52525b;

    --cw-brand: #6366f1;
    --cw-brand-hover: #818cf8;
    --cw-brand-subtle: rgba(99, 102, 241, 0.15);
    --cw-brand-text: #a5b4fc;
    --cw-brand-text-strong: #c7d2fe;

    --cw-success: #10b981;
    --cw-success-subtle: rgba(16, 185, 129, 0.12);
    --cw-success-text: #6ee7b7;
    --cw-success-text-strong: #a7f3d0;

    --cw-warning: #f59e0b;
    --cw-warning-subtle: rgba(245, 158, 11, 0.12);
    --cw-warning-text: #fcd34d;
    --cw-warning-text-strong: #fde68a;

    --cw-error: #f43f5e;
    --cw-error-subtle: rgba(244, 63, 94, 0.12);
    --cw-error-text: #fda4af;
    --cw-error-text-strong: #fecdd3;

    --cw-info: #6366f1;
    --cw-info-subtle: rgba(99, 102, 241, 0.15);
    --cw-info-text: #a5b4fc;
    --cw-info-text-strong: #c7d2fe;

    --cw-code-bg: #09090b;
    --cw-code-line-active: rgba(99, 102, 241, 0.16);
    --cw-code-gutter: #52525b;
    --cw-var-name: #a5b4fc;
    --cw-var-value: #6ee7b7;
    --cw-var-empty: #52525b;

    --cw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --cw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --cw-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5);
    --cw-shadow-brand: 0 10px 30px rgba(99, 102, 241, 0.35);
}

/* ---------- Base ---------- */

html {
    scroll-behavior: smooth;
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

body {
    background: var(--cw-bg-canvas);
    color: var(--cw-text-secondary);
}

/* ---------- Mesh background ---------- */

.cw-mesh {
    background:
        radial-gradient(900px 420px at 12% -10%, rgba(99, 102, 241, 0.12), transparent 55%),
        radial-gradient(700px 380px at 92% 8%, rgba(139, 92, 246, 0.1), transparent 50%),
        radial-gradient(600px 300px at 50% 100%, rgba(16, 185, 129, 0.05), transparent 55%);
}

html.dark .cw-mesh {
    background:
        radial-gradient(900px 420px at 12% -10%, rgba(99, 102, 241, 0.22), transparent 55%),
        radial-gradient(700px 380px at 92% 8%, rgba(139, 92, 246, 0.16), transparent 50%),
        radial-gradient(600px 300px at 50% 100%, rgba(16, 185, 129, 0.06), transparent 55%);
}

/* ---------- Code line highlight ---------- */

.cw-code-line-active {
    background: var(--cw-code-line-active);
    box-shadow: inset 3px 0 0 var(--cw-brand-hover);
}

/* ---------- Memory box animation ---------- */

.cw-memory-enter {
    animation: cw-rise 0.45s ease;
}

@keyframes cw-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Window dots ---------- */

.cw-window-dots span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    display: inline-block;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .cw-memory-enter {
        animation: none;
    }
}

/* ==========================================================================
   TEMPORARY LIGHT-MODE BRIDGE
   
   The old codebase uses Tailwind dark-first classes (bg-zinc-950, text-white,
   etc.). In light mode, these need to be inverted. Rather than refactor every
   component right now, we override the dark-first classes when the html
   element does NOT have .dark.
   
   This block will be DELETED in Phase 12 when components use CSS vars
   (var(--cw-*)) directly instead of Tailwind color classes.
   ========================================================================== */

/* ---------- Backgrounds ---------- */

html:not(.dark) .bg-zinc-950 {
    background-color: #ffffff !important;
}

html:not(.dark) .bg-zinc-950\/80 {
    background-color: rgba(255, 255, 255, 0.86) !important;
}

html:not(.dark) .bg-zinc-950\/60 {
    background-color: rgba(255, 255, 255, 0.78) !important;
}

html:not(.dark) .bg-zinc-900 {
    background-color: #ffffff !important;
}

html:not(.dark) .bg-zinc-900\/80 {
    background-color: rgba(248, 250, 252, 0.95) !important;
}

html:not(.dark) .bg-zinc-900\/60 {
    background-color: rgba(255, 255, 255, 0.94) !important;
}

html:not(.dark) .bg-zinc-900\/50 {
    background-color: #ffffff !important;
}

html:not(.dark) .bg-zinc-900\/40 {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

html:not(.dark) .bg-zinc-800 {
    background-color: #e4e4e7 !important;
}

html:not(.dark) .hover\:bg-zinc-800:hover {
    background-color: #f1f5f9 !important;
}

html:not(.dark) .hover\:bg-zinc-900:hover {
    background-color: #f1f5f9 !important;
}

html:not(.dark) .bg-black\/60 {
    background-color: rgba(15, 23, 42, 0.4) !important;
}

/* ---------- Text ---------- */

html:not(.dark) .text-white {
    color: #18181b !important;
}

html:not(.dark) .text-zinc-100 {
    color: #18181b !important;
}

html:not(.dark) .text-zinc-200 {
    color: #3f3f46 !important;
}

html:not(.dark) .text-zinc-300 {
    color: #3f3f46 !important;
}

html:not(.dark) .text-zinc-400 {
    color: #52525b !important;
}

html:not(.dark) .text-zinc-500 {
    color: #71717a !important;
}

html:not(.dark) .text-zinc-600 {
    color: #a1a1aa !important;
}

html:not(.dark) .text-zinc-700 {
    color: #a1a1aa !important;
}

html:not(.dark) .hover\:text-white:hover {
    color: #18181b !important;
}

html:not(.dark) .placeholder\:text-zinc-600::placeholder {
    color: #a1a1aa !important;
}

/* ---------- Borders ---------- */

html:not(.dark) .border-zinc-800,
html:not(.dark) .border-zinc-700 {
    border-color: #e4e4e7 !important;
}

html:not(.dark) .border-white\/5 {
    border-color: #e4e4e7 !important;
}

html:not(.dark) .hover\:border-zinc-500:hover {
    border-color: #a1a1aa !important;
}

html:not(.dark) .divide-zinc-800> :not([hidden])~ :not([hidden]) {
    border-color: #e4e4e7 !important;
}

/* ---------- Indigo (brand) ---------- */

html:not(.dark) .text-indigo-100 {
    color: #3730a3 !important;
}

html:not(.dark) .text-indigo-200 {
    color: #4338ca !important;
}

html:not(.dark) .text-indigo-300 {
    color: #4f46e5 !important;
}

html:not(.dark) .hover\:text-indigo-200:hover {
    color: #3730a3 !important;
}

html:not(.dark) .group:hover .group-hover\:text-indigo-200 {
    color: #3730a3 !important;
}

/* ---------- Emerald (success) ---------- */

html:not(.dark) .text-emerald-100,
html:not(.dark) .text-emerald-100\/80 {
    color: #065f46 !important;
}

html:not(.dark) .text-emerald-200,
html:not(.dark) .text-emerald-200\/80 {
    color: #047857 !important;
}

html:not(.dark) .text-emerald-300 {
    color: #059669 !important;
}

html:not(.dark) .text-emerald-400 {
    color: #059669 !important;
}

/* ---------- Amber (warning) ---------- */

html:not(.dark) .text-amber-200,
html:not(.dark) .text-amber-200\/70 {
    color: #b45309 !important;
}

html:not(.dark) .text-amber-300 {
    color: #d97706 !important;
}

/* ---------- Rose (error) ---------- */

html:not(.dark) .text-rose-100 {
    color: #9f1239 !important;
}

html:not(.dark) .text-rose-200 {
    color: #e11d48 !important;
}

html:not(.dark) .text-rose-300 {
    color: #e11d48 !important;
}

/* ---------- Buttons keep white text on colored bg ---------- */

html:not(.dark) .bg-indigo-500,
html:not(.dark) .bg-indigo-400,
html:not(.dark) .bg-indigo-500.text-white,
html:not(.dark) .bg-indigo-400.text-white,
html:not(.dark) .hover\:bg-indigo-400:hover,
html:not(.dark) .bg-gradient-to-br.text-white,
html:not(.dark) .focus\:bg-indigo-500:focus {
    color: #fff !important;
}

/* ---------- Card shadow in light mode ---------- */

html:not(.dark) .border-zinc-800 {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}