/* Base styles */
:root {
  font-family: system-ui;
  font-size: 14px;
  line-height: 1.5;
  background: var(--background-color);
}

/* color themes for dark and light modes, generated with Leonardo.
 * Light: https://leonardocolor.io/theme.html?name=Light&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A98%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
:root {
  --background-color: #f8f8f8;
  --gray-50: #ffffff;
  --gray-100: #d0d0d0;
  --gray-200: #afafaf;
  --gray-300: #8f8f8f;
  --gray-400: #717171;
  --gray-500: #555555;
  --gray-600: #393939;
  --purple-100: #d5c9fa;
  --purple-200: #b8a3f6;
  --purple-300: #997cf2;
  --purple-400: #7a54ef;
  --purple-500: #582ddc;
  --purple-600: #3c1e95;
  --red-100: #f7c4ba;
  --red-200: #f29887;
  --red-300: #eb664d;
  --red-400: #de2300;
  --red-500: #a81b00;
  --red-600: #731200;
  --highlight-hover: rgb(0 0 0 / 0.07);
  --highlight-pressed: rgb(0 0 0 / 0.15);
}

/* Dark: https://leonardocolor.io/theme.html?name=Dark&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Purple%22%2C%22colorKeys%22%3A%5B%22%235e30eb%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%2C%7B%22name%22%3A%22Red%22%2C%22colorKeys%22%3A%5B%22%23e32400%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%22-1.12%22%2C%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A11%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1d1d1d;
    --gray-50: #101010;
    --gray-100: #393939;
    --gray-200: #4f4f4f;
    --gray-300: #686868;
    --gray-400: #848484;
    --gray-500: #a7a7a7;
    --gray-600: #cfcfcf;
    --purple-100: #3c1e95;
    --purple-200: #522acd;
    --purple-300: #6f46ed;
    --purple-400: #8e6ef1;
    --purple-500: #b099f5;
    --purple-600: #d5c8fa;
    --red-100: #721200;
    --red-200: #9c1900;
    --red-300: #cc2000;
    --red-400: #e95034;
    --red-500: #f08c79;
    --red-600: #f7c3ba;
    --highlight-hover: rgb(255 255 255 / 0.1);
    --highlight-pressed: rgb(255 255 255 / 0.2);
  }
}

/* Semantic colors */
:root {
  --focus-ring-color: var(--purple-400);
  --text-color: var(--gray-600);
  --text-color-base: var(--gray-500);
  --text-color-hover: var(--gray-600);
  --text-color-disabled: var(--gray-200);
  --text-color-placeholder: var(--gray-400);
  --link-color: var(--purple-500);
  --link-color-secondary: var(--gray-500);
  --link-color-pressed: var(--purple-600);
  --border-color: var(--gray-300);
  --border-color-hover: var(--gray-400);
  --border-color-pressed: var(--gray-400);
  --border-color-disabled: var(--gray-100);
  --field-background: var(--gray-50);
  --field-text-color: var(--gray-600);
  --overlay-background: var(--gray-50);
  --button-background: var(--gray-50);
  --button-background-pressed: var(--background-color);
  /* these colors are the same between light and dark themes
   * to ensure contrast with the foreground color */
  --highlight-background: #6f46ed; /* purple-300 from dark theme, 3.03:1 against background-color */
  --highlight-background-pressed: #522acd; /* purple-200 from dark theme */
  --highlight-background-invalid: #cc2000; /* red-300 from dark theme */
  --highlight-foreground: white; /* 5.56:1 against highlight-background */
  --highlight-foreground-pressed: #ddd;
  --highlight-overlay: rgb(from #6f46ed r g b / 15%);
  --invalid-color: var(--red-400);
  --invalid-color-pressed: var(--red-500);
}

/* Windows high contrast mode overrides */
@media (forced-colors: active) {
  :root {
    --background-color: Canvas;
    --focus-ring-color: Highlight;
    --text-color: ButtonText;
    --text-color-base: ButtonText;
    --text-color-hover: ButtonText;
    --text-color-disabled: GrayText;
    --text-color-placeholder: ButtonText;
    --link-color: LinkText;
    --link-color-secondary: LinkText;
    --link-color-pressed: LinkText;
    --border-color: ButtonBorder;
    --border-color-hover: ButtonBorder;
    --border-color-pressed: ButtonBorder;
    --border-color-disabled: GrayText;
    --field-background: Field;
    --field-text-color: FieldText;
    --overlay-background: Canvas;
    --button-background: ButtonFace;
    --button-background-pressed: ButtonFace;
    --highlight-background: Highlight;
    --highlight-background-pressed: Highlight;
    --highlight-background-invalid: LinkText;
    --highlight-foreground: HighlightText;
    --highlight-foreground-pressed: HighlightText;
    --invalid-color: LinkText;
    --invalid-color-pressed: LinkText;
  }
}

