@import url("https://fonts.googleapis.com/css2?family=Felipa&family=Inter:wght@400;500;600;700&display=swap");

@layer reset, tokens, base, layout, components, utilities, overrides;

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

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

  body {
    min-block-size: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

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

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

  ul[role="list"] {
    list-style: none;
  }

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

  table {
    border-collapse: collapse;
    inline-size: 100%;
  }

  :focus-visible {
    outline: 3px solid var(--dgv-cyclamen);
    outline-offset: 2px;
    border-radius: 2px;
  }
}

@layer tokens {
  :root {
    --dgv-paper: #f5f1e4;
    --dgv-paper-deep: #ece5d2;
    --dgv-card: #fbf8ee;
    --dgv-ink: #16130f;
    --dgv-ink-soft: #3f382e;
    --dgv-forest: #1f3a2b;
    --dgv-forest-deep: #12241a;
    --dgv-chartreuse: #c6f24d;
    --dgv-chartreuse-deep: #a4d321;
    --dgv-cyclamen: #e8437f;
    --dgv-cyclamen-deep: #c92764;
    --dgv-rose: #f3c6d6;
    --dgv-border: #d6cdb4;
    --dgv-border-ink: #201b14;

    --dgv-space-3xs: 0.25rem;
    --dgv-space-2xs: 0.5rem;
    --dgv-space-xs: 0.75rem;
    --dgv-space-sm: 1rem;
    --dgv-space-md: 1.5rem;
    --dgv-space-lg: 2.5rem;
    --dgv-space-xl: 4rem;
    --dgv-space-2xl: 6rem;

    --dgv-step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
    --dgv-step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    --dgv-step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --dgv-step-2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
    --dgv-step-3: clamp(1.9rem, 1.5rem + 2vw, 3rem);
    --dgv-step-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
    --dgv-step-5: clamp(3.4rem, 2.2rem + 5.4vw, 6.4rem);

    --dgv-radius-sm: 4px;
    --dgv-radius-md: 10px;
    --dgv-radius-lg: 20px;

    --dgv-shadow-sm: 0 2px 0 var(--dgv-border-ink);
    --dgv-shadow-md: 6px 6px 0 var(--dgv-forest);
    --dgv-shadow-pop: 8px 8px 0 var(--dgv-cyclamen);

    --dgv-dur-fast: 140ms;
    --dgv-dur-mid: 260ms;

    --dgv-content: 1380px;
    --dgv-reading: 760px;
    --dgv-gutter: clamp(32px, 5vw, 92px);

    --dgv-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --dgv-display: "Felipa", "Inter", cursive;
  }
}

@layer base {
  html {
    background-color: var(--dgv-paper);
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--dgv-paper);
    color: var(--dgv-ink);
    font-family: var(--dgv-sans);
    font-size: var(--dgv-step-0);
    background-image: radial-gradient(var(--dgv-border) 0.6px, transparent 0.6px);
    background-size: 22px 22px;
    overflow-x: hidden;
  }

  @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;
    }
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--dgv-display);
    font-weight: 400;
    line-height: 1.05;
    color: var(--dgv-ink);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--dgv-step-5);
  }

  h2 {
    font-size: var(--dgv-step-4);
  }

  h3 {
    font-size: var(--dgv-step-2);
  }

  p {
    text-wrap: pretty;
  }

  strong {
    font-weight: 700;
  }

  ::selection {
    background: var(--dgv-cyclamen);
    color: var(--dgv-paper);
  }

  .skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: var(--dgv-space-sm);
    z-index: 999;
    background: var(--dgv-forest);
    color: var(--dgv-chartreuse);
    padding: var(--dgv-space-2xs) var(--dgv-space-md);
    border-radius: var(--dgv-radius-md);
    font-weight: 600;
    transition: inset-block-start var(--dgv-dur-fast) ease;
  }

  .skip-link:focus {
    inset-block-start: var(--dgv-space-sm);
  }
}