/* base.css — resets, typography, layout primitives */
@import './tokens.css';

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

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  transition: background var(--transition-base), color var(--transition-base);
}

body {
  margin: 0;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  line-height: 1.25;
  font-weight: 600;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); }

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

/* Container */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Layout: main content area */
main {
  flex: 1;
  padding: var(--space-8) var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Monospace numbers */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Amount colors */
.amount-income     { color: var(--color-income); }
.amount-spending   { color: var(--color-spending); }
.amount-investment { color: var(--color-investment); }
.amount-transfer   { color: var(--color-transfer); }

/* Utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.text-muted   { color: var(--color-text-muted); }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.gap-2        { gap: var(--space-2); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.mt-4         { margin-top: var(--space-4); }
.mt-6         { margin-top: var(--space-6); }
.mb-4         { margin-bottom: var(--space-4); }
.mb-6         { margin-bottom: var(--space-6); }
.w-full       { width: 100%; }
[x-cloak]     { display: none !important; }

/* Responsive */
@media (max-width: 640px) {
  main { padding: var(--space-4); }
  .container { padding: 0 var(--space-4); }
}