:root {
    color-scheme: light;

    --bg: #f5f5f5;
    --surface: #ffffff;
    --text: #333333;
    --muted: #666666;
    --border: #dddddd;
    --border-soft: #e4e7eb;
    --primary: #0b5d3b;
    --primary-dark: #083f28;
    --primary-hover: #0a5234;
    --primary-text: #0b5d3b;
    --primary-soft: #e4f1ea;
    --on-primary: #ffffff;
    --link: #0b5d3b;
    --hover: #eeeeee;
    --focus: #0b5d3b;
    --overlay: rgb(0 0 0 / 35%);
    --shadow: rgb(0 0 0 / 18%);
    --shadow-strong: rgb(0 0 0 / 35%);
    --accent: var(--primary);
    --accent-contrast: var(--on-primary);

    --accent-fill: color-mix(in srgb, var(--accent-contrast) 12%, transparent);
    --accent-fill-hover: color-mix(in srgb, var(--accent-contrast) 18%, transparent);
    --accent-fill-focus: color-mix(in srgb, var(--accent-contrast) 20%, transparent);
    --accent-fill-active: color-mix(in srgb, var(--accent-contrast) 22%, transparent);
    --accent-border: color-mix(in srgb, var(--accent-contrast) 35%, transparent);
    --accent-placeholder: color-mix(in srgb, var(--accent-contrast) 72%, transparent);
    --accent-focus: color-mix(in srgb, var(--accent-contrast) 75%, transparent);
    --accent-action-hover: color-mix(in srgb, var(--accent-contrast) 85%, transparent);
    --text-primary: var(--text);
    --text-secondary: var(--muted);
    --field-bg: #ffffff;
    --field-text: #333333;
    --field-border: #dddddd;
    --swatch-border: rgb(0 0 0 / 20%);
    --surface-translucent: rgb(255 255 255 / 80%);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --bg: #1a1a1a;
        --surface: #242424;
        --text: #e0e0e0;
        --muted: #999999;
        --border: #444444;
        --border-soft: #2c343d;
        --primary: #2d8261;
        --primary-dark: #23734f;
        --primary-hover: #267a55;
        --primary-text: #8ed6b0;
        --primary-soft: #1b3328;
        --on-primary: #ffffff;
        --link: #8ed6b0;
        --hover: #2a2a2a;
        --focus: #8ed6b0;
        --overlay: rgb(0 0 0 / 55%);
        --shadow: rgb(0 0 0 / 35%);
        --shadow-strong: rgb(0 0 0 / 50%);
        --field-bg: #1a1a1a;
        --field-text: #e0e0e0;
        --field-border: #444444;
        --swatch-border: rgb(255 255 255 / 25%);
        --surface-translucent: rgb(36 36 36 / 85%);
    }
}