/* PasalPay — design tokens */
:root {
  /* Brand: deep Himalayan teal + marigold accent + warm paper */
  --ink: #0e1f27;
  --ink-2: #27424d;
  --ink-3: #5a7683;
  --muted: #95a9b2;
  --line: #dde5e9;
  --line-2: #eaf0f2;

  --paper: #f6f1e7;      /* warm cream */
  --paper-2: #fbf8f1;
  --surface: #ffffff;

  --teal: #0f5a5e;       /* primary */
  --teal-2: #0a4447;
  --teal-soft: #dbeae9;
  --teal-tint: #eef5f4;

  --saffron: #e89b2a;    /* accent (marigold) */
  --saffron-soft: #fde8c4;
  --crimson: #b42a2a;    /* Nepali red, used sparingly */
  --crimson-soft: #f7d7d4;

  --good: #2e7d4f;
  --good-soft: #d7ebde;
  --warn: #c96a0a;
  --warn-soft: #ffe3c0;
  --bad: #b42a2a;
  --bad-soft: #f7d7d4;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shadow-1: 0 1px 2px rgba(14, 31, 39, 0.06), 0 2px 6px rgba(14, 31, 39, 0.04);
  --shadow-2: 0 2px 6px rgba(14, 31, 39, 0.08), 0 12px 32px rgba(14, 31, 39, 0.08);
  --shadow-3: 0 8px 24px rgba(14, 31, 39, 0.12), 0 24px 64px rgba(14, 31, 39, 0.14);

  --font-sans: 'Plus Jakarta Sans', 'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-np: 'Noto Sans Devanagari', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #eef0ea;
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ————— typography helpers ————— */
.t-display { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; }
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.np { font-family: var(--font-np); }

/* ————— tablet bezel (landscape android) ————— */
.tab-bezel {
  background: #0c0c0e;
  border-radius: 34px;
  padding: 16px;
  box-shadow: var(--shadow-3);
  position: relative;
}
.tab-bezel::before, .tab-bezel::after {
  content: "";
  position: absolute;
  background: #1b1d22;
  border-radius: 2px;
}
.tab-bezel::before { /* camera */
  width: 8px; height: 8px; border-radius: 50%;
  left: 50%; top: 8px; transform: translateX(-50%);
  background: #2a2d34; box-shadow: inset 0 0 0 2px #111;
}
.tab-screen {
  background: var(--paper-2);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

/* ————— phone bezel ————— */
.phone-bezel {
  background: #0c0c0e;
  border-radius: 44px;
  padding: 10px;
  box-shadow: var(--shadow-3);
}
.phone-screen {
  background: var(--paper-2);
  border-radius: 36px;
  overflow: hidden;
  position: relative;
}

/* ————— buttons ————— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 20px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 16px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-2); }
.btn-accent { background: var(--saffron); color: #2a1a00; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--line-2); }
.btn-lg { padding: 18px 26px; font-size: 18px; border-radius: var(--r-lg); }
.btn-xl { padding: 22px 30px; font-size: 22px; border-radius: var(--r-xl); }

/* ————— card ————— */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

/* ————— chip / badge ————— */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--teal-tint); color: var(--teal-2);
}
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-bad { background: var(--bad-soft); color: var(--bad); }
.chip-good { background: var(--good-soft); color: var(--good); }

/* scrollbar hide for faux-scroll areas */
.noscroll::-webkit-scrollbar { display: none; }
.noscroll { scrollbar-width: none; }