@layer reset, tokens, base, layout, sections;

@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-600.woff2') format('woff2');
  font-weight: 600;
  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%;
  }

  body {
    min-height: 100vh;
  }

  img,
  picture,
  video {
    display: block;
    max-width: 100%;
    height: auto;
  }

  svg {
    display: block;
  }

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

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

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

  ul,
  ol {
    list-style: none;
  }

  table {
    border-collapse: collapse;
  }

}

@layer tokens {
  :root {
    --ca-white: #ffffff;
    --ca-fg: #111a19;
    --ca-muted: #4f6664;
    --ca-teal: #0e9f8f;
    --ca-teal-deep: #0b7f72;
    --ca-tint: #e8f5f2;
    --ca-night: #0f1e1d;
    --ca-line: rgba(17, 26, 25, 0.1);
    --ca-glow: rgba(14, 159, 143, 0.35);

    --ca-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ca-text: 'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ca-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

    --ca-r-sm: 8px;
    --ca-r-md: 14px;
    --ca-r-lg: 20px;
    --ca-r-xl: 28px;
    --ca-r-pill: 999px;

    --ca-shadow-sm: 0 1px 2px rgba(15, 30, 29, 0.04), 0 1px 1px rgba(15, 30, 29, 0.03);
    --ca-shadow-md: 0 1px 2px rgba(15, 30, 29, 0.04), 0 12px 32px -12px rgba(15, 30, 29, 0.18);

    --ca-ancho: 76rem;
    --gap-xs: 0.5rem;
    --gap-sm: 1rem;
    --gap-md: 1.75rem;
    --gap-lg: 3rem;
    --gap-xl: 5.5rem;

    --h1-size: clamp(2.6rem, 6vw, 5.2rem);
    --h2-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.6rem);
    --h3-size: clamp(1.3rem, 1.05rem + 0.85vw, 1.6rem);

    --ring: 0.15rem solid var(--ca-teal-deep);
  }
}

@layer base {
  html {
    scroll-padding-top: 5rem;
  }

  body {
    font-family: var(--ca-text);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ca-fg);
    background: var(--ca-white);
  }

  h1,
  h2,
  h3 {
    font-family: var(--ca-display);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  h1 {
    font-size: var(--h1-size);
    line-height: 1.02;
    letter-spacing: -0.035em;
  }

  h2 {
    font-size: var(--h2-size);
  }

  h3 {
    font-size: var(--h3-size);
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  p {
    max-width: 62ch;
  }

  a {
    transition: opacity 0.2s ease, color 0.2s ease;
  }

  a:hover {
    opacity: 0.78;
  }

  @media (prefers-reduced-motion: reduce) {
    a {
      transition: none;
    }
  }

  :focus-visible {
    outline: var(--ring);
    outline-offset: 0.2rem;
  }

  button {
    font-family: var(--ca-text);
  }

  .mono-label {
    font-family: var(--ca-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}