/* =============================================================
   DokPath — Light / Dark theme system
   Toggle via html[data-theme="light|dark"]
   ============================================================= */

:root,
html[data-theme="light"] {
    color-scheme: light;
    --dp-bg: #ffffff;
    --dp-bg-alt: #f8fafc;
    --dp-bg-muted: #f1f5f9;
    --dp-bg-card: #ffffff;
    --dp-bg-elevated: #ffffff;
    --dp-text: #0f172a;
    --dp-text-secondary: #334155;
    --dp-text-muted: #64748b;
    --dp-border: #e2e8f0;
    --dp-border-strong: #cbd5e1;
    --dp-header-bg: rgba(255, 255, 255, 0.95);
    --dp-header-border: #e2e8f0;
    --dp-header-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    --dp-footer-bg: #f8fafc;
    --dp-footer-text: #475569;
    --dp-accent: #1d4ed8;
    --dp-accent-hover: #1e40af;
    --dp-accent-soft: #eff6ff;
    --dp-accent-border: #bfdbfe;
    --dp-accent-text: #1d4ed8;
    --dp-logo-filter: brightness(0);
    --dp-logo-opacity: 0.88;
    --dp-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    --dp-card-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.08);
    --dp-glow: 0 20px 50px -12px rgba(15, 23, 42, 0.12);
    --dp-hero-gradient: none;
    --dp-prob-num: rgba(15, 23, 42, 0.04);
    --dp-mobile-menu-bg: #ffffff;
    --dp-dropdown-bg: #ffffff;
    --dp-dropdown-hover: #f8fafc;
    --dp-dropdown-text: #334155;
    --dp-toggle-bg: #f1f5f9;
    --dp-toggle-border: #e2e8f0;
    --dp-toggle-text: #475569;
    --dp-cta-section: #f8fafc;
    --dp-table-hover: #f8fafc;
    --dp-code-bg: #f1f5f9;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --dp-bg: #020617;
    --dp-bg-alt: #080d1a;
    --dp-bg-muted: #0a0f1e;
    --dp-bg-card: #0c1220;
    --dp-bg-elevated: #0f172a;
    --dp-text: #f8fafc;
    --dp-text-secondary: #cbd5e1;
    --dp-text-muted: #94a3b8;
    --dp-border: #1e293b;
    --dp-border-strong: #334155;
    --dp-header-bg: rgba(10, 15, 30, 0.92);
    --dp-header-border: #1e293b;
    --dp-header-shadow: none;
    --dp-footer-bg: #000000;
    --dp-footer-text: #94a3b8;
    --dp-accent: #3b82f6;
    --dp-accent-hover: #60a5fa;
    --dp-accent-soft: rgba(59, 130, 246, 0.1);
    --dp-accent-border: rgba(59, 130, 246, 0.2);
    --dp-accent-text: #60a5fa;
    --dp-logo-filter: none;
    --dp-logo-opacity: 1;
    --dp-card-shadow: none;
    --dp-card-shadow-hover: 0 0 30px -8px rgba(37, 99, 235, 0.25);
    --dp-glow: 0 0 60px -10px rgba(37, 99, 235, 0.4);
    --dp-hero-gradient: radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.12), transparent 50%);
    --dp-prob-num: rgba(255, 255, 255, 0.04);
    --dp-mobile-menu-bg: #0a0f1e;
    --dp-dropdown-bg: #0f172a;
    --dp-dropdown-hover: rgba(59, 130, 246, 0.15);
    --dp-dropdown-text: #cbd5e1;
    --dp-toggle-bg: rgba(255, 255, 255, 0.06);
    --dp-toggle-border: #334155;
    --dp-toggle-text: #94a3b8;
    --dp-cta-section: linear-gradient(180deg, #080d1a 0%, #020617 100%);
    --dp-table-hover: rgba(15, 23, 42, 0.4);
    --dp-code-bg: #060a14;
}

/* Base */
body {
    background-color: var(--dp-bg) !important;
    color: var(--dp-text) !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

header {
    background-color: var(--dp-header-bg) !important;
    border-color: var(--dp-header-border) !important;
    box-shadow: var(--dp-header-shadow);
}

footer {
    background-color: var(--dp-footer-bg) !important;
    color: var(--dp-footer-text) !important;
    border-color: var(--dp-border) !important;
}

header img[src*="rectangulo"],
footer img[src*="rectangulo"] {
    filter: var(--dp-logo-filter);
    opacity: var(--dp-logo-opacity);
    transition: filter 0.25s ease, opacity 0.25s ease;
}

/* Theme toggle */
.dp-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--dp-toggle-border);
    background: var(--dp-toggle-bg);
    color: var(--dp-toggle-text);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.dp-theme-toggle:hover {
    border-color: var(--dp-accent);
    color: var(--dp-accent-text);
}

