/* ═══════════════════════════════════════════════════════════
   SYNKK — DESIGN SYSTEM v2
   Mobile-first. 8px grid. Two fonts. One palette.
═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  /* Surfaces */
  --bg:      #0c0c0c;
  --s1:      #161616;
  --s2:      #1e1e1e;
  --s3:      #252525;

  /* Borders — lightened for visibility */
  --border:  #333333;
  --border2: #444444;
  --border3: #555555;

  /* Text — high contrast for readability on the near-black bg */
  --text:    #f5f5f5;
  --text2:   #dedede;
  --muted:   #a8a8a8;

  /* Accent */
  --accent:  #c8ff00;
  --acc-dim: rgba(200,255,0,.1);
  --acc-mid: rgba(200,255,0,.18);

  /* Semantic */
  --red:     #ff4d6d; --red-dim:  rgba(255,77,109,.12);
  --green:   #00e5a0; --grn-dim:  rgba(0,229,160,.12);
  --blue:    #5cb8ff; --blu-dim:  rgba(92,184,255,.12);
  --orange:  #ffaa4d; --org-dim:  rgba(255,170,77,.12);
  --purple:  #c084fc; --pur-dim:  rgba(192,132,252,.12);
  --teal:    #2dd4bf; --tel-dim:  rgba(45,212,191,.12);
  --pink:    #f472b6; --pnk-dim:  rgba(244,114,182,.12);

  /* Spending categories */
  --cat-rent:          #c8ff00;
  --cat-groceries:     #4ade80;
  --cat-dining:        #f97316;
  --cat-transport:     #60a5fa;
  --cat-shopping:      #e879f9;
  --cat-school:        #fbbf24;
  --cat-health:        #34d399;
  --cat-subscriptions: #a78bfa;
  --cat-transfers:     #6b7280;
  --cat-entertainment: #fb7185;
  --cat-business:      #38bdf8;
  --cat-insurance:     #fcd34d;
  --cat-personal:      #c084fc;
  --cat-other:         #64748b;

  /* Macros (single source of truth — kills the duplicate greens/blues) */
  --macro-p: var(--green);
  --macro-c: var(--blue);
  --macro-f: #ffd15c;

  /* Health category palette — recovery / cycle / habits / streaks all draw
     from THIS set so the whole area shares one cohesive spectrum */
  --hc-1: #00e5a0; --hc-2: #5cb8ff; --hc-3: #ffaa4d; --hc-4: #c084fc;
  --hc-5: #f472b6; --hc-6: #2dd4bf; --hc-7: #ff6f91; --hc-8: #ffd166;

  /* Spacing — 8px grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Radius */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Layout */
  --pad: 20px;
  --hdr-h: 64px;
  --nav-h: 60px;

  /* Safe-area insets — notch, Dynamic Island, home indicator, landscape ears.
     These only return non-zero when the viewport meta has viewport-fit=cover
     (set in index.html). Referenced across the header, bottom nav, view padding,
     modals and floating buttons so the UI clears the hardware on every device.
     In normal Safari (browser chrome visible) they are ~0, so activating them is
     a no-op there and only takes effect in installed/PWA and scroll-collapsed
     states — where content was previously sliding under the hardware. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

/* Desktop scaling — everything gets bigger and more spacious */
@media(min-width: 768px) {
  :root {
    --pad: 32px;
    --hdr-h: 68px;
    --nav-h: 64px;
    --text2: #e6e6e6;
    --muted: #b4b4b4;
    --border: #383838;
    --border2: #4a4a4a;
  }
}