:root {
  /* Ljust läge */
  --color-bg-primary: #f5f0eb;
  --color-bg-secondary: #ebe3dc;
  --color-border-primary: #d8cec5;

  --color-bg-brand-base: #f9d843;
  --color-text-on-brand-base: #000000;
  --color-text-brand: #6f5d47;
  --color-bg-brand-base-hover: #cbbb9f;

  --color-text-primary: #3b302a;
  --color-text-secondary: #6f625a;
}

[data-color-scheme='dark'] {
  /* Mörkt läge */
  --color-bg-primary: #110c0a;
  --color-bg-secondary: #231b19;
  --color-border-primary: #231b19;

  --color-bg-brand-base: #f9d843;
  --color-text-on-brand-base: #000000;
  --color-text-brand: #cbbb9f;
  --color-bg-brand-base-hover: #cbbb9f;
  --color-bg-brand-softest: #3b2e2a;
  --color-bg-brand-soft: #231b19;
  --color-border-brand-soft: #cbbb9f;

  --color-text-primary: #e5dcd5;
  --color-text-secondary: #a99d94;
}