@layer reset, tokens, base, composition, modules, utilities, overrides;

@font-face {
  font-family: "Google Sans Flex";
  src: url("../fonts/google-sans-flex.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    min-block-size: 100dvh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul,
  ol {
    list-style: none;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
    line-height: 1.12;
  }

  p {
    text-wrap: pretty;
  }

  :target {
    scroll-margin-block-start: 6rem;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --ink: #08101f;
    --ink-2: #0c1424;
    --slate: #121d31;
    --slate-2: #16233c;
    --line: #24334f;
    --line-soft: #1a273f;
    --text: #f5f7fb;
    --muted: #a8b4cc;
    --muted-2: #7c8aa6;
    --lime: #b8ff55;
    --cyan: #5ee4e8;
    --amber: #ffb44a;
    --danger: #ff7a7a;
    --ink-contrast: #05213a;

    --font-body: "Google Sans Flex", "Segoe UI", system-ui, -apple-system,
      "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Consolas",
      monospace;

    --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
    --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --step-2: clamp(1.4rem, 1.2rem + 1vw, 1.95rem);
    --step-3: clamp(1.8rem, 1.5rem + 1.6vw, 2.75rem);
    --step-4: clamp(2.3rem, 1.8rem + 2.8vw, 4rem);
    --step-5: clamp(2.8rem, 2rem + 4vw, 5.25rem);

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.25rem;
    --space-xl: 3.5rem;
    --space-2xl: 5rem;
    --space-3xl: 7rem;

    --width-max: 78rem;
    --width-text: 66ch;
    --radius: 4px;
    --radius-lg: 8px;
    --border: 1px solid var(--line);
    --ring: 0 0 0 2px var(--ink), 0 0 0 4px var(--lime);
    --motion: 240ms cubic-bezier(0.32, 0.72, 0.3, 1);
    --grid-texture: linear-gradient(
        to right,
        rgba(94, 228, 232, 0.05) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, rgba(94, 228, 232, 0.05) 1px, transparent 1px);
  }
}

@layer base {
  html {
    background-color: var(--ink);
  }

  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--text);
    background-color: var(--ink);
    background-image: radial-gradient(
        circle at 15% -10%,
        rgba(184, 255, 85, 0.08),
        transparent 45%
      ),
      radial-gradient(circle at 90% 0%, rgba(94, 228, 232, 0.07), transparent 40%);
    background-attachment: fixed;
  }

  ::selection {
    background: var(--lime);
    color: var(--ink);
  }

  :focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius);
  }

  h1 {
    font-size: var(--step-4);
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: var(--step-3);
    font-weight: 750;
    letter-spacing: -0.015em;
  }

  h3 {
    font-size: var(--step-1);
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  strong {
    font-weight: 700;
    color: var(--text);
  }

  code,
  kbd,
  samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }
}