.dp-theme-toggle:active {
    transform: scale(0.96);
}

.dp-theme-toggle svg {
    width: 1rem;
    height: 1rem;
}

.dp-theme-toggle .dp-icon-sun,
.dp-theme-toggle .dp-icon-moon {
    display: none;
}

html[data-theme="light"] .dp-theme-toggle .dp-icon-moon {
    display: block;
}

html[data-theme="dark"] .dp-theme-toggle .dp-icon-sun {
    display: block;
}

/* Mobile menu */
#mobile-menu {
    background-color: var(--dp-mobile-menu-bg) !important;
    border-color: var(--dp-border) !important;
}

/* Language dropdown */
.lang-menu > div,
.lang-dropdown .lang-menu > div {
    background-color: var(--dp-dropdown-bg) !important;
    border-color: var(--dp-border) !important;
}

.lang-menu button,
.lang-dropdown button {
    color: var(--dp-dropdown-text) !important;
    border-color: var(--dp-border) !important;
}

.lang-menu button:hover,
.lang-dropdown button:hover {
    background-color: var(--dp-dropdown-hover) !important;
}

/* Sections — common backgrounds */
.bg-white { background-color: var(--dp-bg) !important; }
.bg-slate-50 { background-color: var(--dp-bg-alt) !important; }
.bg-slate-100 { background-color: var(--dp-bg-muted) !important; }

