:root {
  color-scheme: light dark;
  --color-canvas: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-alt: #e8edf2;
  --color-text: #17202a;
  --color-muted: #52606d;
  --color-border: #c8d0d9;
  --color-primary: #8e1b26;
  --color-primary-strong: #68111a;
  --color-on-primary: #ffffff;
  --color-focus: #075985;
  --color-success-bg: #e8f7ee;
  --color-success-text: #165c35;
  --color-info-bg: #e6f2ff;
  --color-info-text: #114f7a;
  --color-warning-bg: #fff4d6;
  --color-warning-text: #744b00;
  --color-danger-bg: #fde8e8;
  --color-danger-text: #8a1c1c;
  --color-neutral-bg: #e8edf2;
  --color-neutral-text: #3f4b57;
  --color-backdrop: rgb(0 0 0 / 65%);
  --color-chrome: #17202a;
  --color-on-chrome: #ffffff;
  --radius-small: 0.35rem;
  --radius-medium: 0.75rem;
  --shadow-card: 0 0.35rem 1.2rem rgb(23 32 42 / 10%);
  --space-1: 0.35rem;
  --space-2: 0.65rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --content-width: 72rem;
}

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

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-canvas: #101216;
  --color-surface: #1a1d23;
  --color-surface-alt: #252a33;
  --color-text: #f2f4f8;
  --color-muted: #c4c9d2;
  --color-border: #858d9a;
  --color-primary: #ffb3b9;
  --color-primary-strong: #ffd8db;
  --color-on-primary: #330509;
  --color-focus: #8dd3ff;
  --color-success-bg: #073d26;
  --color-success-text: #b3f6cc;
  --color-info-bg: #0d3654;
  --color-info-text: #b9e2ff;
  --color-warning-bg: #5a4300;
  --color-warning-text: #ffe4a1;
  --color-danger-bg: #5b1717;
  --color-danger-text: #ffc5c5;
  --color-neutral-bg: #343a44;
  --color-neutral-text: #e1e5eb;
  --color-backdrop: rgb(0 0 0 / 72%);
  --color-chrome: #252a33;
  --color-on-chrome: #f2f4f8;
  --shadow-card: 0 0.45rem 1.5rem rgb(0 0 0 / 35%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-canvas: #101216;
    --color-surface: #1a1d23;
    --color-surface-alt: #252a33;
    --color-text: #f2f4f8;
    --color-muted: #c4c9d2;
    --color-border: #858d9a;
    --color-primary: #ffb3b9;
    --color-primary-strong: #ffd8db;
    --color-on-primary: #330509;
    --color-focus: #8dd3ff;
    --color-success-bg: #073d26;
    --color-success-text: #b3f6cc;
    --color-info-bg: #0d3654;
    --color-info-text: #b9e2ff;
    --color-warning-bg: #5a4300;
    --color-warning-text: #ffe4a1;
    --color-danger-bg: #5b1717;
    --color-danger-text: #ffc5c5;
    --color-neutral-bg: #343a44;
    --color-neutral-text: #e1e5eb;
    --color-backdrop: rgb(0 0 0 / 72%);
    --color-chrome: #252a33;
    --color-on-chrome: #f2f4f8;
    --shadow-card: 0 0.45rem 1.5rem rgb(0 0 0 / 35%);
  }
}

@media (forced-colors: active) {
  :root,
  :root[data-theme='light'],
  :root[data-theme='dark'] {
    --color-canvas: Canvas;
    --color-surface: Canvas;
    --color-surface-alt: Canvas;
    --color-text: CanvasText;
    --color-muted: CanvasText;
    --color-border: CanvasText;
    --color-primary: LinkText;
    --color-primary-strong: LinkText;
    --color-on-primary: Canvas;
    --color-focus: Highlight;
    --color-success-bg: Canvas;
    --color-success-text: CanvasText;
    --color-info-bg: Canvas;
    --color-info-text: CanvasText;
    --color-warning-bg: Canvas;
    --color-warning-text: CanvasText;
    --color-danger-bg: Canvas;
    --color-danger-text: CanvasText;
    --color-neutral-bg: Canvas;
    --color-neutral-text: CanvasText;
    --color-chrome: Canvas;
    --color-on-chrome: CanvasText;
    --shadow-card: none;
  }
}