/* Botanical Theme: bisher nachgelagerte Gestaltung                           */
/* ========================================================================== */

/* ========================================================================== */
/* Botanical Apothecary Design System                                         */
/* ========================================================================== */

:root {
    --background: #f6f1e5;
    --surface: #fffdf7;
    --surface-raised: #f1eadc;
    --surface-soft: #faf6ed;

    --border: #ddd3c0;
    --border-strong: #a4ae98;

    --text: #243326;
    --text-muted: #6c746a;

    --accent: #55784f;
    --accent-hover: #466943;
    --accent-text: #fffdf5;
    --accent-soft: #e3ebdc;
    --accent-gold: #b49150;
    --accent-plum: #9d7488;

    --danger: #aa5357;
    --danger-hover: #933f44;
    --danger-background: rgba(170, 83, 87, 0.1);

    --success: #507d5c;
    --success-background: rgba(80, 125, 92, 0.12);

    --sidebar-background: #f0ecdf;
    --sidebar-surface: #faf7ee;
    --sidebar-surface-active: #dfe9d7;
    --sidebar-border: #d9d0bd;
    --sidebar-text: #243326;
    --sidebar-muted: #6f766c;
    --sidebar-accent: #55784f;

    --shadow-soft: 0 1.1rem 3rem rgba(66, 67, 52, 0.08);
    --shadow-card: 0 0.6rem 1.8rem rgba(73, 71, 51, 0.055);

    --max-width: 1500px;
    --sidebar-width: 17.25rem;
    --sidebar-collapsed-width: 4.85rem;
}

html[data-theme="dark"] {
    --background: #0c1914;
    --surface: #14241b;
    --surface-raised: #1a2d22;
    --surface-soft: #102019;

    --border: #344b3b;
    --border-strong: #657b67;

    --text: #f0eddd;
    --text-muted: #b1b8ac;

    --accent: #a6c48d;
    --accent-hover: #bad3a6;
    --accent-text: #102018;
    --accent-soft: #263c2d;
    --accent-gold: #d1b06b;
    --accent-plum: #c69aae;

    --danger: #e27d80;
    --danger-hover: #f19497;
    --danger-background: rgba(226, 125, 128, 0.14);

    --success: #86bd91;
    --success-background: rgba(134, 189, 145, 0.14);

    --sidebar-background: #0b1f17;
    --sidebar-surface: #13281e;
    --sidebar-surface-active: #274331;
    --sidebar-border: #2e4938;
    --sidebar-text: #f1eddd;
    --sidebar-muted: #b0bbad;
    --sidebar-accent: #b1cd96;

    --shadow-soft: 0 1.25rem 3.2rem rgba(0, 0, 0, 0.28);
    --shadow-card: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
}

html {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    background:
        radial-gradient(
            circle at 82% 4%,
            color-mix(in srgb, var(--accent-gold) 11%, transparent),
            transparent 25rem
        ),
        radial-gradient(
            circle at 16% 96%,
            color-mix(in srgb, var(--accent) 8%, transparent),
            transparent 29rem
        ),
        var(--background);
}

h1,
h2,
.recipe-header h1,
.cocktail-card-name,
.sidebar-brand {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

h1 {
    font-size: clamp(2.45rem, 4.5vw, 4.15rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
}

h2 {
    font-weight: 600;
}

.button-primary,
.button-secondary,
.button-danger {
    min-height: 2.8rem;
    border-radius: 0.65rem;
    padding-inline: 1.05rem;
    font-size: 0.86rem;
    font-weight: 750;
    box-shadow: none;
}

.button-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-text);
}

.button-primary:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

.button-secondary {
    border-color: var(--border);
    background: var(--surface-soft);
    color: var(--text);
}

.button-secondary:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-hover);
}

input,
textarea,
select {
    border-radius: 0.65rem;
    border-color: var(--border);
    background: var(--surface);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}