/* ============================================================
   CSS Custom Properties
   Semantic tokens use plain color values so Tailwind CDN can
   reference them directly as var(--background) etc.
   primary / secondary stay fixed in tailwind.config so that
   opacity variants like bg-primary/10 keep working.
   ============================================================ */

:root {
    --background:          #ffffff;
    --foreground:          #0f172a;
    --card:                #ffffff;
    --card-foreground:     #0f172a;
    --popover:             #ffffff;
    --popover-foreground:  #0f172a;
    --secondary:           #f1f5f9;
    --secondary-foreground:#0f172a;
    --muted:               #f1f5f9;
    --muted-foreground:    #64748b;
    --accent:              #f1f5f9;
    --accent-foreground:   #0f172a;
    --border:              #e2e8f0;
    --input:               #e2e8f0;
}

.dark {
    --background:          #0b1120;
    --foreground:          #f1f5f9;
    --card:                #111827;
    --card-foreground:     #f1f5f9;
    --popover:             #111827;
    --popover-foreground:  #f1f5f9;
    --secondary:           #1e293b;
    --secondary-foreground:#f1f5f9;
    --muted:               #1e293b;
    --muted-foreground:    #94a3b8;
    --accent:              #1e293b;
    --accent-foreground:   #f1f5f9;
    --border:              #1e293b;
    --input:               #1e293b;
}

/* ============================================================
   Dark mode — override opacity/modifier variants that Tailwind
   CDN can't resolve from var() automatically
   ============================================================ */

/* Backgrounds */
.dark .bg-muted\/50  { background-color: rgba(30, 41, 59, 0.5) !important; }
.dark .bg-muted\/30  { background-color: rgba(30, 41, 59, 0.3) !important; }
.dark .bg-muted\/20  { background-color: rgba(30, 41, 59, 0.2) !important; }
.dark .bg-card\/80   { background-color: rgba(17, 24, 39, 0.8) !important; }
.dark .bg-background\/80 { background-color: rgba(11, 17, 32, 0.85) !important; }

/* Borders */
.dark .border-border\/60 { border-color: rgba(30, 41, 59, 0.6) !important; }

/* Hover states */
.dark .hover\:bg-muted:hover     { background-color: #1e293b !important; }
.dark .hover\:bg-accent:hover    { background-color: #1e293b !important; }
.dark .hover\:bg-secondary:hover { background-color: #1e293b !important; }

/* ============================================================
   Component-level dark overrides
   ============================================================ */

/* Nav */
.dark nav {
    background-color: rgba(11, 17, 32, 0.85) !important;
    border-color: #1e293b !important;
}

/* Footer */
.dark footer {
    background-color: #111827 !important;
    border-color: #1e293b !important;
}

/* Forms */
.dark input,
.dark textarea,
.dark select {
    background-color: #1e293b !important;
    border-color: #1e293b !important;
    color: #f1f5f9 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #94a3b8 !important;
}

/* Shadows */
.dark .shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.4); }
.dark .shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4); }
.dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.7); }

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--muted); }
::-webkit-scrollbar-thumb { background: var(--muted-foreground); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: hsl(262.1 83.3% 57.8%); }

/* ============================================================
   Smooth theme transitions
   ============================================================ */
body, nav, footer, main,
.bg-background, .bg-card, .bg-muted, .bg-secondary,
.text-foreground, .text-muted-foreground, .border-border {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}