/* ============================================================================
   base.css — reset, design tokens, typography. Mobile-first.
   ========================================================================== */

:root {
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #6b6b6b;
  --color-text-tertiary: #9b9b9b;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f3;
  --color-bg-tertiary: #efefed;
  --color-border: rgba(0,0,0,0.12);
  --color-border-light: rgba(0,0,0,0.07);
  --color-success: #3B6D11;
  --color-success-bg: #EAF3DE;
  --color-blue: #185FA5;
  --color-blue-bg: #E6F1FB;
  --color-purple: #534AB7;
  --color-purple-bg: #EEEDFE;
  --color-amber: #854F0B;
  --color-amber-bg: #FAEEDA;
  --color-danger: #b3261e;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #a0a0a0;
    --color-text-tertiary: #707070;
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #242424;
    --color-bg-tertiary: #2e2e2e;
    --color-border: rgba(255,255,255,0.12);
    --color-border-light: rgba(255,255,255,0.07);
    --color-success: #9ed26a;
    --color-success-bg: #24330f;
    --color-blue: #7fb6ec;
    --color-blue-bg: #12283d;
    --color-purple: #b3adf0;
    --color-purple-bg: #211f3a;
    --color-amber: #e2b271;
    --color-amber-bg: #33260f;
    --color-danger: #f2837c;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* Safe-area insets (notch / home indicator). 0 on non-notched screens + web;
     active on Capacitor (needs viewport-fit=cover in the page <meta viewport>). */
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; color: inherit; }
ul { list-style: none; }
canvas { display: block; }

h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 15px; font-weight: 600; }

.muted { color: var(--color-text-secondary); }
.tertiary { color: var(--color-text-tertiary); }
.pos { color: var(--color-success); }
.neg { color: var(--color-danger); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

.page { padding: 0 var(--space-4); }
.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }