:root {
  color-scheme: light;
  --color-primary: #4A2C2A;
  --color-primary-hover: #623A35;
  --color-accent: #D9902F;
  --color-on-accent: #251710;
  --color-accent-text: #9A5412;
  --color-accent-soft: #F3C46B;
  --color-background: #FAF4E8;
  --color-surface: #FFFDF8;
  --color-surface-elevated: #F6EAD7;
  --color-text-primary: #1E1714;
  --color-text-secondary: #6E6259;
  --color-border: #E6D8C3;
  --color-error: #C94A3A;
  --color-player-progress: #D9902F;
  --color-player-progress-background: #E6D8C3;
  --color-bookmark: #D9902F;
  --color-folder-icon: #D9902F;
  --color-active-control: #4A2C2A;
  --color-inactive-control: #6E6259;
  --shadow-elevated: 0 24px 60px rgba(74, 44, 42, 0.16);
  --color-focus-ring: var(--color-accent-text);
}

[data-theme='dark'] {
  color-scheme: dark;
  --color-primary: #E0A13A;
  --color-primary-hover: #F0BC5E;
  --color-accent: #FFB84D;
  --color-accent-text: #FFB84D;
  --color-accent-soft: #F0BC5E;
  --color-background: #15110F;
  --color-surface: #211816;
  --color-surface-elevated: #2B201C;
  --color-text-primary: #F8EFE2;
  --color-text-secondary: #C8B8A3;
  --color-border: #3A2B25;
  --color-error: #FF6F5E;
  --color-player-progress: #FFB84D;
  --color-player-progress-background: #3A2B25;
  --color-bookmark: #FFB84D;
  --color-folder-icon: #FFB84D;
  --color-active-control: #E0A13A;
  --color-inactive-control: #C8B8A3;
  --shadow-elevated: 0 24px 60px rgba(0, 0, 0, 0.32);
  --color-focus-ring: var(--color-accent-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --color-primary: #E0A13A;
    --color-primary-hover: #F0BC5E;
    --color-accent: #FFB84D;
    --color-accent-text: #FFB84D;
    --color-accent-soft: #F0BC5E;
    --color-background: #15110F;
    --color-surface: #211816;
    --color-surface-elevated: #2B201C;
    --color-text-primary: #F8EFE2;
    --color-text-secondary: #C8B8A3;
    --color-border: #3A2B25;
    --color-error: #FF6F5E;
    --color-player-progress: #FFB84D;
    --color-player-progress-background: #3A2B25;
    --color-bookmark: #FFB84D;
    --color-folder-icon: #FFB84D;
    --color-active-control: #E0A13A;
    --color-inactive-control: #C8B8A3;
    --shadow-elevated: 0 24px 60px rgba(0, 0, 0, 0.32);
    --color-focus-ring: var(--color-accent-text);
  }
}