/* Gardener theme: fonts, the light and dark palettes and Bulma variables (decisions 2026-10-07,
   "forest and cream" and "the site follows the visitor's light or dark system setting").
   Every colour is a hex token twice: --gd-<name> (light) and --gd-dark-<name> (dark). The dark
   media block points each --gd-<name> at its twin, so the rest of the CSS uses --gd-<name> only.
   tests/unit/static/test_theme_contrast.py checks every text/background pair in both variants.
   Bulma stays on its no-dark-mode build: the coloured components below set their colours
   explicitly, and the dark block sets Bulma's own lightness variables for everything else. */

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../vendor/figtree-5.3.0/figtree-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../vendor/figtree-5.3.0/figtree-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../vendor/bricolage-grotesque-5.3.0/bricolage-grotesque-latin-ext-wght-normal.woff2")
        format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../vendor/bricolage-grotesque-5.3.0/bricolage-grotesque-latin-wght-normal.woff2")
        format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light dark;

    /* Light: forest and cream. */
    --gd-paper: #F7F4EC;
    --gd-surface: #FFFDF8;
    --gd-surface-2: #EFEADF;
    --gd-field: #FFFFFF;
    --gd-canvas: #FBFAF6;
    --gd-ink: #1F2A1E;
    --gd-ink-2: #4A5446;
    --gd-muted: #5C6656;
    --gd-line: #E4DFD2;
    --gd-field-border: #8A8371;
    --gd-primary: #1F4D2E;
    --gd-primary-hover: #163B22;
    --gd-on-primary: #FFFFFF;
    --gd-link: #1F4D2E;
    --gd-brass: #C9A24E;
    --gd-on-brass: #1F2A1E;
    --gd-logo-tile: #1F4D2E;
    --gd-logo-tile-border: #1F4D2E;
    --gd-on-logo-tile: #FFFFFF;
    --gd-on-logo-tile-muted: #C8D6C6;
    --gd-success-bg: #E4EDE2;
    --gd-success-ink: #1F4D2E;
    --gd-info-bg: #E6EEF2;
    --gd-info-ink: #24526B;
    --gd-warning-bg: #F7EFDB;
    --gd-warning-ink: #5E4710;
    --gd-danger-bg: #F6E2DA;
    --gd-danger-ink: #8F3A1E;
    --gd-danger: #A63D1F;
    --gd-on-danger: #FFFFFF;
    --gd-neutral-bg: #ECE6D6;
    --gd-neutral-ink: #3D4739;

    /* Dark: forest and cream at night. */
    --gd-dark-paper: #121815;
    --gd-dark-surface: #1A221D;
    --gd-dark-surface-2: #212B25;
    --gd-dark-field: #121815;
    --gd-dark-canvas: #FBFAF6;
    --gd-dark-ink: #ECE8DD;
    --gd-dark-ink-2: #C2C8BC;
    --gd-dark-muted: #9AA597;
    --gd-dark-line: #2C3830;
    --gd-dark-field-border: #6E7B71;
    --gd-dark-primary: #86C293;
    --gd-dark-primary-hover: #A3D3AD;
    --gd-dark-on-primary: #0E1A12;
    --gd-dark-link: #9BD1A7;
    --gd-dark-brass: #D4B060;
    --gd-dark-on-brass: #1A160C;
    --gd-dark-logo-tile: #1F3626;
    --gd-dark-logo-tile-border: #2E4A36;
    --gd-dark-on-logo-tile: #ECE8DD;
    --gd-dark-on-logo-tile-muted: #B9CDBC;
    --gd-dark-success-bg: #1F3626;
    --gd-dark-success-ink: #A9D9B3;
    --gd-dark-info-bg: #1B2E39;
    --gd-dark-info-ink: #9CC7DE;
    --gd-dark-warning-bg: #33291A;
    --gd-dark-warning-ink: #E8CF8F;
    --gd-dark-danger-bg: #3A221A;
    --gd-dark-danger-ink: #F0AE96;
    --gd-dark-danger: #E38B6F;
    --gd-dark-on-danger: #1A0E09;
    --gd-dark-neutral-bg: #2E2B22;
    --gd-dark-neutral-ink: #D6CFBD;

    --gd-font-text: "Figtree", system-ui, sans-serif;
    --gd-font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
    --gd-shadow: 0 1px 2px rgba(31, 42, 30, 0.06);
    --gd-shadow-raised: 0 1px 2px rgba(31, 42, 30, 0.06), 0 16px 40px -20px rgba(31, 42, 30, 0.25);

    --bulma-family-primary: var(--gd-font-text);
    --bulma-family-secondary: var(--gd-font-display);
    --bulma-body-background-color: var(--gd-paper);
    --bulma-body-color: var(--gd-ink);
    --bulma-text: var(--gd-ink);
    --bulma-text-strong: var(--gd-ink);
    --bulma-scheme-main: var(--gd-surface);
    --bulma-radius-small: 0.375rem;
    --bulma-radius: 0.5rem;
    --bulma-radius-medium: 0.75rem;
    --bulma-radius-large: 1rem;

    --bulma-scheme-h: 45;
    --bulma-scheme-s: 20%;

    --bulma-primary-h: 140deg;
    --bulma-primary-s: 43%;
    --bulma-primary-l: 21%;
    --bulma-link-h: 140deg;
    --bulma-link-s: 43%;
    --bulma-link-l: 21%;

    /* Text in these colours sits on the page: use the palette value, not a Bulma shade. */
    --bulma-link-text: var(--gd-link);
}

