:root {
    color-scheme: light;
    --color-earth-100: #DAD7CD;
    --color-earth-300: #A3B18A;
    --color-earth-600: #588157;
    --color-earth-700: #3A5A40;
    --color-earth-800: #344E41;
    --color-white: #ffffff;
    --color-ink: #20271F;
    --color-ink-muted: #6B7268;
    --color-warning: #8a5b00;
    --color-danger: #b23b3b;
    --color-focus: #4E8C57;
    --color-accent-rgb: 78, 140, 87;
    --color-danger-rgb: 178, 59, 59;
    --color-shadow-rgb: 30, 41, 28;
    --color-backdrop-rgb: 32, 39, 31;
    --color-black-rgb: 0, 0, 0;
    --color-error-background: color-mix(in srgb, var(--color-warning) 12%, var(--color-white));

    --surface-base: #E4E8DF;
    --surface-main: #F1F4EC;
    --surface-panel: #E9ECE3;
    --surface-muted: #DBE0D3;
    --surface-strong: var(--color-ink);
    --text-main: var(--color-ink);
    --text-muted: var(--color-ink-muted);
    --line: #CFD6C7;
    --line-strong: #B9C2AD;
    --accent: #4E8C57;
    --accent-strong: #3A5A40;
    --accent-soft: rgba(var(--color-accent-rgb), 0.13);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --danger-soft: rgba(var(--color-danger-rgb), 0.10);
    --focus: var(--color-focus);
    --on-accent: var(--color-white);
    --on-accent-strong: var(--color-white);
    --on-danger: var(--color-white);
    --modal-backdrop: rgba(var(--color-backdrop-rgb), 0.40);
    --error-background: var(--color-error-background);
    --error-shadow: rgba(var(--color-black-rgb), 0.18);
    --reconnect-button: var(--accent);
    --reconnect-button-hover: var(--accent-strong);
    --reconnect-spinner: var(--accent);
    --scrollbar-track: transparent;
    --scrollbar-thumb: #D5DACE;
    --scrollbar-thumb-hover: #B9C0B0;

    --shadow-1: 0 1px 2px rgba(var(--color-shadow-rgb), 0.05);
    --shadow-2: 0 8px 28px rgba(var(--color-shadow-rgb), 0.14);
}