/* =========================================================
   PROMPTELIER — THEMES
   Only theme variables and theme-specific overrides.
========================================================= */

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #07110d;
    --bg-2: #0a1712;
    --bg-3: #0d1d16;

    --surface: rgba(255,255,255,.045);
    --surface-strong: rgba(255,255,255,.065);
    --surface-hover: rgba(52,211,153,.055);

    --text: #f2f7f4;
    --text-soft: #aebdb5;
    --text-muted: #708078;

    --border: rgba(255,255,255,.09);
    --border-soft: rgba(255,255,255,.055);
    --border-hover: rgba(52,211,153,.28);
    --border-active: rgba(52,211,153,.55);

    --accent: #34d399;
    --accent-strong: #10b981;
    --accent-light: #6ee7b7;

    --shadow-sm: 0 10px 30px rgba(0,0,0,.18);
    --shadow: 0 25px 70px rgba(0,0,0,.28);
    --shadow-lg: 0 40px 100px rgba(0,0,0,.38);
}

html[data-theme="light"] {
    color-scheme: light;

    --bg: #f5f8f6;
    --bg-2: #eef4f0;
    --bg-3: #e7f0ea;

    --surface: rgba(255,255,255,.72);
    --surface-strong: rgba(255,255,255,.9);
    --surface-hover: rgba(16,185,129,.045);

    --text: #15231c;
    --text-soft: #56675e;
    --text-muted: #7e8d85;

    --border: rgba(21,35,28,.10);
    --border-soft: rgba(21,35,28,.06);
    --border-hover: rgba(16,185,129,.30);
    --border-active: rgba(16,185,129,.52);

    --accent: #10b981;
    --accent-strong: #059669;
    --accent-light: #059669;

    --shadow-sm: 0 10px 30px rgba(28,53,40,.07);
    --shadow: 0 25px 70px rgba(28,53,40,.10);
    --shadow-lg: 0 40px 100px rgba(28,53,40,.15);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 8% 3%, rgba(16,185,129,.11), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(52,211,153,.07), transparent 25%),
        var(--bg);
}

html[data-theme="light"] body::before {
    opacity: .2;
    background-image: radial-gradient(rgba(21,35,28,.08) 1px, transparent 1px);
}

html[data-theme="light"] .site-header {
    background: rgba(245,248,246,.78);
    border-bottom-color: rgba(21,35,28,.07);
}

html[data-theme="light"] .brand-copy strong {
    color: #15231c;
}

html[data-theme="light"] .brand-copy small {
    color: #809087;
}

html[data-theme="light"] .header-button,
html[data-theme="light"] .theme-button {
    background: rgba(255,255,255,.72);
    color: #35473e;
}

html[data-theme="light"] .language-menu {
    background: rgba(255,255,255,.97);
    border-color: rgba(21,35,28,.08);
    box-shadow: 0 30px 80px rgba(28,53,40,.14);
}

html[data-theme="light"] .language-menu button {
    color: #56675e;
}

html[data-theme="light"] .language-menu button:hover,
html[data-theme="light"] .language-menu button.active {
    color: #059669;
    background: rgba(16,185,129,.08);
}

html[data-theme="light"] .generator-card,
html[data-theme="light"] .page-prompt-card,
html[data-theme="light"] .style-lock-card,
html[data-theme="light"] .negative-prompt-card,
html[data-theme="light"] .how-card {
    background: rgba(255,255,255,.68);
}

html[data-theme="light"] .option-content,
html[data-theme="light"] .theme-card-content,
html[data-theme="light"] .style-card-content,
html[data-theme="light"] .check-tag span,
html[data-theme="light"] .setting-field select,
html[data-theme="light"] .custom-field input,
html[data-theme="light"] .custom-field textarea,
html[data-theme="light"] .secondary-button {
    background: rgba(255,255,255,.67);
}

html[data-theme="light"] .prompt-box {
    background: rgba(21,35,28,.035);
}

html[data-theme="light"] .toast {
    background: rgba(255,255,255,.96);
    color: #15231c;
}

html[data-theme="light"] .generate-button {
    color: #f4fffa;
    background: linear-gradient(135deg, #10b981, #059669);
}