/* ==========================================================================
   base.css — element resets, typography defaults, link/img/button defaults
   Loaded after tokens.css. Sets the baseline before any component CSS runs.
   ========================================================================== */

* { box-sizing: border-box; }

/* iOS Safari paints a translucent gray block on every tap by default — kill
   it globally and let components paint their own press feedback (the .btn /
   :active rules below). */
* { -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-base);
  color: var(--ink);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* iOS-canonical: every digit fixed-width so prices, times, counts,
     and metric tickers don't jitter when their digits change. Cheap
     polish that fires on every numeric character in the document. */
  font-variant-numeric: tabular-nums;
}

/* Interactive elements skip the 300ms tap delay legacy iOS Safari adds for
   double-tap-to-zoom. Pinch-zoom on body still works. */
button,
a,
summary,
label,
[role="button"] { touch-action: manipulation; }

a { color: var(--ink); text-decoration: none; transition: opacity .15s ease, color .2s ease; }
a:hover { color: var(--brand-ink); }
/* iOS-style instant dim on press for non-button anchors — buttons own their
   own scale-down press state in buttons.css. */
a:not(.btn):active { opacity: .55; transition: opacity 0s; }

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

button { font: inherit; cursor: pointer; }

/* Slim, neutral scrollbars — iOS-style minimal chrome. Firefox uses the
   shorthand pair; Chromium / Safari get the explicit pseudo-element. The
   thumb tint reads as a neutral hairline on the page bg, not a chrome
   element competing with the content. */
html { scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, .14);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .26); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  a:not(.btn):active { opacity: 1; }
}

/* Solar icon defaults — components override per context.
   `[data-lucide]` matches the placeholder before icon-loader.js swaps it;
   `svg.lucide` matches the rendered Solar SVG (Bold-Duotone for menu/large,
   Linear for small/control). Solar Linear paths carry their own
   `stroke-width="1.5"` attribute, so we no longer override it here. */
[data-lucide], svg.lucide {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}