/* ==========================================================================
   Reset y base: tipografía, foco, utilidades de texto.
   ========================================================================== */

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

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

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

  body,
  h1, h2, h3, h4,
  p, figure, blockquote, dl, dd {
    margin: 0;
  }

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

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

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

  ul[role="list"],
  ol[role="list"] {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [hidden] {
    display: none !important;
  }

  dialog {
    padding: 0;
    border: 0;
    color: inherit;
  }

  [popover] {
    margin: 0;
    padding: 0;
    border: 0;
    color: inherit;
  }
}

@layer base {
  html {
    background-color: var(--bg);
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
  }

  body {
    min-height: 100dvh;
    background-color: var(--bg);
    background-image: var(--grain);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-md);
    font-weight: var(--ui-weight);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    transition:
      background-color var(--dur-theme) var(--ease-in-out),
      color var(--dur-theme) var(--ease-in-out);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-variation-settings: var(--display-axes);
    font-optical-sizing: auto;
    font-weight: var(--display-weight);
    line-height: var(--leading-display);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-hero);
    letter-spacing: var(--tracking-display);
  }

  h2 {
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-display);
  }

  h3 {
    font-size: var(--text-lg);
  }

  p,
  li,
  dd {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--dur-1) var(--ease-out-soft);

    &:hover {
      text-decoration-color: currentColor;
    }
  }

  strong {
    font-weight: var(--ui-weight-strong);
  }

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

  /* Foco visible: anillo de 2 px con 2 px de separación, solo con teclado. */
  :focus {
    outline: none;
  }

  :focus-visible {
    outline: var(--focus-width) solid var(--focus);
    outline-offset: var(--focus-offset);
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .text-soft {
    color: var(--ink-soft);
  }

  .text-faint {
    color: var(--ink-faint);
  }

  /* Etiquetas en versalitas reales, no mayúsculas forzadas. */
  .label {
    font-size: var(--text-sm);
    font-weight: var(--ui-weight-strong);
    font-variant-caps: all-small-caps;
    letter-spacing: var(--tracking-caps);
    color: var(--ink-soft);
  }

  .display {
    font-family: var(--font-display);
    font-variation-settings: var(--display-axes);
    font-optical-sizing: auto;
    font-weight: var(--display-weight);
    line-height: var(--leading-display);
  }

  .num {
    font-variant-numeric: tabular-nums;
  }

  /* Sin JavaScript se ocultan los controles que solo funcionan con JS. */
  html:not(.js) .needs-js {
    display: none !important;
  }
}