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

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

  * {
    margin: 0
  }

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

  body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
  }

  img, picture, svg {
    display: block;
    max-width: 100%
  }

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

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

  a {
    color: inherit
  }

  ul[class], ol[class] {
    list-style: none;
    padding: 0
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto
    }
  }
}

@layer tokens {
  :root {
    --carbon: hsl(216 10% 10%);
    --carbon-raise: hsl(216 10% 13%);
    --grafito: hsl(218 10% 16%);
    --ceniza: hsl(218 9% 25%);
    --humo: hsl(214 9% 68%);
    --niebla: hsl(210 12% 94%);
    --lava: hsl(17 77% 54%);
    --lava-claro: hsl(20 86% 59%);
    --lava-oscuro: hsl(13 76% 40%);
    --lava-texto: hsl(22 58% 6%);
    --lava-gradient: linear-gradient(120deg, var(--lava-claro), var(--lava-oscuro));
    --glow-lava: radial-gradient(circle, hsl(17 77% 54% / 0.22), transparent 70%);

    --font-display: 'Montserrat Alternates', system-ui, sans-serif;
    --font-text: 'Rubik', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --container: 75rem;
    --gap-xs: 0.5rem;
    --gap-sm: 1rem;
    --gap-md: 1.75rem;
    --gap-lg: clamp(2.5rem, 2rem + 2vw, 4rem);
    --gap-xl: clamp(4rem, 3rem + 4vw, 7rem);

    --radius-sm: 0.4rem;
    --radius-md: 0.9rem;
    --radius-lg: 1.5rem;

    --header-h: 4.5rem;
    --z-header: 999;
    --z-menu: 1000;
    --z-cookie: 1001;

    --ease-charge: cubic-bezier(0.16, 1, 0.3, 1);
  }
}