/* Spendly — reset, base elements, layout primitives, utilities. */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; -webkit-appearance: none; appearance: none; }
button:disabled { cursor: not-allowed; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { list-style: none; }

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

/* Visible, consistent focus for keyboard users (§49). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--purple-100); color: var(--purple-900); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
}
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Layout primitives ---------- */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.grow { flex: 1 1 auto; min-width: 0; }

.section { margin-top: var(--s-6); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.section-title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.section-link {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-text);
}

/* ---------- Typography utilities ---------- */

.text-muted  { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-lg { font-size: var(--fs-lg); }
.bold { font-weight: 700; }
.semibold { font-weight: 600; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-caps {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Amounts use tabular figures so columns of numbers align (§54). */
.amount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.amount-expense { color: var(--text); }
.amount-income  { color: var(--success); }

/* ---------- Accessibility helpers ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-toast);
  padding: var(--s-2) var(--s-4);
  background: var(--surface);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

[hidden] { display: none !important; }

/* ---------- Motion ---------- */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
/* Exit animations need their own keyframe names: re-using the entry name only
   flips animation-direction on a finished animation, which never replays and
   never fires animationend. */
@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes scale-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(0.96); }
}
@keyframes slide-down {
  from { transform: none; }
  to   { transform: translateY(100%); }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

.animate-rise { animation: rise-in var(--t-slow) var(--ease) both; }
.animate-fade { animation: fade-in var(--t-base) var(--ease) both; }

/* Stagger helper for lists of cards. */
.stagger > * { animation: rise-in var(--t-slow) var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(6) { animation-delay: 200ms; }
.stagger > *:nth-child(n+7) { animation-delay: 240ms; }

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

/* ---------- Spacing utilities ---------- */
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-8 { margin-bottom: var(--s-8); }