:root {
  color-scheme: light dark;
  --color-primary: #0B6F78;
  --color-primary-hover: #095C64;
  --color-primary-active: #074A51;
  --color-on-primary: #FFFFFF;
  --color-primary-subtle: #E3F1F2;
  --color-focus: #0B6F78;
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F4F6F6;
  --color-neutral-100: #E9EDED;
  --color-neutral-200: #CFD6D6;
  --color-neutral-400: #788383;
  --color-neutral-600: #5C6666;
  --color-neutral-700: #454545;
  --color-neutral-900: #0B0B0B;
  --color-success: #1B6E3E;
  --color-success-bg: #E6F2EA;
  --color-warning: #7A4F00;
  --color-warning-bg: #FAF0DA;
  --color-error: #A61F14;
  --color-error-bg: #FBE9E7;
  --color-info: #1F4E9C;
  --color-info-bg: #E8EEF9;
  --color-chart-1: #0B6F78;
  --color-chart-2: #CC6116;
  --color-chart-3: #2F6FC0;
  --color-chart-4: #5C2A86;
  --color-chart-5: #C94A8F;
  --color-chart-6: #37474F;
  --color-bg: var(--color-neutral-0);
  --color-surface: var(--color-neutral-50);
  --color-surface-sunken: var(--color-neutral-100);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-400);
  --color-text: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-muted: var(--color-neutral-600);
  --color-link: var(--color-primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #3FD0C4;
    --color-primary-hover: #6DDDD3;
    --color-primary-active: #2AB3A8;
    --color-on-primary: #0B0B0B;
    --color-primary-subtle: #12292A;
    --color-focus: #3FD0C4;
    --color-neutral-0: #0E1111;
    --color-neutral-50: #171B1B;
    --color-neutral-100: #1F2525;
    --color-neutral-200: #343A3A;
    --color-neutral-400: #6A7575;
    --color-neutral-600: #9CA5A4;
    --color-neutral-700: #C9CCCB;
    --color-neutral-900: #F2F2F0;
    --color-success: #7FD6A0;
    --color-success-bg: #13261B;
    --color-warning: #F0C66A;
    --color-warning-bg: #2B2210;
    --color-error: #FF9A8F;
    --color-error-bg: #2E1512;
    --color-info: #9DBBF2;
    --color-info-bg: #15203A;
    --color-chart-1: #3FD0C4;
    --color-chart-2: #FF9A4D;
    --color-chart-3: #A8D4FF;
    --color-chart-4: #8F6CFF;
    --color-chart-5: #E0569E;
    --color-chart-6: #EEF1F3;
  }
}
:root[data-theme="dark"] {
  --color-primary: #3FD0C4;
  --color-primary-hover: #6DDDD3;
  --color-primary-active: #2AB3A8;
  --color-on-primary: #0B0B0B;
  --color-primary-subtle: #12292A;
  --color-focus: #3FD0C4;
  --color-neutral-0: #0E1111;
  --color-neutral-50: #171B1B;
  --color-neutral-100: #1F2525;
  --color-neutral-200: #343A3A;
  --color-neutral-400: #6A7575;
  --color-neutral-600: #9CA5A4;
  --color-neutral-700: #C9CCCB;
  --color-neutral-900: #F2F2F0;
  --color-success: #7FD6A0;
  --color-success-bg: #13261B;
  --color-warning: #F0C66A;
  --color-warning-bg: #2B2210;
  --color-error: #FF9A8F;
  --color-error-bg: #2E1512;
  --color-info: #9DBBF2;
  --color-info-bg: #15203A;
  --color-chart-1: #3FD0C4;
  --color-chart-2: #FF9A4D;
  --color-chart-3: #A8D4FF;
  --color-chart-4: #8F6CFF;
  --color-chart-5: #E0569E;
  --color-chart-6: #EEF1F3;
}