@layer settings, defaults, modules, overrides;

@layer settings {
  :root {
    --phi: 1.6185;
    --base: 1em;
    --scale-0: calc(var(--base) * pow(var(--phi), -5));
    --scale-1: calc(var(--base) * pow(var(--phi), -4));
    --scale-2: calc(var(--base) * pow(var(--phi), -3));
    --scale-3: calc(var(--base) * pow(var(--phi), -2));
    --scale-4: calc(var(--base) * pow(var(--phi), -1));
    --scale-5: calc(var(--base) * pow(var(--phi), 0));
    --scale-6: calc(var(--base) * pow(var(--phi), 1));
    --scale-7: calc(var(--base) * pow(var(--phi), 2));
    --scale-8: calc(var(--base) * pow(var(--phi), 3));
    --scale-9: calc(var(--base) * pow(var(--phi), 4));
    --scale-10: calc(var(--base) * pow(var(--phi), 5));
    --scale-11: calc(var(--base) * pow(var(--phi), 6));
    --scale-12: calc(var(--base) * pow(var(--phi), 7));
    --scale-13: calc(var(--base) * pow(var(--phi), 8));

    --font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif;
    --font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-family: var(--font-family-sans-serif);
    --font-weight: 400;
    --line-height: var(--phi);
    --font-size: var(--base);

    --heading-step: 0.36;
    --heading-font-weight: 500;

    --border-width: 1px;
    --focus-outline-width: calc(4*var(--border-width));
    --focus-outline-offset: 0;

    --form-element-height: calc(var(--scale-6) + 2 * var(--scale-3) + 2 * var(--border-width));

    --lightness-0: 100.0%;
    --lightness-1: 96.8%;
    --lightness-2: 90.5%;
    --lightness-3: 82.5%;
    --lightness-4: 74.2%;
    --lightness-5: 65.8%;
    --lightness-6: 57.5%;
    --lightness-7: 49.2%;
    --lightness-8: 40.8%;
    --lightness-9: 32.5%;
    --lightness-10: 23.8%;
    --lightness-11: 13.5%;
    --lightness-12: 0.0%;

    --accent-hue: 210;
    --accent-saturation: 70%;

    --neutral-hue: calc(mod(var(--accent-hue) + 180 - 15, 360));
    --neutral-saturation: 0%;

    --error-hue: 0;
    --error-saturation: 60%;

    --warning-hue: 45;
    --warning-saturation: 80%;

    --success-hue: 160;
    --success-saturation: 30%;

    --foreground-lightness: var(--lightness-12);
    --background-lightness: var(--lightness-0);
    --focus-lightness: var(--lightness-3);
    --shadow-color: hsl(var(--neutral-hue) 0 50%);
    color-scheme: light;
  }

  .color-scheme-light {
    --accent-saturation: 70%;
    --error-saturation: 60%;
    --neutral-saturation: 0%;

    --lightness-0: 100.0%;
    --lightness-1: 96.8%;
    --lightness-2: 90.5%;
    --lightness-3: 82.5%;
    --lightness-4: 74.2%;
    --lightness-5: 65.8%;
    --lightness-6: 57.5%;
    --lightness-7: 49.2%;
    --lightness-8: 40.8%;
    --lightness-9: 32.5%;
    --lightness-10: 23.8%;
    --lightness-11: 13.5%;
    --lightness-12: 0.0%;

    --foreground-lightness: var(--lightness-12);
    --background-lightness: var(--lightness-0);
    --focus-lightness: var(--lightness-3);
    --shadow-color: hsl(var(--neutral-hue) 0 50%);
    --focus-outline-width: calc(4*var(--border-width));
    --focus-outline-offset: 0;

    color-scheme: only light;
  }

  .color-scheme-dark {
    --accent-saturation: 60%;
    --error-saturation: 70%;
    --neutral-saturation: 5%;

    --lightness-0: 20.00%;
    --lightness-1: 26.89%;
    --lightness-2: 32.34%;
    --lightness-3: 36.99%;
    --lightness-4: 41.50%;
    --lightness-5: 46.00%;
    --lightness-6: 50.50%;
    --lightness-7: 55.00%;
    --lightness-8: 59.50%;
    --lightness-9: 63.99%;
    --lightness-10: 68.34%;
    --lightness-11: 71.89%;
    --lightness-12: 74.00%;

    --foreground-lightness: 100%;
    --background-lightness: 22%;
    --focus-lightness: var(--lightness-12);
    --shadow-color: hsl(var(--neutral-hue) 0 10%);
    --focus-outline-width: calc(2*var(--border-width));
    --focus-outline-offset: calc(2*var(--border-width));
    color-scheme: only dark;
  }

  @media (prefers-color-scheme: dark) {
    :root:not(.color-scheme-light):not(.color-scheme-dark) {
      --accent-saturation: 60%;
      --error-saturation: 70%;
      --neutral-saturation: 5%;

      --lightness-0: 20.00%;
      --lightness-1: 26.89%;
      --lightness-2: 32.34%;
      --lightness-3: 36.99%;
      --lightness-4: 41.50%;
      --lightness-5: 46.00%;
      --lightness-6: 50.50%;
      --lightness-7: 55.00%;
      --lightness-8: 59.50%;
      --lightness-9: 63.99%;
      --lightness-10: 68.34%;
      --lightness-11: 71.89%;
      --lightness-12: 74.00%;

      --foreground-lightness: 100%;
      --background-lightness: 22%;
      --focus-lightness: var(--lightness-12);
      --shadow-color: hsl(var(--neutral-hue) 0 10%);
      --focus-outline-width: calc(2*var(--border-width));
      --focus-outline-offset: calc(2*var(--border-width));
      color-scheme: dark;
    }
  }
}

@layer defaults {
  .microbe {
    color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));
    background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness));

    :is(.color-scheme-light, .color-scheme-dark) {
      color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness));
    }

    &,
    & * {
      box-sizing: border-box;
      font-family: var(--font-family);
      font-size: var(--font-size);
      font-weight: var(--font-weight);
      line-height: var(--line-height);
    }

    & * {
      font-size: 1em;
    }

    button {
      cursor: pointer;
    }
  }
}