/* ============================================================
   DARK MODE — Applied via: html[data-theme="dark"]
   ============================================================ */

html[data-theme="dark"] {
    /* Surface tokens */
    --white:          #111010;
    --cream-light:    #1a1815;
    --cream-dark:     #141210;
    --cream:          #1e1b17;

    /* Border */
    --border-color:   #2c2924;
    --border-dark:    #3a3530;

    /* Text */
    --text-primary:   #ede8e1;
    --text-secondary: #a09485;
    --text-muted:     #5e574e;

    /* Brand stays close */
    --primary:        #8b7355;
    --black:          #ede8e1;

    /* Accent — slightly warmer in dark */
    --accent:         #d4a574;
    --gold:           #c4a670;
    --gold-dark:      #b08a50;
    --gold-light:     #dcc08a;

    /* Shadows for dark */
    --shadow-sm:      0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.55);
    --shadow-xl:      0 20px 60px rgba(0, 0, 0, 0.65);
}

/* ── Body ── */
html[data-theme="dark"] body {
    background: #111010;
    color: var(--text-primary);
}

html[data-theme="dark"] body::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(42, 35, 22, 0.55) 0%, transparent 70%);
}

/* ── Logo swap ── */
html[data-theme="dark"] .logo-light { display: none !important; }
html[data-theme="dark"] .logo-dark  { display: block !important; }

