/* Theme overrides based on data-theme on */
:root[data-theme="dark"] {
--color-background: #030213;
--color-surface: #111827;
--color-text: #f9fafb;
--color-text-light: #d1d5db;
--color-border: rgba(148, 163, 184, 0.45);
}
:root[data-theme="dark"] body {
background: var(--color-background);
color: var(--color-text);
}
:root[data-theme="dark"] header {
background: linear-gradient(to bottom, rgba(15,23,42,0.9), rgba(15,23,42,0.7));
border-bottom-color: rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .eyebrow {
background: radial-gradient(circle at top left, rgba(59,184,255,0.2), transparent 70%),
rgba(15,23,42,0.9);
}
:root[data-theme="dark"] .btn-secondary {
background: rgba(31, 41, 55, 0.9);
border-color: rgba(156, 163, 175, 0.9);
color: #f9fafb;
}
:root[data-theme="dark"] .btn-secondary:hover {
background: rgba(55, 65, 81, 0.95);
border-color: rgba(191, 219, 254, 0.9);
color: #ffffff;
}
:root[data-theme="dark"] .btn-config {
background: var(--color-primary);
color: #ffffff;
border-color: rgba(59, 184, 255, 0.9);
}
:root[data-theme="dark"] .btn-config:hover {
background: var(--color-primary-dark);
}
:root[data-theme="dark"] .product-card {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.98));
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
}
:root[data-theme="dark"] .custom-chip {
background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(17,24,39,0.98));
}
:root[data-theme="dark"] .info-card {
background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(17,24,39,0.98));
}
:root[data-theme="dark"] .form-shell {
background: radial-gradient(circle at top left, rgba(59,184,255,0.14), transparent 60%),
linear-gradient(135deg, rgba(15,23,42,0.98), rgba(17,24,39,0.98));
}
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] input[type="file"] {
background: rgba(15,23,42,0.95);
border-color: rgba(51, 65, 85, 0.9);
color: #e5e7eb;
}
:root[data-theme="dark"] input[aria-invalid="true"],
:root[data-theme="dark"] select[aria-invalid="true"],
:root[data-theme="dark"] textarea[aria-invalid="true"],
:root[data-theme="dark"] input[type="file"][aria-invalid="true"] {
background: rgba(24,24,27,0.98);
}
:root[data-theme="dark"] .modal-dialog {
background: radial-gradient(circle at top left, rgba(59,184,255,0.16), transparent 60%),
linear-gradient(135deg, rgba(15,23,42,0.98), rgba(15,23,42,0.98));
}
:root[data-theme="dark"] .radio-pill {
background: rgba(15,23,42,0.9);
border-color: rgba(51,65,85,0.9);
}
:root[data-theme="dark"] .theme-toggle {
background: rgba(15,23,42,0.9);
color: #e5e7eb;
border-color: rgba(148,163,184,0.9);
}
:root[data-theme="dark"] .nav-toggle {
background: rgba(15,23,42,0.9);
border-color: rgba(148,163,184,0.9);
}
:root[data-theme="dark"] .nav-toggle:hover {
background: rgba(59,184,255,0.15);
border-color: rgba(59,184,255,0.8);
}
:root[data-theme="dark"] .nav-toggle-icon span {
background: #e5e7eb;
}
:root[data-theme="dark"] .testimonial-card {
background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(17,24,39,0.98));
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
}
:root[data-theme="dark"] .testimonial-author {
color: #9ca3af;
}