:root,
:host {
  --default-color-space: srgb;
  --default-color-scheme: light;
  --color-accent: var(--color-primary);
  --color-accent-foreground: var(--color-primary-foreground);
  --color-primary: #3b82f6; /* color.blue.500 */
  --color-primary-foreground: var(--color-light);
  --color-main: #171717; /* color.neutral.900 */
  --color-main-foreground: var(--color-body);
  --color-main-primary: var(--color-main);
  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 75%, var(--color-main-foreground));
  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 50%, var(--color-main-foreground));
  --color-body: #fff; /* color.white */
  --color-body-foreground: var(--color-main);
  --color-body-primary: var(--color-body);
  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 95%, var(--color-body-foreground));
  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 90%, var(--color-body-foreground));
  --color-light: #fff; /* color.white */
  --color-light-foreground: var(--color-dark);
  --color-dark: #171717; /* color.neutral.900 */
  --color-dark-foreground: var(--color-light);
  --color-success: #16a34a; /* color.green.600 */
  --color-error: #dc2626; /* color.red.600 */
  --color-warning: #eab308; /* color.yellow.500 */
  --color-info: #0ea5e9; /* color.sky.500 */
}