:root {
  --color-bg-page: #ffffff;
  --color-bg-subtle: #f7f7f7;
  --color-bg-accent: #f3f3f3;
  --color-bg-raised: #ffffff;
  --color-text-primary: #313131;
  --color-text-secondary: #686868;
  --color-text-accent: #636363;
  --color-action-fill: #686868;
  --color-action-fill-hover: #505050;
  --color-action-on-fill: #ffffff;
  --color-border-control: #888888;
  --color-border-decor: #dddddd;
  --color-border-focus: #636363;
  --color-brand-surface: #505050;
  --color-brand-on-surface: #ffffff;
  --color-brand-soft: #f0f0f0;
  --color-brand-highlight: #a3cffe;
  --color-shadow: #161616;
  --color-brand-on-highlight: #393939;
  --color-status-negative-fg: #b93e38;
  --color-status-negative-bg: #ffefed;
  --color-status-warning-fg: #a94f09;
  --color-status-warning-bg: #fff0e8;
  --color-status-positive-fg: #067937;
  --color-status-positive-bg: #e6fae9;
  --color-status-info-fg: #086bb8;
  --color-status-info-bg: #ebf5ff;
  --color-series-1: #4394e1;
  --color-series-2: #af7ad4;
  --color-series-3: #dc6d82;
  --color-series-4: #c8800e;
  --color-series-5: #6f9d37;
  --color-series-6: #0ea09a;
  --color-sequential-1: #dedede;
  --color-sequential-2: #b1b1b1;
  --color-sequential-3: #868686;
  --color-sequential-4: #5d5d5d;
  --color-sequential-5: #383838;
  --shadow-1: 0px 1px 3px color-mix(in srgb, var(--color-shadow) 12%, transparent);
  --shadow-2: 0px 4px 12px color-mix(in srgb, var(--color-shadow) 14%, transparent);
  --shadow-3: 0px 12px 32px color-mix(in srgb, var(--color-shadow) 18%, transparent);
  --font-base:
    "Helvetica Neue",
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;
  --radius: 2px;
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-full: 999px;
  color-scheme: light;
}
:root[data-mode=dark] {
  --color-bg-page: #121212;
  --color-bg-subtle: #191919;
  --color-bg-accent: #1e1e1e;
  --color-bg-raised: #222222;
  --color-text-primary: #e9e9e9;
  --color-text-secondary: #989898;
  --color-text-accent: #9f9f9f;
  --color-action-fill: #989898;
  --color-action-fill-hover: #b8b8b8;
  --color-action-on-fill: #121212;
  --color-border-control: #767676;
  --color-border-decor: #383838;
  --color-border-focus: #9f9f9f;
  --color-brand-surface: #333333;
  --color-brand-on-surface: #ffffff;
  --color-brand-soft: #1e1e1e;
  --color-brand-highlight: #7dbdfe;
  --color-shadow: #000000;
  --color-brand-on-highlight: #2c2c2c;
  --color-status-negative-fg: #e7786d;
  --color-status-negative-bg: #311b18;
  --color-status-warning-fg: #e07f44;
  --color-status-warning-bg: #2f1d12;
  --color-status-positive-fg: #48ab63;
  --color-status-positive-bg: #152619;
  --color-status-info-fg: #4c9dea;
  --color-status-info-bg: #142332;
  --color-series-1: #0968b1;
  --color-series-2: #824fa5;
  --color-series-3: #ab4058;
  --color-series-4: #8d5a07;
  --color-series-5: #487000;
  --color-series-6: #07716c;
  --color-sequential-1: #3a3a3a;
  --color-sequential-2: #5d5d5d;
  --color-sequential-3: #838383;
  --color-sequential-4: #ababab;
  --color-sequential-5: #d4d4d4;
  --shadow-1: 0px 1px 3px color-mix(in srgb, var(--color-shadow) 24%, transparent);
  --shadow-2: 0px 4px 12px color-mix(in srgb, var(--color-shadow) 28%, transparent);
  --shadow-3: 0px 12px 32px color-mix(in srgb, var(--color-shadow) 36%, transparent);
  color-scheme: dark;
}