/* ==============================
   CarlottaX – Base Design
   ============================== */

/* ---- Design Tokens ---- */
:root {
    --c-bg: #E7E3E2;
    --c-surface: rgba(255, 255, 255, 0.75);
    --c-surface-solid: #ffffff;
    --c-text: #2F1D1E;
    --c-muted: #A29FA3;

    --c-accent: #9A2A53; /* Rosé-Rot */
    --c-accent-2: #325568; /* Glacio-Blaugrün */

    --radius: 14px;
    --shadow: 0 6px 24px rgba(0, 0, 0, .1);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, .18);

    --transition: 0.25s ease;
}

[data-theme="dark"] {
    --c-bg: #1c191a;
    --c-surface: rgba(36, 33, 36, 0.8);
    --c-surface-solid: #242124;
    --c-text: #E7E3E2;
    --c-muted: #A29FA3;
    --shadow: 0 8px 28px rgba(0, 0, 0, .45);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, .6);
}

[data-theme="sakura"] {
    --c-bg: #fff7f9;
    --c-surface: rgba(255, 240, 245, 0.8);
    --c-surface-solid: #fff0f5;
    --c-text: #3a1c2f;
    --c-muted: #c89ba4;

    --c-accent: #e75480; /* Kirschblüten-Rosa */
    --c-accent-2: #7b3f61; /* Dunkles Rotviolett */

    --shadow: 0 6px 24px rgba(231, 84, 128, .15);
    --shadow-lg: 0 12px 36px rgba(231, 84, 128, .25);
}

[data-theme="midnight"] {
    --c-bg: #0f172a;
    --c-surface: rgba(30, 41, 59, 0.85);
    --c-surface-solid: #1e293b;
    --c-text: #e2e8f0;
    --c-muted: #94a3b8;

    --c-accent: #38bdf8; /* Hellblau */
    --c-accent-2: #0ea5e9; /* Glaciales Blau */

    --shadow: 0 6px 24px rgba(14, 165, 233, .2);
    --shadow-lg: 0 12px 36px rgba(14, 165, 233, .35);
}

[data-theme="forest"] {
    --c-bg: #f1f8f5;
    --c-surface: rgba(236, 253, 245, 0.8);
    --c-surface-solid: #ecfdf5;
    --c-text: #064e3b;
    --c-muted: #6b9080;

    --c-accent: #10b981; /* Smaragd */
    --c-accent-2: #047857; /* Tannengrün */

    --shadow: 0 6px 24px rgba(16, 185, 129, .2);
    --shadow-lg: 0 12px 36px rgba(16, 185, 129, .35);
}

[data-theme="sunset"] {
    --c-bg: #fff7ed;
    --c-surface: rgba(255, 237, 213, 0.85);
    --c-surface-solid: #ffedd5;
    --c-text: #431407;
    --c-muted: #fbbf24;

    --c-accent: #f97316; /* Orange */
    --c-accent-2: #dc2626; /* Rot */

    --shadow: 0 6px 24px rgba(249, 115, 22, .2);
    --shadow-lg: 0 12px 36px rgba(220, 38, 38, .35);
}

[data-theme="carlotta"] {
    --c-bg: #E7E3E2; /* weiches, fast seidiges Grau */
    --c-surface: rgba(255, 255, 255, 0.6); /* halbtransparent wie Kristall */
    --c-surface-solid: #fdfdfd; /* reines Eisweiß */
    --c-text: #2F1D1E; /* tiefdunkles Rotbraun */
    --c-muted: #A29FA3; /* dezentes Grau */

    --c-accent: #9A2A53; /* ihr charakteristisches Rosé-Rot */
    --c-accent-2: #325568; /* Glacio-Eisblaugrün */

    --shadow: 0 6px 20px rgba(50, 85, 104, .2);
    --shadow-lg: 0 12px 36px rgba(154, 42, 83, .25);

    /* optionale Extras für das Theme */
    --radius: 16px; /* etwas weicher, wie Schleifen */
}

