/* ============================================
   CamDesire — Theme Variables
   Edit this file to customize the entire site.
   Light theme with dark red accents.
   ============================================ */

:root {
    /* === BRAND COLORS === */
    --brand:           #8b0000;    /* Dark red - main accent */
    --brand-hover:     #a01818;    /* Lighter red - hover */
    --brand-active:    #6b0000;    /* Darker red - pressed */
    --brand-tint:      rgba(139, 0, 0, 0.06);
    --brand-glow:      rgba(139, 0, 0, 0.15);

    /* === BACKGROUNDS === */
    --bg:              #ffffff;
    --bg-soft:         #fafaf9;
    --bg-muted:        #f5f5f4;
    --bg-hover:        #f0f0ef;

    /* === BORDERS === */
    --border:          #e7e5e4;
    --border-strong:   #d6d3d1;

    /* === TEXT === */
    --text:            #1c1917;
    --text-2:          #44403c;
    --text-dim:        #78716c;
    --text-mute:       #a8a29e;

    /* === SEMANTIC === */
    --success:         #15803d;
    --success-bg:      #f0fdf4;
    --success-border:  #bbf7d0;

    --warning:         #b45309;
    --warning-bg:      #fffbeb;
    --warning-border:  #fde68a;

    --danger:          #b91c1c;
    --danger-bg:       #fef2f2;
    --danger-border:   #fecaca;

    --info:            #1e40af;
    --info-bg:         #eff6ff;
    --info-border:     #bfdbfe;

    /* === TYPOGRAPHY === */
    --font:            'Inter', -apple-system, system-ui, sans-serif;
    --font-mono:       'JetBrains Mono', 'SF Mono', Consolas, monospace;

    --text-xs:         0.75rem;
    --text-sm:         0.85rem;
    --text-base:       0.95rem;
    --text-lg:         1.1rem;
    --text-xl:         1.4rem;
    --text-2xl:        1.75rem;
    --text-3xl:        2.5rem;
    --text-4xl:        3.5rem;

    /* === LAYOUT === */
    --radius-sm:       6px;
    --radius:          8px;
    --radius-lg:       12px;
    --radius-xl:       16px;
    --radius-full:     9999px;

    --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow:          0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md:       0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
    --shadow-lg:       0 10px 25px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.03);
    --shadow-xl:       0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04);

    /* === SPACING === */
    --space-1:         0.25rem;
    --space-2:         0.5rem;
    --space-3:         0.75rem;
    --space-4:         1rem;
    --space-5:         1.25rem;
    --space-6:         1.5rem;
    --space-8:         2rem;
    --space-10:        2.5rem;
    --space-12:        3rem;
    --space-16:        4rem;
    --space-20:        5rem;

    /* === TRANSITIONS === */
    --transition:      150ms ease;
    --transition-slow: 300ms ease;

    /* === Z-INDEX === */
    --z-header:        100;
    --z-modal:         1000;
}

/* ============================================
   DARK MODE — append to theme.css
   ============================================ */

/* Smooth transition between themes */
html, body, .card, .model-card, .feature, .tabs, .tab,
.btn, input, select, textarea, .alert, .badge {
    transition: background-color 200ms ease,
                border-color 200ms ease,
                color 200ms ease,
                box-shadow 200ms ease;
}

/* Disable transition on first paint (prevent FOUC) */
html.theme-loading, html.theme-loading * {
    transition: none !important;
}

[data-theme="dark"] {
    /* === BACKGROUNDS === */
    /* Warm dark with bordeaux undertone — matches seductive theme */
    --bg:              #1a0e0c;
    --bg-soft:         #221310;
    --bg-muted:        #2a1815;
    --bg-hover:        #321e1b;

    /* === BORDERS === */
    --border:          #3a241f;
    --border-strong:   #4a2f28;

    /* === TEXT === */
    --text:            #f5e6d3;
    --text-2:          #d4c4b0;
    --text-dim:        #a89484;
    --text-mute:       #786758;

    /* === BRAND COLORS — slightly brighter for contrast on dark === */
    --brand:           #d63838;
    --brand-hover:     #e85a5a;
    --brand-active:    #b62828;
    --brand-tint:      rgba(214, 56, 56, 0.12);
    --brand-glow:      rgba(214, 56, 56, 0.25);

    /* === SEMANTIC === */
    --success:         #4ade80;
    --success-bg:      rgba(34, 197, 94, 0.1);
    --success-border:  rgba(34, 197, 94, 0.3);

    --warning:         #fbbf24;
    --warning-bg:      rgba(251, 191, 36, 0.1);
    --warning-border:  rgba(251, 191, 36, 0.3);

    --danger:          #f87171;
    --danger-bg:       rgba(248, 113, 113, 0.1);
    --danger-border:   rgba(248, 113, 113, 0.3);

    --info:            #60a5fa;
    --info-bg:         rgba(96, 165, 250, 0.1);
    --info-border:     rgba(96, 165, 250, 0.3);

    /* === SHADOWS — stronger for depth on dark === */
    --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow:          0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:       0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg:       0 10px 25px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
    --shadow-xl:       0 20px 40px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);

    /* === Override seductive theme paper colors === */
    --paper:           #1a0e0c;
    --paper-warm:      #221310;
    --gold:            #d4af6a;
    --gold-soft:       #b8945a;
    --bordeaux-deep:   #d63838;
}