.bg-\[\#080d1a\],
.bg-\[\#0a0f1e\],
.bg-\[\#0f172a\],
.bg-\[\#0a0d1f\],
.bg-\[\#060a12\],
.bg-\[\#0c1220\],
.bg-\[\#090d18\],
.bg-\[\#0a0f1f\] {
    background-color: var(--dp-bg-alt) !important;
}

.bg-\[\#060a14\] {
    background-color: var(--dp-code-bg) !important;
}

.bg-black {
    background-color: var(--dp-footer-bg) !important;
}

/* Text */
.text-slate-900,
.text-white,
.font-black.text-white,
.font-bold.text-white,
h1, h2, h3, h4 {
    color: inherit;
}

.text-slate-900,
.font-black.text-slate-900,
.font-bold.text-slate-900,
h1.text-slate-900,
h2.text-slate-900,
h3.text-slate-900 {
    color: var(--dp-text) !important;
}

html[data-theme="dark"] .text-white,
html[data-theme="dark"] h1.text-white,
html[data-theme="dark"] h2.text-white,
html[data-theme="dark"] h3.text-white {
    color: var(--dp-text) !important;
}

.text-slate-600,
.text-slate-700 {
    color: var(--dp-text-secondary) !important;
}

.text-slate-400,
.text-slate-500,
.text-gray-400,
.text-gray-500 {
    color: var(--dp-text-muted) !important;
}

.text-blue-700,
.text-blue-600,
.text-blue-500 {
    color: var(--dp-accent-text) !important;
}

/* Borders */
.border-slate-100,
.border-slate-200,
.border-slate-800,
.border-slate-900,
.border-white\/10,
.border-white\/\[0\.07\] {
    border-color: var(--dp-border) !important;
}

.divide-slate-200 > :not([hidden]) ~ :not([hidden]),
.divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dp-border) !important;
}

/* Cards & feature blocks */
.feat-card,
.feat-card-sm,
#ai-preview-box,
.bg-\[\#0c1220\].border,
.bg-white.border.rounded-xl,
.bg-white.border.rounded-2xl {
    background-color: var(--dp-bg-card) !important;
    border-color: var(--dp-border) !important;
    box-shadow: var(--dp-card-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease;
}

.feat-card:hover,
.feat-card-sm:hover {
    border-color: var(--dp-accent-border) !important;
    box-shadow: var(--dp-card-shadow-hover);
}

/* Hero & gradients */
.gradient-dark {
    background: var(--dp-bg) !important;
}

html[data-theme="dark"] .gradient-dark {
    background: radial-gradient(circle at 50% 50%, #0f172a 0%, #020617 100%) !important;
}

html[data-theme="dark"] .dp-hero-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--dp-hero-gradient);
    pointer-events: none;
}

.glow-blue {
    box-shadow: var(--dp-glow) !important;
}

/* Problem numbers */
.prob-num {
    color: var(--dp-prob-num) !important;
}

/* Badges */
.bg-blue-50,
.bg-blue-500\/10 {
    background-color: var(--dp-accent-soft) !important;
}

.border-blue-100,
.border-blue-500\/20 {
    border-color: var(--dp-accent-border) !important;
}

/* CTA section */
section.bg-slate-50:last-of-type,
.bg-gradient-to-b {
    background: var(--dp-cta-section) !important;
}

html[data-theme="dark"] .bg-gradient-to-b.from-\[\#080d1a\] {
    background: linear-gradient(180deg, #080d1a 0%, #020617 100%) !important;
}

/* Tables */
.hover\:bg-slate-50:hover {
    background-color: var(--dp-table-hover) !important;
}

/* Nav links */
.nav-link.text-slate-400,
.nav-link.text-slate-600 {
    color: var(--dp-text-muted) !important;
}

.nav-link:hover,
.nav-link.text-blue-500,
.nav-link.text-blue-600,
.nav-link.text-blue-700 {
    color: var(--dp-accent-text) !important;
}

/* Hamburger — dark mode lines */
html[data-theme="light"] .hamburger span {
    background-color: #334155;
}

html[data-theme="dark"] .hamburger span {
    background-color: #f8fafc;
}

/* Sticky bar */
#section-indicator {
    background-color: var(--dp-bg-elevated) !important;
    border-color: var(--dp-border) !important;
}

#sticky-bar button.rounded-full {
    background-color: var(--dp-bg-muted) !important;
    border-color: var(--dp-border) !important;
    color: var(--dp-text-muted) !important;
}

/* AI preview */
#ai-preview-response {
    color: var(--dp-text) !important;
}

/* Secondary buttons */
html[data-theme="light"] a.bg-white.border,
html[data-theme="light"] .hero-secondary {
    background-color: #ffffff !important;
    color: var(--dp-text-secondary) !important;
    border-color: var(--dp-border-strong) !important;
}

html[data-theme="dark"] a.bg-white.border,
html[data-theme="dark"] .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--dp-text) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Indigo highlight boxes (solutions) */
.bg-indigo-900\/20,
.bg-blue-50 {
    background-color: var(--dp-accent-soft) !important;
}

.text-indigo-300,
.text-blue-800 {
    color: var(--dp-accent-text) !important;
}

/* Footer links */
footer a {
    color: var(--dp-text-muted) !important;
}

footer a:hover {
    color: var(--dp-accent-text) !important;
}

/* Blog / legal prose */
.prose-invert {
    color: var(--dp-text-secondary);
}

html[data-theme="light"] .prose-invert {
    --tw-prose-body: #334155;
    --tw-prose-headings: #0f172a;
}

/* Smooth theme transition (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
    body,
    header,
    footer,
    section,
    .feat-card,
    #mobile-menu {
        transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    body, header, footer, section, .feat-card {
        transition: none !important;
    }
}

/* Header with opacity variants (legacy dark pages) */
header.bg-\[\#0a0f1e\]\/90,
header[class*="bg-[#0a0f1e]"] {
    background-color: var(--dp-header-bg) !important;
    border-color: var(--dp-header-border) !important;
}

html[data-theme="light"] header.border-slate-800 {
    border-color: var(--dp-header-border) !important;
}

/* Hero radial accent */
.dp-hero-radial {
    background: radial-gradient(circle at 30% 50%, rgba(37, 99, 235, 0.05), transparent 55%);
}

html[data-theme="dark"] .dp-hero-radial {
    background: radial-gradient(circle at 30% 50%, rgba(37, 99, 235, 0.12), transparent 55%);
}

/* Form fields */
input.bg-slate-900,
textarea.bg-slate-900,
select.bg-slate-900 {
    background-color: var(--dp-bg-card) !important;
    border-color: var(--dp-border-strong) !important;
    color: var(--dp-text) !important;
}

html[data-theme="light"] input.bg-slate-900::placeholder,
html[data-theme="light"] textarea.bg-slate-900::placeholder {
    color: var(--dp-text-muted) !important;
}

html[data-theme="dark"] input.bg-slate-900,
html[data-theme="dark"] textarea.bg-slate-900 {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

/* Mobile menu links */
html[data-theme="light"] #mobile-menu a.text-white {
    color: var(--dp-text) !important;
}

html[data-theme="light"] #mobile-menu .border-white\/10 {
    border-color: var(--dp-border) !important;
}

/* Selection highlight */
::selection {
    background-color: rgba(37, 99, 235, 0.2);
    color: inherit;
}