/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --color-alert-error: oklch(0.6456 0.2911 24.36);
  --color-alert-info: oklch(0.6669 0.1973 249.91);
  --color-alert-success: oklch(0.7751 0.304 149.19);
  --color-bg-nav: oklch(0.7751 0.304 149.19);
  --color-bg-settings-card: light-dark(#ffffff, #000000);
  --color-bg-site: light-dark(oklch(0.9574 0.0222 149.19), oklch(0.1221 0.0493 146.054));
  --color-direction-add: oklch(0.5985 0.2343 149.19);
  --color-direction-subtract: oklch(0.5632 0.2565 23.82);
  --color-fpo: oklch(0.7103 0.3503 329.82);
  --color-primary: oklch(0.7751 0.304 149.19);
  --color-text-copy: light-dark(oklch(0.1221 0.0493 146.054), oklch(0.9574 0.0222 149.19));
  --color-text-header: light-dark(oklch(0.1221 0.0493 146.054), oklch(0.9574 0.0222 149.19));
  --color-text-nav: color-mix(oklch(0.7751 0.304 149.19) 30%, light-dark(oklch(0.1221 0.0493 146.054), oklch(0.9574 0.0222 149.19)));
  --color-text-nav-on-bar: oklch(0.9574 0.0222 149.19);
  --border-radius-sm: 5px;
  --border-radius-md: 10px;
  --border-radius-lg: 20px;
  --box-shadow-card: 0 10px 20px color-mix(in oklch, #000000 20%, transparent), 0 1px 5px color-mix(in oklch, #000000 30%, transparent);
  --box-shadow-element: 0 9px 16px color-mix(in oklch, #000000 10%, transparent), 0 1px 5px color-mix(in oklch, #000000 20%, transparent);
  --component-setting-chip-color: initial;
  --component-setting-chip-popover-bg: light-dark(oklch(0.9574 0.0222 149.19), oklch(0.1221 0.0493 146.054));
  --component-setting-chip-popover-color: oklch(0.7751 0.304 149.19);
  --component-svg-icon-size: 20px;
  --duration-hover: 0.3s;
  --duration-overlay: 0.15s;
  --font-family-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.3rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 4rem;
  --font-size-3xl: 6rem;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --z-index-alert: 5000;
}

html, body {
  height: stretch;
}

html {
  --color-favorite: attr(data-color-favorite type(<color>), var(--color-primary));
  scrollbar-color: var(--color-favorite, var(--color-primary)) transparent;
  scrollbar-width: thin;
}

body {
  color-scheme: light dark;
  margin: 0;
  background-color: var(--color-bg-site);
  font-family: var(--font-family-default);
  color: var(--color-text-copy);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-hover: 0.01s;
  }
}