/* === Body in dark mode === */
[data-theme="dark"] body {
    background: var(--bg);
    color: var(--text);
}

/* === Header glassy effect for dark === */
[data-theme="dark"] .site-header {
    background: rgba(26, 14, 12, 0.85);
    border-bottom-color: rgba(214, 56, 56, 0.2);
    box-shadow: 0 1px 0 rgba(212, 175, 106, 0.15),
                0 8px 32px -16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .nav-brand-icon {
    background: linear-gradient(135deg, #b62828 0%, #8b0000 100%);
    box-shadow: 0 4px 16px rgba(214, 56, 56, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .nav-links a[aria-current="page"] {
    background: linear-gradient(135deg, rgba(214, 56, 56, 0.15), rgba(212, 175, 106, 0.1));
    box-shadow: inset 0 0 0 1px rgba(214, 56, 56, 0.25);
}

/* === Hero section dark === */
[data-theme="dark"] .hero {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(214, 56, 56, 0.15), transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 30%, rgba(212, 175, 106, 0.08), transparent 60%),
        linear-gradient(180deg, #221310 0%, #1a0e0c 100%);
    border-bottom-color: rgba(214, 56, 56, 0.15);
}

[data-theme="dark"] .hero h1 {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .hero-eyebrow {
    background: rgba(34, 19, 16, 0.85);
    border-color: rgba(212, 175, 106, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
}

/* === Page headers dark === */
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .static-page h1 {
    background: linear-gradient(135deg, #f5e6d3 0%, #d4af6a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === Cards dark === */
[data-theme="dark"] .card,
[data-theme="dark"] .feature {
    background: var(--bg-soft);
    border-color: var(--border);
}

[data-theme="dark"] .card-header {
    background: rgba(0, 0, 0, 0.15);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .feature:hover {
    border-color: rgba(214, 56, 56, 0.4);
    box-shadow: 0 16px 36px -12px rgba(214, 56, 56, 0.25);
}

[data-theme="dark"] .feature-icon {
    background: linear-gradient(135deg, rgba(214, 56, 56, 0.15), rgba(212, 175, 106, 0.12));
    box-shadow: inset 0 0 0 1px rgba(212, 175, 106, 0.2);
}

/* === Model cards dark === */
[data-theme="dark"] .model-card {
    background: var(--bg-soft);
    border-color: var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .model-card:hover {
    border-color: rgba(214, 56, 56, 0.4);
    box-shadow: 0 20px 40px -10px rgba(214, 56, 56, 0.3),
                0 0 0 1px rgba(214, 56, 56, 0.2);
}

[data-theme="dark"] .model-card-img {
    background: var(--bg-muted);
}

[data-theme="dark"] .model-card-img.is-offline {
    filter: grayscale(0.7) brightness(0.6);
    opacity: 0.6;
}

[data-theme="dark"] .model-card-tag {
    background: rgba(212, 175, 106, 0.1);
    color: var(--gold);
}

/* === Buttons dark === */
[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #d63838 0%, #8b0000 100%);
    border-color: #8b0000;
    box-shadow: 0 4px 16px rgba(214, 56, 56, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #e85a5a 0%, #a01818 100%);
}

[data-theme="dark"] .btn-ghost {
    color: var(--text-2);
    border-color: rgba(214, 56, 56, 0.3);
    background: transparent;
}

[data-theme="dark"] .btn-ghost:hover {
    background: rgba(214, 56, 56, 0.1);
    border-color: rgba(214, 56, 56, 0.5);
    color: var(--brand);
}

[data-theme="dark"] .btn-danger {
    background: rgba(248, 113, 113, 0.15);
    color: var(--danger);
    border-color: rgba(248, 113, 113, 0.4);
}

[data-theme="dark"] .btn-danger:hover {
    background: rgba(248, 113, 113, 0.25);
}

/* === Forms dark === */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--bg-muted);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-mute);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(214, 56, 56, 0.15);
}

[data-theme="dark"] .form-help {
    color: var(--text-dim);
}

/* === Filter bar (discover) === */
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .favorites-filter-bar,
[data-theme="dark"] .tag-filter-bar {
    background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-muted) 100%);
    border-color: rgba(214, 56, 56, 0.2);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 20px 40px -24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .filter-bar .form-input {
    background-color: var(--bg-muted);
    background-image: none;
    padding-left: 16px;
    color: var(--text);
}

[data-theme="dark"] .filter-bar .form-input::placeholder {
    color: rgba(245, 230, 211, 0.4);
    font-weight: 500;
}

[data-theme="dark"] .filter-bar .form-select:hover {
    background-color: var(--bg-hover);
    border-color: rgba(214, 56, 56, 0.5);
}

[data-theme="dark"] .filter-bar label {
    background: var(--bg-muted);
}

[data-theme="dark"] .ffb-select {
    background-color: var(--bg-muted);
    color: var(--text);
}

[data-theme="dark"] .filter-bar .form-select option {
    background: var(--bg-muted);
    color: var(--text);
}

[data-theme="dark"] .filter-bar .form-select {
    background-color: var(--bg-muted);
    color: var(--text);
  }

[data-theme="dark"] .ffb-select:hover {
    background-color: var(--bg-hover);
    border-color: rgba(214, 56, 56, 0.5);
}

[data-theme="dark"] .ffb-select option {
    background: var(--bg-muted);
    color: var(--text);
}

/* === Tabs dark === */
[data-theme="dark"] .tabs {
    background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-muted) 100%);
    border-color: var(--border);
}

/* === Tag chips dark === */
[data-theme="dark"] .tag-chip {
    background: linear-gradient(135deg, rgba(212, 175, 106, 0.15) 0%, rgba(212, 175, 106, 0.08) 100%);
    border-color: rgba(212, 175, 106, 0.4);
    color: var(--gold);
}

[data-theme="dark"] .tag-chip:hover {
    border-color: rgba(212, 175, 106, 0.7);
    color: var(--gold);
}

[data-theme="dark"] .tag-chip.active {
    background: linear-gradient(135deg, #d63838 0%, #8b0000 100%);
    border-color: #8b0000;
    color: #fff;
}

[data-theme="dark"] .fav-tag-chip {
    background: linear-gradient(135deg, rgba(214, 56, 56, 0.12), rgba(212, 175, 106, 0.08));
    border-color: rgba(212, 175, 106, 0.3);
    color: var(--gold);
}

[data-theme="dark"] .fav-tag-add {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(212, 175, 106, 0.4);
    color: var(--gold);
}

[data-theme="dark"] .fav-tag-add:hover {
    background: linear-gradient(135deg, rgba(212, 175, 106, 0.15), rgba(214, 56, 56, 0.1));
}

/* === Badges dark === */
[data-theme="dark"] .badge-muted {
    background: rgba(212, 175, 106, 0.1);
    color: var(--text-dim);
}

[data-theme="dark"] .badge-success {
    background: rgba(74, 222, 128, 0.15);
    color: var(--success);
}

[data-theme="dark"] .badge-info {
    background: rgba(96, 165, 250, 0.15);
    color: var(--info);
}

[data-theme="dark"] .badge-danger {
    background: rgba(248, 113, 113, 0.15);
    color: var(--danger);
}

/* === Alerts dark === */
[data-theme="dark"] .alert-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--success);
}

[data-theme="dark"] .alert-error {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--danger);
}

[data-theme="dark"] .alert-warning {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--warning);
}

/* === CTA Banner dark === */
[data-theme="dark"] .cta-banner {
    background:
        radial-gradient(ellipse at top left, rgba(212, 175, 106, 0.25), transparent 50%),
        linear-gradient(135deg, #b62828 0%, #6b0000 100%);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
}

/* === Article paper dark === */
[data-theme="dark"] .article-paper {
    background: var(--bg-soft);
    border-color: var(--border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .article-paper.warm {
    background: var(--bg-muted);
}

[data-theme="dark"] .article-body {
    color: var(--text);
}

[data-theme="dark"] .article-body p {
    color: var(--text-2);
}

[data-theme="dark"] .article-body > p:first-of-type::first-letter {
    color: var(--brand);
}

[data-theme="dark"] .article-body h2,
[data-theme="dark"] .article-body h3,
[data-theme="dark"] .article-body h4 {
    color: var(--text);
}

[data-theme="dark"] .article-body code {
    background: rgba(214, 56, 56, 0.1);
    border-color: rgba(214, 56, 56, 0.2);
    color: var(--brand);
}

[data-theme="dark"] .article-body table {
    border-color: var(--border);
}

[data-theme="dark"] .article-body th {
    background: var(--bg-muted);
    color: var(--text);
}

[data-theme="dark"] .article-body th,
[data-theme="dark"] .article-body td {
    border-bottom-color: var(--border);
}

[data-theme="dark"] .article-body tbody tr:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .article-body blockquote {
    color: var(--text-2);
    border-left-color: var(--brand);
}

/* === Article cards dark === */
[data-theme="dark"] .article-card,
[data-theme="dark"] .article-featured {
    background: var(--bg-soft);
    border-color: var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .article-card:hover,
[data-theme="dark"] .article-featured:hover {
    border-color: rgba(214, 56, 56, 0.4);
    box-shadow: 0 16px 36px rgba(214, 56, 56, 0.25);
}

[data-theme="dark"] .article-card-category {
    background: rgba(214, 56, 56, 0.15);
    color: var(--brand);
}

[data-theme="dark"] .article-card-title a {
    color: var(--text);
}

[data-theme="dark"] .article-card-title a:hover {
    color: var(--brand);
}

[data-theme="dark"] .article-card-image-placeholder {
    background: linear-gradient(135deg, var(--bg-soft), var(--bg-muted));
}

/* === Static pages dark === */
[data-theme="dark"] .static-page {
    color: var(--text);
}

[data-theme="dark"] .static-page p,
[data-theme="dark"] .static-page li {
    color: var(--text-2);
}

[data-theme="dark"] .static-page h2 {
    border-bottom-color: var(--border);
}

[data-theme="dark"] .static-page code {
    background: var(--bg-muted);
    color: var(--brand);
}

[data-theme="dark"] .static-page blockquote {
    background: var(--bg-soft);
    color: var(--text-2);
    border-left-color: var(--brand);
}

/* === Footer (already dark, just slightly darker) === */
[data-theme="dark"] .site-footer {
    background: linear-gradient(180deg, #0a0a0c 0%, #050506 100%);
    border-top-color: var(--brand);
}

/* === Stats cards dark === */
[data-theme="dark"] .stat-card {
    background: var(--bg-soft);
    border-color: var(--border);
}

/* === FAQ details dark === */
[data-theme="dark"] details.card {
    background: var(--bg-soft);
}

/* === Tag input popup dark === */
[data-theme="dark"] .tag-input-popup {
    background: var(--bg-soft);
    border-color: var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .tag-input-popup input {
    background: var(--bg-muted);
    color: var(--text);
}

[data-theme="dark"] .tag-input-popup .suggestion:hover {
    background: linear-gradient(135deg, rgba(212, 175, 106, 0.15), rgba(214, 56, 56, 0.1));
    color: var(--gold);
}

/* === Account sidebar dark === */
[data-theme="dark"] .account-nav-item:hover {
    background: var(--bg-soft);
}

[data-theme="dark"] .account-nav-item.active {
    background: var(--bg-soft);
    color: var(--brand);
}

[data-theme="dark"] .account-nav-badge {
    background: var(--bg-muted);
}

/* === Theme toggle button === */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    padding: 0;
}

.theme-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--brand);
    color: var(--brand);
}

.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;
}

/* === Auto-detect for users with 'auto' preference === */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        /* Apply same overrides as [data-theme="dark"] */
        --bg:              #1a0e0c;
        --bg-soft:         #221310;
        --bg-muted:        #2a1815;
        --bg-hover:        #321e1b;
        --border:          #3a241f;
        --border-strong:   #4a2f28;
        --text:            #f5e6d3;
        --text-2:          #d4c4b0;
        --text-dim:        #a89484;
        --text-mute:       #786758;
        --brand:           #d63838;
        --brand-hover:     #e85a5a;
        --brand-active:    #b62828;
        --brand-tint:      rgba(214, 56, 56, 0.12);
        --brand-glow:      rgba(214, 56, 56, 0.25);
        --paper:           #1a0e0c;
        --paper-warm:      #221310;
    }

    /* Apply all the same component overrides for auto mode */
    [data-theme="auto"] body { background: var(--bg); color: var(--text); }
    [data-theme="auto"] .card,
    [data-theme="auto"] .feature,
    [data-theme="auto"] .model-card,
    [data-theme="auto"] .article-card,
    [data-theme="auto"] .article-featured,
    [data-theme="auto"] .stat-card,
    [data-theme="auto"] .article-paper {
        background: var(--bg-soft);
        border-color: var(--border);
    }

    [data-theme="auto"] .form-input,
    [data-theme="auto"] .form-textarea,
    [data-theme="auto"] .form-select,
    [data-theme="auto"] input[type="text"],
    [data-theme="auto"] input[type="email"],
    [data-theme="auto"] input[type="url"],
    [data-theme="auto"] input[type="password"],
    [data-theme="auto"] input[type="search"],
    [data-theme="auto"] input[type="number"],
    [data-theme="auto"] select,
    [data-theme="auto"] textarea {
        background: var(--bg-muted);
        border-color: var(--border);
        color: var(--text);
    }

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