/* Pockytap design tokens */
:root {
  /* brand */
  --brand: #0ea5a4;
  --brand-600: #0b8a89;
  --brand-100: #d8f5f3;
  --brand-ink: #ffffff;

  /* semantic */
  --income: #16a34a;
  --income-bg: #dcfce7;
  --expense: #e5484d;
  --expense-bg: #fde8e8;
  --transfer: #2563eb;
  --transfer-bg: #dbeafe;
  --warn: #f59e0b;

  /* surfaces (light) */
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --surface-3: #e6e9ee;
  --border: #e6eaef;
  --text: #0f172a;
  --text-2: #5b6473;
  --text-3: #8b94a3;
  --overlay: rgba(15, 23, 42, 0.45);
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px -6px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 12px 32px -8px rgba(15, 23, 42, 0.18);
  --shadow-sheet: 0 -8px 32px rgba(15, 23, 42, 0.18);

  /* layout */
  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 20px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --gutter: 16px;
  --tabbar-h: 56px;
  --sidebar-w: 260px;
  --content-max: 1100px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 12px;
  --fs-s: 13px;
  --fs: 15px;
  --fs-m: 17px;
  --fs-l: 22px;
  --fs-xl: 30px;
  --fs-xxl: 40px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 220ms;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --brand: #2dd4bf;
  --brand-600: #14b8a6;
  --brand-100: #0f3d3b;
  --brand-ink: #062a29;
  --income: #4ade80;
  --income-bg: #0f2f1c;
  --expense: #f87171;
  --expense-bg: #3a1618;
  --transfer: #60a5fa;
  --transfer-bg: #14264a;
  --bg: #0c0f14;
  --surface: #161a22;
  --surface-2: #1e232d;
  --surface-3: #272d39;
  --border: #262c37;
  --text: #eef2f7;
  --text-2: #a5adbb;
  --text-3: #6f7886;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.5);
  --shadow-sheet: 0 -8px 32px rgba(0,0,0,.6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #2dd4bf;
    --brand-600: #14b8a6;
    --brand-100: #0f3d3b;
    --brand-ink: #062a29;
    --income: #4ade80;
    --income-bg: #0f2f1c;
    --expense: #f87171;
    --expense-bg: #3a1618;
    --transfer: #60a5fa;
    --transfer-bg: #14264a;
    --bg: #0c0f14;
    --surface: #161a22;
    --surface-2: #1e232d;
    --surface-3: #272d39;
    --border: #262c37;
    --text: #eef2f7;
    --text-2: #a5adbb;
    --text-3: #6f7886;
    --overlay: rgba(0, 0, 0, 0.6);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 8px 24px rgba(0,0,0,.5);
    --shadow-sheet: 0 -8px 32px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

/* category / wallet palette (index by name) */
:root {
  --c-red: #ef4444; --c-orange: #f97316; --c-amber: #f59e0b; --c-yellow: #eab308;
  --c-lime: #84cc16; --c-green: #22c55e; --c-teal: #14b8a6; --c-cyan: #06b6d4;
  --c-sky: #0ea5e9; --c-blue: #3b82f6; --c-indigo: #6366f1; --c-violet: #8b5cf6;
  --c-purple: #a855f7; --c-fuchsia: #d946ef; --c-pink: #ec4899; --c-rose: #f43f5e; --c-slate: #64748b;
  --c-brown: #a16207;
}