/* Depends on tokens/colors.css, tokens/typography.css, tokens/spacing.css being
   linked BEFORE this file (the layout template controls that order). */
@layer reset, base, components, utilities;

/* Motion tokens — shared by all three surfaces. The built-in CSS easing
   keywords are too weak for sub-250ms UI transitions; these curves make
   them read as intentional. Entering/press UI uses --ease-out (instant
   response, then settle); constant motion (spinners) stays linear. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  a { color: inherit; }
  button { font: inherit; cursor: pointer; }
  img { max-width: 100%; display: block; }
  /* The `hidden` attribute (toggled by Datastar's data-attr:hidden) must win
     over any element display, incl. inline styles — hence !important. */
  [hidden] { display: none !important; }
}

@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }
  .page { min-height: 100dvh; }
  .container { width: 100%; max-width: 480px; margin-inline: auto; padding-inline: var(--density-pad-x); }
}

@layer utilities {
  /* Read by screen readers, not shown. */
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}