/* Global theme config. Loaded before styles.css; keep site-wide
   design tokens here. Light is the default; dark mode (Tier A)
   follows the OS setting via prefers-color-scheme. */
:root {
    --text: #111;
    --bg: #fff;
    --button: #222;
    --button-text: #fff;
    --button-hover: #333;
    --availability-off: #f7c94b;
    --availability-off-text: #2a2100;
    --availability-on: #2f9e5b;
    --availability-on-text: #fff;
    --panel: color-mix(in srgb, var(--text) 3%, var(--bg));
    --calendar-selected: var(--button);
    --calendar-selected-text: var(--button-text);
    --calendar-hover: color-mix(in srgb, var(--text) 8%, var(--bg));

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: #eee;
        --bg: #111;
        --button: #ddd;
        --button-text: #111;
        --button-hover: #ccc;
        --availability-off: #a77d12;
        --availability-off-text: #fff6d5;
        --availability-on: #287d4a;
        --availability-on-text: #fff;
        --panel: color-mix(in srgb, var(--text) 6%, var(--bg));
        --calendar-selected: var(--button);
        --calendar-selected-text: var(--button-text);
        --calendar-hover: color-mix(in srgb, var(--text) 12%, var(--bg));
        color-scheme: dark;
    }
}