/**
 * Lush — reset, typography roles, layout frame.
 *
 * Load order is fixed and matters: fonts.css -> tokens.css -> base.css -> components.css
 * Token overrides belong in tokens.css. A later file with a :root block loses to
 * nothing here, but keeping tokens in one file is what stopped the two themes
 * drifting apart in the previous project.
 */

/* class-based display rules must not defeat the hidden attribute */
[hidden] { display: none !important; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  overscroll-behavior-y: none;
}

/* ---------- the screen frame ---------- */

.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: var(--tg-viewport-stable-height, 100dvh);
  padding:
    calc(var(--gap-3) + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px))
    var(--gap-3)
    calc(var(--gap-5) + env(safe-area-inset-bottom, 0px));
}

.screen { animation: fade-up var(--dur-screen) var(--ease-out) both; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- four typography roles ---------- */

.t-title {
  font-size: var(--t-title);
  line-height: var(--t-title-lh);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 var(--gap-2);
}
.t-head {
  font-size: var(--t-head);
  line-height: var(--t-head-lh);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 var(--gap-2);
}
.t-body {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  font-weight: 400;
  margin: 0 0 var(--gap-2);
}
.t-caption {
  font-size: var(--t-caption);
  line-height: var(--t-caption-lh);
  font-weight: 400;
  color: var(--muted);
  margin: 0;
}

/* Prices, counters and timers borrow a role and add tabular figures.
   No fifth role: weight and colour carry the emphasis. */
.nums { font-variant-numeric: tabular-nums; }

.muted { color: var(--muted); }
.center { text-align: center; }
.strong { font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}