[data-theme="carlotta-dark"] {
    --c-bg: #1a1415; /* sehr dunkles Rotbraun als Grundfläche */
    --c-surface: rgba(47, 29, 30, 0.8); /* halbtransparentes tiefes Rotbraun */
    --c-surface-solid: #2F1D1E; /* dunkler, fester Hintergrund */
    --c-text: #E7E3E2; /* helles Seidenweiß */
    --c-muted: #A29FA3; /* graue Akzente */

    --c-accent: #9A2A53; /* kräftiges Rosé-Rot → Buttons/Highlights */
    --c-accent-2: #4c7d92; /* etwas helleres Eisblaugrün für Kontraste */

    --shadow: 0 6px 20px rgba(154, 42, 83, .35); /* rötlicher Schatten */
    --shadow-lg: 0 12px 36px rgba(76, 125, 146, .35); /* eisiger Schimmer */

    --radius: 16px; /* bleibt weich, wie Schleifen/Kristallformen */
}

[data-theme="evil-carlotta"] {
    --c-bg: #0b0f1a; /* sehr dunkles, fast schwarzes Nachtblau */
    --c-surface: rgba(20, 24, 38, 0.85); /* tiefes Blau mit Transparenz */
    --c-surface-solid: #141826; /* feste, düstere Fläche */
    --c-text: #dbe7ff; /* eisiges Hellblau für Text */
    --c-muted: #6b7280; /* kühles Grau */

    --c-accent: #4a5fd1; /* kräftiges Königsblau / Eisblau */
    --c-accent-2: #9a2a7a; /* düsteres Violett-Magenta (Augen-Reflex) */

    --shadow: 0 6px 24px rgba(74, 95, 209, .25);
    --shadow-lg: 0 12px 36px rgba(154, 42, 122, .35);

    --radius: 12px; /* etwas kantiger als normales Carlotta, wirkt „schärfer“ */
}

/* ---- Reset ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    min-height: 100%;
}

img {
    max-width: 100%;
    display: block;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
    margin: 0.5em 0;
    font-weight: 700;
    color: var(--c-text);
}

p {
    margin: 0.5em 0;
    line-height: 1.5;
}

a {
    color: var(--c-accent);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--c-accent-2);
}

small {
    font-size: 0.85em;
    color: var(--c-muted);
}

/* ---- Forms ---- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--c-muted);
    background: var(--c-surface-solid);
    color: var(--c-text); /* <<< immer auf Theme-Textfarbe setzen */
    font-size: 0.95rem;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: rgba(0, 0, 0, 0.2);
}

/* Dark Themes Placeholder wird transparenter */
[data-theme*="dark"] input::placeholder,
[data-theme*="dark"] textarea::placeholder {
    color: color-mix(in oklab, var(--c-text) 60%, transparent);
}

/* Light Themes Placeholder bleibt dunkler */
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--c-muted);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(154, 42, 83, 0.25);
}

/* ---- Buttons ---- */
button,
input[type="submit"] {
    padding: 0.65rem 1.2rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s, background var(--transition);
}

.btn-primary {
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--c-surface-solid);
    border: 1px solid var(--c-muted);
    color: var(--c-text);
}

.btn-secondary:hover {
    background: color-mix(in oklab, var(--c-accent) 8%, var(--c-surface-solid));
}

.btn-ghost {
    background: transparent;
    color: var(--c-accent);
}

.btn-ghost:hover {
    background: color-mix(in oklab, var(--c-accent) 12%, transparent);
}

/* ---- Cards & Panels ---- */
.card {
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
    transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.panel {
    background: var(--c-surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

/* ---- Utilities ---- */
.hidden {
    display: none !important;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-muted {
    color: var(--c-muted);
}

.rounded {
    border-radius: var(--radius);
}

/* ---- Accessibility ---- */
:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--c-accent) 60%, white);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- Toasts (global) ---- */
#toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 3000;
}

.toast {
    background: var(--c-surface-solid);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    animation: slideIn 0.3s ease;
}

.toast.success {
    border-left: 4px solid var(--c-accent-2);
}

.toast.error {
    border-left: 4px solid crimson;
}

/* ---- Fix für Select & Option (Dark Themes) ---- */
select {
    background: var(--c-surface-solid);
    color: var(--c-text);
    border: 1px solid var(--c-muted);
}

select option {
    background: var(--c-surface-solid);
    color: var(--c-text);
}

/* Hover/Focus States */
select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(154, 42, 83, 0.25);
}

select option:checked {
    background: var(--c-accent);
    color: #fff;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}