:root {
  color-scheme: light;
  --brand-plum: #4b1f4f;
  --brand-plum-deep: #1b0b22;
  --brand-gold: #f6bf3c;
  --brand-amber: #c87816;
  --brand-teal: #087f7a;
  --brand-hibiscus: #db3f24;
  --brand-cream: #fff7e8;
  --brand-surface: #fffdf8;
  --brand-surface-raised: #ffffff;
  --brand-surface-dark: #24112b;
  --brand-text: #24162a;
  --brand-text-dark: #fff8eb;
  --brand-muted: #6f6372;
  --brand-border: #dfd3c4;
  --success: #237a57;
  --warning: #9a6410;
  --danger: #a93434;
  --brand-focus: #0b8f88;
  --brand-shadow: 0 16px 44px rgb(27 11 34 / 12%);
  --brand-radius: 18px;
  --brand-shell-surface: #fff7e8;
  --brand-shell-raised: #fffdf8;
  --brand-shell-text: #24162a;
  --brand-shell-muted: #655869;
  --brand-shell-border: #d9c9b5;
  --brand-shell-gradient: linear-gradient(120deg, #fffaf0, #f8ead4 72%, #e5f2ed);
  --brand-hero-gradient: radial-gradient(circle at 84% 30%, rgb(8 127 122 / 13%), transparent 35%), radial-gradient(circle at 18% 72%, rgb(246 191 60 / 18%), transparent 30%), linear-gradient(180deg, #fffaf0, #fff7e8);
  --brand-nav-surface: #f7ecd9;
  --brand-nav-text: #35203b;
  --brand-nav-muted: #6f6372;
  --brand-nav-border: #d8c8b5;
  --brand-nav-hover: rgb(75 31 79 / 8%);
  --brand-nav-active: linear-gradient(90deg, rgb(200 120 22 / 18%), rgb(8 127 122 / 10%));
  --brand-nav-gradient: linear-gradient(180deg, #fff8ec, #f5ead9 72%, #e8f2ee);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-surface: #170b1d;
  --brand-surface-raised: #25132d;
  --brand-text: #fff8eb;
  --brand-muted: #cbbdd0;
  --brand-border: #563a5c;
  --success: #74d4a6;
  --warning: #f2c46c;
  --danger: #ff8c83;
  --brand-shadow: 0 18px 52px rgb(0 0 0 / 36%);
  --brand-shell-surface: #1b0b22;
  --brand-shell-raised: #25132d;
  --brand-shell-text: #fff8eb;
  --brand-shell-muted: #cbbdd0;
  --brand-shell-border: #563a5c;
  --brand-shell-gradient: linear-gradient(120deg, #17091d, #34113b 72%, #123737);
  --brand-hero-gradient: radial-gradient(circle at 84% 30%, rgb(8 127 122 / 25%), transparent 35%), radial-gradient(circle at 18% 72%, rgb(219 63 36 / 10%), transparent 28%);
  --brand-nav-surface: #25102c;
  --brand-nav-text: #fff8eb;
  --brand-nav-muted: #cbbdd0;
  --brand-nav-border: rgb(255 255 255 / 12%);
  --brand-nav-hover: rgb(255 255 255 / 7%);
  --brand-nav-active: linear-gradient(90deg, rgb(246 191 60 / 22%), rgb(8 127 122 / 11%));
  --brand-nav-gradient: linear-gradient(180deg, #25102c, #170b1d 72%, #102d2c);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand-surface: #170b1d;
    --brand-surface-raised: #25132d;
    --brand-text: #fff8eb;
    --brand-muted: #cbbdd0;
    --brand-border: #563a5c;
    --success: #74d4a6;
    --warning: #f2c46c;
    --danger: #ff8c83;
    --brand-shadow: 0 18px 52px rgb(0 0 0 / 36%);
    --brand-shell-surface: #1b0b22;
    --brand-shell-raised: #25132d;
    --brand-shell-text: #fff8eb;
    --brand-shell-muted: #cbbdd0;
    --brand-shell-border: #563a5c;
    --brand-shell-gradient: linear-gradient(120deg, #17091d, #34113b 72%, #123737);
    --brand-hero-gradient: radial-gradient(circle at 84% 30%, rgb(8 127 122 / 25%), transparent 35%), radial-gradient(circle at 18% 72%, rgb(219 63 36 / 10%), transparent 28%);
    --brand-nav-surface: #25102c;
    --brand-nav-text: #fff8eb;
    --brand-nav-muted: #cbbdd0;
    --brand-nav-border: rgb(255 255 255 / 12%);
    --brand-nav-hover: rgb(255 255 255 / 7%);
    --brand-nav-active: linear-gradient(90deg, rgb(246 191 60 / 22%), rgb(8 127 122 / 11%));
    --brand-nav-gradient: linear-gradient(180deg, #25102c, #170b1d 72%, #102d2c);
  }
}