@layer base-config, user-config;

@layer base-config {
  :root,
  :host {
    --untoast-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23ac1616" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" class="toast-icon" viewBox="0 0 24 24"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>');
    --toast-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23ac1616" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" class="toast-icon" viewBox="0 0 24 24"><path d="m14.479 19.374-.971.939a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5a5.2 5.2 0 0 1-.219 1.49M15 15h6m-3-3v6"/></svg>');
    --body-line-height: 1.3;

    /* 18px at 320px viewport */
    /* 21px at 1920px viewport */
    --font-size: clamp(1.125rem, 1.0875rem + 0.1875vw, 1.3125rem);

    --body-width: min(80ch, calc(70% + 100px));
  }

  @media (prefers-color-scheme: dark) {
    :root,
    :host {
      color-scheme: dark;

      /** Catppuccin blue */
      --color-primary: hsl(217deg 92% 76%);
      --color-hover: lch(from var(--color-primary) calc(l + 20) c h);
      --color-visited: lch(from var(--color-primary) l calc(c + 10) h);

      /** Catppuccin surface 0 */
      --color-bg-alt: hsl(237deg 16% 23%);

      /** Catppuccin base */
      --color-bg: rgb(30, 30, 46);

      /* Catppuccin text */
      --color-text: hsl(226deg 64% 88%);

      /** Catppuccin Rosewater */
      --color-secondary: hsl(267deg 84% 81%);
      --color-headline: var(--color-text);
      --color-h1: var(--color-text);

      /* Catppuccin subtext 1 */
      --color-h2: hsl(227deg 35% 80%);
      --color-h3: var(--color-h2);
      --color-h4: var(--color-h2);

      /* Catppuccin subtext 0 */
      --color-h5: hsl(228deg 24% 72%);
      --color-h6: var(--color-h5);

      /* stylelint-disable-next-line value-keyword-case */
      --font-family-base:
        optima, candara, 'Noto Sans', source-sans-pro, sans-serif;
      --font-family-heading: var(--font-family-base);
      --nav-margin: 4vh;

      --button-color-bg: var(--color-bg-alt);

      /* Color of <code> blocks. Catppuccin green */
      --color-code: hsl(115deg, 54%, 76%);

      /* Catppuccin surface 1 */
      --button-color-hover-bg: hsl(234deg, 13%, 31%);
    }
  }

  @media (prefers-color-scheme: light) {
    :root,
    :host {
      color-scheme: dark;

      /** Catppuccin blue */
      --color-primary: hsl(220deg 91% 54%);
      --color-hover: lch(from var(--color-primary) calc(l + 20) c h);
      --color-visited: lch(from var(--color-primary) l calc(c + 10) h);

      /** Catppuccin surface 0 */
      --color-bg-alt: hsl(223deg 16% 83%);

      /** Catppuccin crust */
      --color-bg: rgb(239, 241, 245);

      /* Catppuccin text */
      --color-text: hsl(234deg 16% 35%);

      /** Catppuccin Rosewater */
      --color-secondary: hsl(266deg 85% 58%);
      --color-headline: var(--color-text);
      --color-h1: var(--color-text);

      /* Catppuccin subtext 1 */
      --color-h2: hsl(233deg 13% 41%);
      --color-h3: var(--color-h2);
      --color-h4: var(--color-h2);

      /* Catppuccin subtext 0 */
      --color-h5: hsl(233deg 10% 47%);
      --color-h6: var(--color-h5);

      /* stylelint-disable-next-line value-keyword-case */
      --font-family-base:
        optima, candara, 'Noto Sans', source-sans-pro, sans-serif;
      --font-family-heading: var(--font-family-base);
      --nav-margin: 4vh;

      --button-color-bg: var(--color-bg-alt);

      /* Color of <code> blocks. Catppuccin green */
      --color-code: hsl(109deg, 58%, 40%);

      /* Catppuccin surface 1 */
      --button-color-hover-bg: hsl(225deg, 14%, 77%);
    }
  }
}