@media (prefers-color-scheme: dark) {
    :root {
        --gd-paper: var(--gd-dark-paper);
        --gd-surface: var(--gd-dark-surface);
        --gd-surface-2: var(--gd-dark-surface-2);
        --gd-field: var(--gd-dark-field);
        --gd-canvas: var(--gd-dark-canvas);
        --gd-ink: var(--gd-dark-ink);
        --gd-ink-2: var(--gd-dark-ink-2);
        --gd-muted: var(--gd-dark-muted);
        --gd-line: var(--gd-dark-line);
        --gd-field-border: var(--gd-dark-field-border);
        --gd-primary: var(--gd-dark-primary);
        --gd-primary-hover: var(--gd-dark-primary-hover);
        --gd-on-primary: var(--gd-dark-on-primary);
        --gd-link: var(--gd-dark-link);
        --gd-brass: var(--gd-dark-brass);
        --gd-on-brass: var(--gd-dark-on-brass);
        --gd-logo-tile: var(--gd-dark-logo-tile);
        --gd-logo-tile-border: var(--gd-dark-logo-tile-border);
        --gd-on-logo-tile: var(--gd-dark-on-logo-tile);
        --gd-on-logo-tile-muted: var(--gd-dark-on-logo-tile-muted);
        --gd-success-bg: var(--gd-dark-success-bg);
        --gd-success-ink: var(--gd-dark-success-ink);
        --gd-info-bg: var(--gd-dark-info-bg);
        --gd-info-ink: var(--gd-dark-info-ink);
        --gd-warning-bg: var(--gd-dark-warning-bg);
        --gd-warning-ink: var(--gd-dark-warning-ink);
        --gd-danger-bg: var(--gd-dark-danger-bg);
        --gd-danger-ink: var(--gd-dark-danger-ink);
        --gd-danger: var(--gd-dark-danger);
        --gd-on-danger: var(--gd-dark-on-danger);
        --gd-neutral-bg: var(--gd-dark-neutral-bg);
        --gd-neutral-ink: var(--gd-dark-neutral-ink);

        --gd-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        --gd-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 48px -20px rgba(0, 0, 0, 0.6);

        /* Bulma's own dark lightness values (its themes/dark), on the forest hue. */
        --bulma-scheme-h: 140;
        --bulma-scheme-s: 12%;
        --bulma-scheme-brightness: dark;
        --bulma-scheme-main-l: 9%;
        --bulma-scheme-main-bis-l: 11%;
        --bulma-scheme-main-ter-l: 13%;
        --bulma-background-l: 14%;
        --bulma-border-weak-l: 21%;
        --bulma-border-l: 24%;
        --bulma-text-weak-l: 53%;
        --bulma-text-strong-l: 93%;
        --bulma-text-title-l: 100%;
        --bulma-scheme-invert-ter-l: 100%;
        --bulma-scheme-invert-bis-l: 98%;
        --bulma-scheme-invert-l: 96%;
        --bulma-hover-background-l-delta: 5%;
        --bulma-active-background-l-delta: 10%;
        --bulma-hover-border-l-delta: 10%;
        --bulma-active-border-l-delta: 20%;
        --bulma-hover-color-l-delta: 5%;
        --bulma-active-color-l-delta: 10%;
        --bulma-primary-l: 64%;
        --bulma-link-l: 64%;
    }
}

/* Bulma's display rules (.box, .label, .notification, .select) would beat the hidden attribute. */
[hidden] {
    display: none !important;
}

.select:has(> select[hidden]) {
    display: none;
}

html {
    background-color: var(--gd-paper);
    accent-color: var(--gd-primary);
}

body {
    background-color: var(--gd-paper);
    color: var(--gd-ink);
    font-family: var(--gd-font-text);
}

h1, h2, h3, h4, .title, .site-name {
    font-family: var(--gd-font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--gd-ink);
}

.title.is-1, .title.is-2, .title.is-3 {
    letter-spacing: -0.025em;
}

.subtitle {
    color: var(--gd-ink-2);
}

.title, .subtitle, .card .title, .navbar-item {
    overflow-wrap: anywhere;
}

strong {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--gd-primary);
    outline-offset: 2px;
}

/* Surfaces. */
.box, .card {
    background-color: var(--gd-surface);
    color: var(--gd-ink);
    border: 1px solid var(--gd-line);
    box-shadow: var(--gd-shadow);
}

