/* 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);
    --danger-border: #d78a83;
    --danger-text: #a33d37;

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

    /* Warnung war bisher kein Token: Bauteile trugen zwei verschiedene
       Ambertöne als feste Rückfallwerte, und der hellere davon stand als
       Schrift auf hellem Grund — kaum lesbar. Beide Werte kamen aus dem Code,
       sie gehörten nur in verschiedene Modi. */
    --warning: #b36b00;
    --warning-border: rgba(179, 107, 0, 0.45);
    --warning-surface: rgba(179, 107, 0, 0.1);

    /* Eisiges Blaugrau der Serviereis-Symbole. */
    --ice-accent: #9eb7bd;

    /* Neutrale Meldung, etwa „Backup zurückgespielt" im Änderungsprotokoll.
       Beide Werte standen schon im Code: das Blau der Today-Kategorien für
       hellen Grund, das hellere aus dem Protokoll für dunklen. */
    --info: #4f758a;

    /* Kategorien im Tagesbetrieb. Sie standen bisher nur in
       `daily-operations.css` und galten in beiden Modi gleich — auf dunklem
       Grund waren sie stumpf. Die Dunkelwerte folgen derselben Regel wie die
       übrige Palette: heller und etwas satter, Farbton unverändert. */
    --today-green: #4f765f;
    --today-amber: #b5762f;
    --today-red: #b34d47;
    --today-prep: #4f758a;
    --today-handover: #76609a;
    --today-instruction: #9a653d;
    --today-production: #52735e;
    --today-purchasing: #8d7143;
    --today-inventory: #556f8a;
    --today-general: #70757a;

    --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);
    --danger-border: #6f3c3e;
    --danger-text: #e8969a;

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

    --warning: #d8aa57;
    --warning-border: rgba(216, 170, 87, 0.4);
    --warning-surface: rgba(216, 170, 87, 0.14);

    --ice-accent: #b9d2d8;

    --info: #9eb8e8;

    --today-green: #81c39c;
    --today-amber: #ecb578;
    --today-red: #e49a96;
    --today-prep: #89b7d0;
    --today-handover: #b6a3d7;
    --today-instruction: #dda47a;
    --today-production: #84c19a;
    --today-purchasing: #d5b37b;
    --today-inventory: #90afcf;
    --today-general: #b2b5b8;

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