/* ─── DARK MODE ─── */
/* Pactly theme system — toggle + system preference support */

/* Smooth transition between themes */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* ─── Dark mode CSS variable overrides ─── */
[data-theme="dark"] {
    --ink: #e5e5e3;
    --paper: #0c0c0e;
    --accent: #34d87a;
    --accent-light: #162e20;
    --gold: #e8b84c;
    --gold-light: #2c2214;
    --gray-100: #18181b;
    --gray-300: #2c2c30;
    --gray-500: #8a8a8e;
    --gray-700: #b5b5b1;
}

/* ─── Cards & surfaces (hardcoded white → dark surface) ─── */
[data-theme="dark"] .deal-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .match-card,
[data-theme="dark"] .summary-stat,
[data-theme="dark"] .modal {
    background: #18181b;
}

[data-theme="dark"] .floating-tag {
    background: #1e1e22;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

[data-theme="dark"] .deal-card {
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* ─── Form inputs ─── */
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select {
    background: #1a1a1d;
    color: var(--ink);
}

[data-theme="dark"] .form-field input::placeholder {
    color: var(--gray-500);
}

[data-theme="dark"] .form-field input:focus,
[data-theme="dark"] .form-field select:focus {
    box-shadow: 0 0 0 3px rgba(52, 216, 122, 0.2);
}

[data-theme="dark"] .checkbox-group label {
    background: #1a1a1d;
}

/* ─── Primary buttons (dark bg → light bg in dark mode) ─── */
[data-theme="dark"] .nav-cta,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-proposal {
    background: #e5e5e3;
    color: #0c0c0e;
}

[data-theme="dark"] .nav-cta:hover,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-proposal:hover {
    background: #d0d0ce;
}

[data-theme="dark"] .btn-primary:disabled {
    background: var(--gray-300);
    color: var(--gray-500);
}

/* ─── Secondary button ─── */
[data-theme="dark"] .btn-secondary {
    color: var(--gray-700);
    border-color: var(--gray-300);
}

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

/* ─── Copy button ─── */
[data-theme="dark"] .btn-copy {
    background: var(--accent);
    color: #0c0c0e;
}

[data-theme="dark"] .btn-copy:hover {
    background: #28c06a;
}

/* ─── "How it works" section (intentionally dark in light mode) ─── */
[data-theme="dark"] .how {
    background: #151518;
}

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

[data-theme="dark"] .proposal-content {
    background: #1a1a1d;
}

/* ─── Match card hover ─── */
[data-theme="dark"] .match-card:hover {
    box-shadow: 0 8px 32px rgba(52, 216, 122, 0.12);
}

/* ─── Subtle borders ─── */
[data-theme="dark"] .comp-list li {
    border-bottom-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .divider hr {
    border-top-color: var(--gray-300);
}

[data-theme="dark"] footer {
    border-top-color: var(--gray-300);
}

/* ─── Nav link hover ─── */
[data-theme="dark"] .nav-link:hover {
    background: var(--gray-100);
}

/* ─── Theme toggle button ─── */
.theme-toggle {
    background: none;
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
    color: var(--gray-700);
}

.theme-toggle:hover {
    border-color: var(--ink);
    background: var(--gray-100);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

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

.theme-toggle .icon-moon {
    display: block;
}

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

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}