.card-content .title {
    color: var(--gd-ink);
}

hr {
    background-color: var(--gd-line);
}

/* Buttons: 8 px corners; the main action is the filled primary button. */
.button {
    border-radius: var(--bulma-radius);
    border-color: var(--gd-field-border);
    background-color: var(--gd-surface);
    color: var(--gd-ink);
    font-weight: 600;
}

.button:hover {
    border-color: var(--gd-ink-2);
    color: var(--gd-ink);
}

.button.is-primary, .button.is-success {
    border-color: transparent;
    background-color: var(--gd-primary);
    color: var(--gd-on-primary);
}

.button.is-primary:hover, .button.is-success:hover {
    background-color: var(--gd-primary-hover);
    color: var(--gd-on-primary);
}

.button.is-primary.is-outlined {
    border-color: var(--gd-primary);
    background-color: transparent;
    color: var(--gd-primary);
}

.button.is-primary.is-outlined:hover {
    background-color: var(--gd-primary);
    color: var(--gd-on-primary);
}

.button.is-warning {
    border-color: transparent;
    background-color: var(--gd-brass);
    color: var(--gd-on-brass);
}

.button.is-danger {
    border-color: transparent;
    background-color: var(--gd-danger);
    color: var(--gd-on-danger);
}

.button.is-danger.is-outlined {
    border-color: var(--gd-danger-ink);
    background-color: transparent;
    color: var(--gd-danger-ink);
}

.button.is-text {
    border-color: transparent;
    background-color: transparent;
    color: var(--gd-ink-2);
    text-decoration: none;
}

.button.is-text:hover {
    background-color: var(--gd-surface-2);
    color: var(--gd-ink);
}

.button[disabled], fieldset[disabled] .button {
    opacity: 0.45;
}

/* Tags and notifications: soft tints in light, dark tints in dark. */
.tag {
    background-color: var(--gd-neutral-bg);
    color: var(--gd-neutral-ink);
    font-weight: 600;
}

.tag.is-primary, .tag.is-success {
    background-color: var(--gd-success-bg);
    color: var(--gd-success-ink);
}

.tag.is-info {
    background-color: var(--gd-info-bg);
    color: var(--gd-info-ink);
}

.tag.is-warning {
    background-color: var(--gd-warning-bg);
    color: var(--gd-warning-ink);
}

.tag.is-danger {
    background-color: var(--gd-danger-bg);
    color: var(--gd-danger-ink);
}

.notification {
    background-color: var(--gd-surface-2);
    color: var(--gd-ink);
}

.notification.is-primary, .notification.is-success {
    background-color: var(--gd-success-bg);
    color: var(--gd-success-ink);
}

.notification.is-info {
    background-color: var(--gd-info-bg);
    color: var(--gd-info-ink);
}

.notification.is-warning {
    background-color: var(--gd-warning-bg);
    color: var(--gd-warning-ink);
}

.notification.is-danger {
    background-color: var(--gd-danger-bg);
    color: var(--gd-danger-ink);
}

.notification a:not(.button) {
    color: inherit;
}

.progress {
    --bulma-progress-bar-background-color: var(--gd-line);
    --bulma-progress-value-background-color: var(--gd-primary);
    --bulma-progress-indeterminate-duration: 1.5s;
}

.progress::-webkit-progress-value {
    background-color: var(--gd-primary);
}

.progress:indeterminate {
    background-color: var(--gd-line);
    background-image: linear-gradient(to right, var(--gd-primary) 30%, var(--gd-line) 30%);
}

/* Form fields. */
.label {
    color: var(--gd-ink);
}

.input, .textarea, .select select {
    border-color: var(--gd-field-border);
    background-color: var(--gd-field);
    color: var(--gd-ink);
    box-shadow: none;
}

.input::placeholder, .textarea::placeholder {
    color: var(--gd-muted);
}

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

.input.is-danger, .textarea.is-danger {
    border-color: var(--gd-danger-ink);
}

.select:not(.is-multiple):not(.is-loading)::after {
    border-color: var(--gd-ink-2);
}

.file-cta, .file-name {
    border-color: var(--gd-field-border);
    background-color: var(--gd-field);
    color: var(--gd-ink);
}

/* Links. */
a:not(.button):not(.navbar-item):not(.card) {
    color: var(--gd-link);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.help, .has-text-grey {
    color: var(--gd-muted) !important;
}

.help.is-danger {
    color: var(--gd-danger-ink) !important;
}

.content, .content strong, .content h1, .content h2, .content h3 {
    color: var(--gd-ink);
}

.table {
    background-color: var(--gd-surface);
    color: var(--gd-ink);
}

.table th, .table thead th {
    color: var(--gd-ink);
}

.table td, .table th {
    border-color: var(--gd-line);
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: var(--gd-surface-2);
}

.table.is-hoverable tbody tr:not(.is-selected):hover {
    background-color: var(--gd-success-bg);
}