:root {
  color-scheme: light dark;

  font-size: clamp(16px, 0.67svw + 0.75svh, 18px);

  /* Sizes */

  --g-padding: 2rem;
  --g-max-width: 1280px;
  --g-nav-height: 4rem;

  /* Colors */

  --c-ic-purple: oklch(0.5518 0.1412 324.87);
  --c-ic-orange: oklch(0.7454 0.1554 59.09);
  --c-ic-green: oklch(0.7521 0.1706 129.95);
  --c-ic-blue: oklch(0.6879 0.1333 233.93);
  --c-ic-red: oklch(0.6476 0.1991 31.14);

  --c-bg: light-dark(oklch(96% 0.0282 324.87), oklch(16% 0.0282 324.87));
  --c-bg-secondary: light-dark(
    oklch(100% 0.0157 324.87),
    oklch(28% 0.0157 324.87)
  );

  --c-primary: light-dark(oklch(10% 0% 0), oklch(94% 0% 0));
  --c-secondary: light-dark(oklch(25% 0% 0 / 0.83), oklch(83% 0% 0 / 0.83));
  --c-tertiary: light-dark(oklch(50% 0% 0 / 0.58), oklch(67% 0% 0 / 0.58));

  --c-bar: light-dark(oklch(83% 0% 0 / 0.33), oklch(33% 0% 0 / 0.33));
  --c-separator: oklch(50% 0% 0 / 0.42);
  --c-shadow: light-dark(oklch(0% 0% 0 / 0.08), oklch(0% 0% 0 / 0.08));
}

html,
body {
  max-inline-size: 100dvw;
  overflow-inline: hidden;
}

body {
  background-color: var(--c-bg);
  color: var(--c-primary);
  font-family: "Satoshi", "Inter", sans-serif;
}

/* Resets */

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  img {
    max-inline-size: 100%;
    display: block;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
    max-width: 65ch;
  }

  a {
    text-decoration: none;
  }

  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    border: none;
    background: unset;
    padding: 0;
    font-family: inherit;
  }

  a,
  button {
    color: var(--c-accent);
    width: fit-content;
    cursor: pointer;
    font-size: 0.9375em;
    font-weight: 600;
  }

  ul,
  ol {
    list-style-position: inside;
  }

  :disabled {
    cursor: not-allowed;
    opacity: 0.75;
    filter: grayscale(100%);
  }

  [popover] {
    border: none;
    padding: 0;
    background: unset;
  }
}