/* ── Header ── */
html[data-theme="dark"] .header {
    background: rgba(26, 24, 20, 0.96);
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .header.scrolled {
    background: rgba(17, 16, 16, 0.98);
}

@media (max-width: 768px) {
    html[data-theme="dark"] .header,
    html[data-theme="dark"] .header.scrolled {
        background: rgba(26, 24, 20, 0.98) !important;
    }
}

/* ── Nav links ── */
html[data-theme="dark"] .nav-link {
    color: var(--text-secondary);
}

html[data-theme="dark"] .nav-link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .dropdown-menu {
    background: #1e1b17;
    border-color: var(--border-color);
    box-shadow: var(--shadow-xl);
}

html[data-theme="dark"] .dropdown-menu a {
    color: var(--text-secondary);
}

html[data-theme="dark"] .dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

/* ── Language / buttons ── */
html[data-theme="dark"] .language-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

html[data-theme="dark"] .language-btn:hover {
    border-color: var(--gold);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .language-dropdown {
    background: #1e1b17;
    border-color: var(--border-color);
    box-shadow: var(--shadow-xl);
}

html[data-theme="dark"] .language-option:hover {
    background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .language-option span {
    color: var(--text-secondary);
}

html[data-theme="dark"] .nav-icon {
    border-color: var(--border-color);
}

html[data-theme="dark"] .nav-icon i {
    color: var(--text-secondary);
}

html[data-theme="dark"] .nav-icon:hover {
    background: var(--text-primary);
    border-color: var(--text-primary);
}

html[data-theme="dark"] .nav-icon:hover i {
    color: #111010;
}

html[data-theme="dark"] .theme-toggle {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

html[data-theme="dark"] .theme-toggle:hover {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: #111010;
}

/* ── Mobile sidebar ── */
html[data-theme="dark"] .nav-center {
    background: #1a1815;
    border-right-color: var(--border-color);
}

html[data-theme="dark"] .nav-link {
    border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .mobile-menu-overlay {
    background: rgba(0, 0, 0, 0.65);
}

html[data-theme="dark"] .hamburger-lines span {
    background: var(--text-primary);
}

/* ── Main ── */
html[data-theme="dark"] .main {
    background: linear-gradient(180deg, rgba(35, 28, 18, 0.3) 0%, #111010 40%);
}

/* ── Camera ── */
html[data-theme="dark"] .camera-frame {
    background: #1a1815;
    border-color: var(--border-dark);
}

html[data-theme="dark"] .camera-frame:hover {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 4px rgba(60, 50, 35, 0.4);
}

html[data-theme="dark"] .camera-placeholder {
    background: #1a1815;
}

html[data-theme="dark"] .placeholder-icon {
    color: var(--border-dark);
}

html[data-theme="dark"] .camera-placeholder:hover .placeholder-icon {
    color: var(--gold);
}

html[data-theme="dark"] .placeholder-text {
    color: var(--text-muted);
}

html[data-theme="dark"] .guide-corner {
    border-color: rgba(139, 115, 85, 0.4);
}

html[data-theme="dark"] .camera-frame:hover .guide-corner {
    border-color: rgba(196, 166, 112, 0.6);
}

/* ── Features ── */
html[data-theme="dark"] .camera-features {
    border-color: var(--border-color);
}

html[data-theme="dark"] .feature-item {
    color: var(--text-muted);
}

html[data-theme="dark"] .feature-item:hover {
    color: var(--text-primary);
}

html[data-theme="dark"] .feature-item i,
html[data-theme="dark"] .feature-item svg {
    color: var(--gold);
}

/* ── Buttons ── */
html[data-theme="dark"] .btn-camera-start {
    background: var(--text-primary);
    color: #111010;
    border-color: var(--text-primary);
}

html[data-theme="dark"] .btn-camera-start:hover {
    background: #ccc5bb;
    box-shadow: 0 4px 20px rgba(237, 232, 225, 0.2);
}

html[data-theme="dark"] .btn-upload {
    border-color: var(--border-dark);
    color: var(--text-secondary);
}

html[data-theme="dark"] .btn-upload:hover {
    border-color: var(--gold);
    color: var(--text-primary);
    box-shadow: 0 2px 12px rgba(196, 166, 112, 0.15);
}

html[data-theme="dark"] .btn-upload::before {
    background: linear-gradient(135deg, rgba(60, 45, 25, 0.4), rgba(139, 115, 85, 0.2));
}

html[data-theme="dark"] .btn-primary {
    background: var(--text-primary);
    color: #111010;
    border-color: var(--text-primary);
}

html[data-theme="dark"] .btn-primary:hover {
    background: #ccc5bb;
    box-shadow: 0 4px 20px rgba(237, 232, 225, 0.15);
}

html[data-theme="dark"] .btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    border-color: var(--border-dark);
}

html[data-theme="dark"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--text-muted);
}

/* ── Capture ── */
html[data-theme="dark"] .capture-ring {
    background: #1a1815;
    border-color: var(--border-dark);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 6px rgba(60,50,35,0.4);
}

html[data-theme="dark"] .capture-inner {
    background: var(--text-primary);
    color: #111010;
}

html[data-theme="dark"] .btn-capture:hover .capture-inner {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #111010;
}

html[data-theme="dark"] .btn-capture:hover .capture-ring {
    border-color: var(--gold);
}

/* ── Loading ── */
html[data-theme="dark"] .loading-text::before {
    background: #1a1815;
}

html[data-theme="dark"] .loading-circle {
    background: var(--text-primary);
}

html[data-theme="dark"] .progress-track {
    background: var(--cream-dark);
}

html[data-theme="dark"] .progress-fill {
    background: linear-gradient(90deg, var(--gold), var(--text-primary));
}

html[data-theme="dark"] .progress-percentage {
    color: var(--text-muted);
}

html[data-theme="dark"] .loading-step {
    color: var(--text-muted);
}

html[data-theme="dark"] .loading-step.active {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .step-icon {
    background: #1a1815;
    border-color: var(--border-color);
    color: var(--text-muted);
}

html[data-theme="dark"] .loading-step.active .step-icon {
    background: rgba(237, 232, 225, 0.12);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* ── Results ── */
html[data-theme="dark"] .results-intro {
    background: linear-gradient(135deg, rgba(42, 35, 22, 0.35) 0%, rgba(26, 24, 20, 0.8) 100%);
    border-color: var(--border-color);
}

html[data-theme="dark"] .results-intro::before {
    background: radial-gradient(ellipse, rgba(139, 115, 85, 0.06), transparent 70%);
}

html[data-theme="dark"] .results-title {
    color: var(--text-primary);
}

html[data-theme="dark"] #pitch-title {
    color: var(--text-secondary);
}

html[data-theme="dark"] .section-label {
    color: var(--text-muted);
    border-color: var(--border-color);
}

html[data-theme="dark"] .section-label i {
    color: var(--gold);
}

/* ── Analysis cards ── */
html[data-theme="dark"] .analysis-card {
    background: #1a1815;
    border-color: var(--border-color);
}

html[data-theme="dark"] .analysis-card::before {
    background: radial-gradient(circle at 0% 0%, rgba(60, 45, 25, 0.2), transparent 60%);
}

html[data-theme="dark"] .analysis-card:hover {
    border-color: var(--border-dark);
    box-shadow: var(--shadow-md);
}

html[data-theme="dark"] .analysis-card.big-left,
html[data-theme="dark"] .analysis-card.impression-card {
    background: linear-gradient(145deg, rgba(42, 35, 22, 0.5) 0%, rgba(26, 24, 20, 0.9) 100%);
}

html[data-theme="dark"] .analysis-card p {
    color: var(--text-primary);
}

html[data-theme="dark"] .analysis-card.impression-card p {
    color: var(--text-primary);
}

html[data-theme="dark"] .analysis-card.small-right p {
    color: var(--text-primary);
}

html[data-theme="dark"] .card-label {
    color: var(--text-muted);
}

html[data-theme="dark"] .card-label i {
    color: var(--gold);
}

/* ── Olfactive ── */
html[data-theme="dark"] .olfactive-translation {
    background: linear-gradient(145deg, rgba(42, 35, 22, 0.2), rgba(26, 24, 20, 0.7));
    border-color: var(--border-color);
}

html[data-theme="dark"] .translation-title {
    color: var(--text-primary);
}

html[data-theme="dark"] .translation-title i {
    color: var(--gold);
}

html[data-theme="dark"] .note-header {
    color: var(--text-secondary);
    border-color: var(--border-dark);
}

html[data-theme="dark"] .note-header i {
    color: var(--gold);
}

html[data-theme="dark"] .note-tag {
    color: var(--text-secondary);
    border-color: var(--border-dark);
    background: rgba(60, 50, 35, 0.25);
}

html[data-theme="dark"] .note-tag:hover {
    background: var(--text-primary);
    color: #111010;
    border-color: var(--text-primary);
}

/* ── Perfume cards ── */
html[data-theme="dark"] .perfume-card {
    background: #1a1815;
    border-color: var(--border-color);
}

html[data-theme="dark"] .perfume-card:hover {
    border-color: var(--border-dark);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .perfume-image-container {
    background: #141210;
}

html[data-theme="dark"] .perfume-content {
    background: #1a1815;
}

html[data-theme="dark"] .perfume-name {
    color: var(--text-primary);
}

html[data-theme="dark"] .perfume-family {
    color: var(--text-muted);
}

html[data-theme="dark"] .perfume-univers {
    color: var(--text-secondary);
}

html[data-theme="dark"] .perfume-price {
    color: var(--text-primary);
}

html[data-theme="dark"] .btn-shop,
html[data-theme="dark"] .btn-select-perfume {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

html[data-theme="dark"] .btn-shop:hover,
html[data-theme="dark"] .btn-select-perfume:hover {
    opacity: 0.7;
}

html[data-theme="dark"] .best-match-section .perfume-card {
    background: #1e1b17;
    border-color: var(--text-muted);
}

html[data-theme="dark"] .best-match-badge {
    background: var(--text-primary);
    color: #111010;
}

/* ── Best match heading ── */
html[data-theme="dark"] .best-match-section h3,
html[data-theme="dark"] .other-perfumes-section h3 {
    color: var(--text-primary);
}

html[data-theme="dark"] .best-match-section h3 i {
    color: var(--gold);
}

/* ── Cross sell ── */
html[data-theme="dark"] .cross-sell-banner {
    background: linear-gradient(135deg, rgba(42, 35, 22, 0.3) 0%, rgba(26, 24, 20, 0.8) 100%);
    border-color: var(--border-color);
}

html[data-theme="dark"] .cross-sell-content h3 {
    color: var(--text-primary);
}

html[data-theme="dark"] .cross-sell-content p {
    color: var(--text-secondary);
}

html[data-theme="dark"] .cross-sell-cta {
    background: var(--text-primary);
    color: #111010;
}

html[data-theme="dark"] .cross-sell-cta:hover {
    background: #ccc5bb;
}

/* ── Action footer ── */
html[data-theme="dark"] .action-footer {
    border-color: var(--border-color);
}

/* ── Partner modal cards ── */
html[data-theme="dark"] .partner-perfume-card {
    background: #1a1815;
    border-color: var(--border-color);
}

html[data-theme="dark"] .user-badge {
    background: var(--text-primary);
    color: #111010;
}

html[data-theme="dark"] .harmony-box {
    background: rgba(139, 115, 85, 0.08);
    border-color: rgba(139, 115, 85, 0.2);
}

html[data-theme="dark"] .harmony-title {
    color: var(--gold);
}

html[data-theme="dark"] .harmony-description {
    color: var(--text-secondary);
}

html[data-theme="dark"] .harmony-reason {
    background: rgba(139, 115, 85, 0.12);
    color: var(--gold-dark);
}

html[data-theme="dark"] .btn-buy-duo {
    background: var(--text-primary);
    color: #111010;
}

html[data-theme="dark"] .btn-buy-duo:hover {
    background: #ccc5bb;
}

html[data-theme="dark"] .duo-summary {
    background: #1e1b17;
    border-color: var(--border-color);
}

html[data-theme="dark"] .duo-summary-text {
    color: var(--text-secondary);
}

html[data-theme="dark"] .duo-total {
    color: var(--text-primary);
}

html[data-theme="dark"] .duo-savings {
    color: var(--text-muted);
}

html[data-theme="dark"] .partner-perfume-name {
    color: var(--text-primary);
}

html[data-theme="dark"] .partner-perfume-family {
    color: var(--text-muted);
}

html[data-theme="dark"] .partner-perfume-price {
    color: var(--text-primary);
}

/* ── Modals ── */
html[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .modal-content {
    background: #1a1815;
    border-color: var(--border-dark);
    box-shadow: var(--shadow-xl);
}

html[data-theme="dark"] .modal-content h2 {
    color: var(--text-primary);
}

html[data-theme="dark"] .modal-content > p {
    color: var(--text-secondary);
}

html[data-theme="dark"] .form-group label {
    color: var(--text-secondary);
}

html[data-theme="dark"] .form-group input {
    background: #141210;
    border-color: var(--border-dark);
    color: var(--text-primary);
}

html[data-theme="dark"] .form-group input:focus {
    border-color: var(--text-secondary);
    background: #1e1b17;
    box-shadow: 0 0 0 3px rgba(160, 148, 133, 0.1);
}

html[data-theme="dark"] .form-group input::placeholder {
    color: var(--text-muted);
}

html[data-theme="dark"] .form-check input[type="checkbox"] {
    border-color: var(--border-dark);
    background: #141210;
}

html[data-theme="dark"] .form-check input[type="checkbox"]:checked {
    background: var(--text-primary);
    border-color: var(--text-primary);
}

html[data-theme="dark"] .form-check input[type="checkbox"]:checked::before {
    background: #111010;
}

html[data-theme="dark"] .form-check label {
    color: var(--text-secondary);
}

/* ── Audio ── */
html[data-theme="dark"] .btn-audio-control {
    border-color: var(--border-dark);
    color: var(--text-secondary);
}

html[data-theme="dark"] .btn-audio-control:hover {
    background: var(--text-primary);
    color: #111010;
    border-color: var(--text-primary);
}

html[data-theme="dark"] .btn-audio-control.speaking {
    background: rgba(160, 60, 60, 0.12);
    border-color: rgba(160, 60, 60, 0.3);
    color: #d08080;
}

/* ── Footer ── */
html[data-theme="dark"] .footer {
    background: #0d0c0b;
    border-top-color: var(--border-color);
}

html[data-theme="dark"] .footer-brand p {
    color: var(--text-secondary);
}

html[data-theme="dark"] .footer-social a {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

html[data-theme="dark"] .footer-social a:hover {
    background: var(--text-primary);
    color: #111010;
    border-color: var(--text-primary);
}

html[data-theme="dark"] .footer-column h4 {
    color: var(--text-secondary);
}

html[data-theme="dark"] .footer-column a {
    color: var(--text-muted);
}

html[data-theme="dark"] .footer-column a:hover {
    color: var(--text-primary);
}

html[data-theme="dark"] .footer-bottom {
    border-color: var(--border-color);
}

html[data-theme="dark"] .footer-copy p {
    color: var(--text-muted);
}

/* ── Currency float ── */
html[data-theme="dark"] .currency-float-button {
    background: #1a1815;
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .currency-float-button:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow-xl);
}

html[data-theme="dark"] .currency-float-button .currency-code {
    color: var(--text-primary);
}

html[data-theme="dark"] .currency-float-dropdown {
    background: #1a1815;
    border-color: var(--border-color);
    box-shadow: var(--shadow-xl);
}

html[data-theme="dark"] .currency-dropdown-header {
    background: #141210;
    border-color: var(--border-color);
    color: var(--text-muted);
}

html[data-theme="dark"] .currency-float-option {
    border-color: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .currency-float-option:hover {
    background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .currency-float-option.selected {
    background: rgba(196, 166, 112, 0.08);
}

html[data-theme="dark"] .currency-float-option.selected::after {
    color: var(--gold);
}

html[data-theme="dark"] .currency-name {
    color: var(--text-primary);
}

html[data-theme="dark"] .currency-symbol {
    color: var(--text-muted);
}

/* ── Fallback indicator ── */
html[data-theme="dark"] .fallback-indicator {
    background: rgba(139, 115, 85, 0.9);
}

/* ── Scrollbar ── */
html[data-theme="dark"] ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #111010;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-dark);
    border-radius: 3px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ── Selection ── */
html[data-theme="dark"] ::selection {
    background: rgba(196, 166, 112, 0.25);
    color: var(--text-primary);
}

/* ── Focus ── */
html[data-theme="dark"] :focus-visible {
    outline-color: var(--gold);
}