/* ============================================================
   DESIGN TOKENS — Home Ledger
   A household expense tracker built for speed: tap → amount → save.
   Palette drawn from a Kerala kitchen pantry: turmeric, petrol-teal
   enamelware, charcoal slate, chili for warnings — not the default
   cream/terracotta pairing.
   ============================================================ */

:root {
  /* --- Color: surfaces --- */
  --paper: #EEF1EA;          /* soft sage-stone background, not cream */
  --paper-raised: #FFFFFF;   /* cards */
  --paper-sunken: #E4E8DF;   /* wells, inputs */
  --line: #D7DCCE;           /* hairline borders */
  --line-strong: #C3CAB6;

  /* --- Color: ink --- */
  --ink: #202B22;            /* deep forest-charcoal, primary text */
  --ink-soft: #5B6A5C;       /* secondary text */
  --ink-faint: #8B978A;      /* placeholder / disabled */

  /* --- Color: accents --- */
  --turmeric: #E3A825;       /* primary accent — action, focus, favorites */
  --turmeric-deep: #B9821A;
  --turmeric-wash: #FBF0D6;
  --petrol: #1F6F6B;         /* secondary accent — links, dashboard highlights */
  --petrol-deep: #17524F;
  --petrol-wash: #DCEBE9;
  --chili: #C1502E;          /* destructive / warnings only */
  --chili-wash: #F6DFD6;
  --leaf: #4C7A3F;           /* positive / under-budget */

  /* --- Category accent set (used as small left-bars, not backgrounds) --- */
  --cat-1: #D9822B; /* Food & Kitchen */
  --cat-2: #1F6F6B; /* Household */
  --cat-3: #B0405B; /* Utilities */
  --cat-4: #6A5A3F; /* Home & Maintenance */
  --cat-5: #3E6C8C; /* Transport */
  --cat-6: #8A5FA6; /* Personal & Family */
  --cat-7: #4C7A3F; /* Financial */
  --cat-8: #C1663D; /* Lifestyle */
  --cat-9: #7A7461; /* Miscellaneous */

  /* --- Type — Inter throughout: the closest Google Font match to
     Apple's SF Pro (same neutral, high-legibility UI shape), and
     unlike SF Pro it's actually licensed for web embedding, so it
     renders identically on every platform instead of only on Apple
     devices. System fonts stay as a fallback if the webfont fails
     to load. One stack, used everywhere. --- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-family);
  --font-body: var(--font-family);
  --font-mono: var(--font-family);

  /* --- Scale --- */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(32,43,34,0.06), 0 6px 16px rgba(32,43,34,0.06);
  --shadow-sheet: 0 -8px 30px rgba(32,43,34,0.18);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  /* Stops the double-tap-to-zoom gesture on iOS (Safari, Chrome, and
     any other iOS browser — they're all WebKit under the hood, so
     this one rule covers all of them). Tells the browser to treat a
     tap as an immediate click instead of waiting to see if a second
     tap is coming; also removes the old ~300ms tap delay. */
  touch-action: manipulation;
}
button, input {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
button, input, select {
  font-family: inherit;
}
a { color: inherit; }
::selection { background: var(--turmeric-wash); }

:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}