/* ============================================================================
   base.css — reset, base elements, typography, shared utilities.
   ============================================================================ */

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

* { margin: 0; }

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

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: rgb(var(--text));
  background: rgb(var(--bg));
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgb(var(--bg-grad-a) / 0.7), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, rgb(var(--bg-grad-b) / 0.6), transparent 55%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  /* Long words/titles wrap instead of forcing the layout wider. */
  overflow-wrap: break-word;
  /* Calmer touch behavior: no grey tap flash, no rubber-band overscroll. */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 { line-height: 1.2; font-weight: 650; letter-spacing: -0.015em; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
svg { display: block; }

.icon { display: inline-block; vertical-align: middle; flex: none; }

/* Number-heavy text lines up nicely with tabular figures. */
.clock__time, .ring__value, .counter__value, .goal__pct, .stat__value,
.streak-list__flame { font-variant-numeric: tabular-nums; }

::selection { background: rgb(var(--primary) / 0.22); }

:focus-visible {
  outline: 2px solid rgb(var(--primary));
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Scrollbars (WebKit) */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: rgb(var(--text-3) / 0.4);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--text-3) / 0.6); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Utilities */
.muted { color: rgb(var(--text-2)); }
.soft-empty { padding: 8px 2px; font-size: 14px; }
.big-note { font-size: 16px; font-weight: 550; line-height: 1.4; color: rgb(var(--text)); }