:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    --primary: #527349;
    --primary-hover: #3f5e38;
    --primary-light: rgba(82, 115, 73, 0.12);
    --primary-glow: rgba(82, 115, 73, 0.2);
    --secondary: #d1a85b;
    --accent: #5f8255;
    --accent-warm: #e0b765;

    --background: #111411;
    --background-gradient: none;
    --surface: #191d19;
    --surface-solid: #191d19;
    --surface-elevated: #232823;
    --surface-glass: rgba(255, 255, 255, 0.055);
    --border: #343b34;
    --border-subtle: #292f29;
    --control-border: #4b554b;
    --parent-thumbnail-overlay: rgba(0, 0, 0, 0.55);
    --parent-thumbnail-overlay-hover: rgba(0, 0, 0, 0.7);

    --text-primary: #f4f3ec;
    --text-secondary: #c9cdc5;
    --text-muted: #929b90;
    --text-dim: #687067;

    --error: #b7473f;
    --error-hover: #9f3933;
    --success: #347147;
    --info: #79a8d8;
    --success-fill: #347147;
    --success-fill-hover: #285d39;
    --success-fill-foreground: #ffffff;
    --error-fill: #b7473f;
    --error-fill-hover: #9f3933;
    --error-fill-foreground: #ffffff;

    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.5rem;
    --radius-2xl: 0.625rem;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.38);
    --shadow-glow: none;
    --shadow-glow-strong: none;

    --font-ui: 'Manrope', sans-serif;
    --font-display: 'Fraunces', serif;
    --font-display-weight: 500;
    --control-font-size: 0.875rem;
    --control-font-weight: 500;
    --control-line-height: 1.4;
    --command-button-height: 2.5rem;
    --command-button-height-compact: 2.125rem;
    --command-button-radius: var(--radius-md);
    --command-button-padding-inline: 1rem;
    --command-button-padding-inline-compact: 0.625rem;
    --command-button-gap: 0.375rem;
    --command-button-font-size: var(--control-font-size);
    --command-button-font-size-compact: 0.75rem;
    --command-button-primary-foreground: #ffffff;
    --focus-ring-width: 3px;
    --focus-ring: 0 0 0 var(--focus-ring-width) rgba(142, 174, 127, 0.32);

    --wa-font-family-body: var(--font-ui);
    --wa-font-family-heading: var(--font-display);
    --wa-color-brand-fill-loud: var(--primary);
    --wa-color-brand-on-loud: #ffffff;
    --wa-border-radius-s: var(--radius-sm);
    --wa-border-radius-m: var(--radius-md);
    --wa-border-radius-l: var(--radius-lg);
}

:root[data-theme="light"] {
    color-scheme: light;

    --primary: #527349;
    --primary-hover: #3f5e38;
    --primary-light: rgba(82, 115, 73, 0.12);
    --primary-glow: rgba(82, 115, 73, 0.2);
    --secondary: #9b6e25;
    --accent: #5f8255;
    --accent-warm: #a8792c;

    --background: #f3f2ed;
    --background-gradient: none;
    --surface: #fbfaf6;
    --surface-solid: #fbfaf6;
    --surface-elevated: #ffffff;
    --surface-glass: rgba(22, 31, 22, 0.045);
    --border: #d5d7cf;
    --border-subtle: #e2e3dc;
    --control-border: #a9b0a6;
    --parent-thumbnail-overlay: rgba(0, 0, 0, 0.15);
    --parent-thumbnail-overlay-hover: rgba(0, 0, 0, 0.38);

    --text-primary: #20251f;
    --text-secondary: #4b554a;
    --text-muted: #6f796d;
    --text-dim: #8c9489;

    --error: #b7473f;
    --error-hover: #9f3933;
    --success: #347147;
    --info: #356d9e;
    --success-fill: #347147;
    --success-fill-hover: #285d39;
    --success-fill-foreground: #ffffff;
    --error-fill: #b7473f;
    --error-fill-hover: #9f3933;
    --error-fill-foreground: #ffffff;
    --command-button-primary-foreground: #ffffff;
    --wa-color-brand-on-loud: #ffffff;

    --shadow-sm: 0 1px 2px rgba(29, 37, 28, 0.08);
    --shadow-md: 0 10px 28px rgba(29, 37, 28, 0.11);
    --shadow-lg: 0 22px 60px rgba(29, 37, 28, 0.16);
    --focus-ring: 0 0 0 var(--focus-ring-width) rgba(82, 115, 73, 0.24);
}