/* ============================================================
 * Utility classes — the design system's idiom (CSS-variable +
 * utility-class based, not a prop API). Mix freely with raw tokens.
 * ============================================================ */

/* ---- Base ---- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Typography utilities ---- */
.text-display  { font-size: var(--font-size-display);  line-height: var(--line-height-display);  font-weight: var(--font-weight-semibold); }
.text-title-lg { font-size: var(--font-size-title-lg); line-height: var(--line-height-title-lg); font-weight: var(--font-weight-semibold); }
.text-title-md { font-size: var(--font-size-title-md); line-height: var(--line-height-title-md); font-weight: var(--font-weight-semibold); }
.text-subtitle { font-size: var(--font-size-subtitle); line-height: var(--line-height-subtitle); font-weight: var(--font-weight-medium); }
.text-body     { font-size: var(--font-size-body);     line-height: var(--line-height-body);     font-weight: var(--font-weight-regular); }
.text-body-md  { font-size: var(--font-size-body);     line-height: var(--line-height-body);     font-weight: var(--font-weight-medium); }
.text-caption  { font-size: var(--font-size-caption);  line-height: var(--line-height-caption);  font-weight: var(--font-weight-regular); }
.text-label    { font-size: var(--font-size-label);    line-height: var(--line-height-label);    font-weight: var(--font-weight-medium); }
.text-tiny     { font-size: var(--font-size-tiny);     line-height: var(--line-height-tiny);     font-weight: var(--font-weight-regular); }

.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-disabled  { color: var(--color-text-disabled); }
.text-primary-color { color: var(--color-primary); }

/* ---- Surface utilities ---- */
.surface {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.surface-flat {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
}
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
}
.glass {
  background: var(--color-glass);
  border: 1px solid var(--color-glass-border);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
}

/* ---- Button ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-title-md);
  padding: var(--space-12) var(--space-20);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-pressed); }
.btn-soft {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.btn-ghost {
  background: transparent;
  color: var(--color-primary);
}
/* Dark filled button — the alternate primary seen in the wallet/Nobu files */
.btn-dark {
  background: var(--color-text-primary);
  color: var(--color-surface);
}
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- Pill / status badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-tiny);
  line-height: var(--line-height-tiny);
  font-weight: var(--font-weight-medium);
}
.badge-status { background: var(--color-coupon-status); color: var(--white); }

/* ---- Circular icon button (back / actions) ---- */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  border: none;
  cursor: pointer;
}

/* ---- Coupon card (warm sub-theme) ---- */
.coupon {
  background: var(--color-coupon-bg);
  color: var(--color-coupon-text);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
}
.coupon-amount { color: var(--color-coupon-amount); font-weight: var(--font-weight-semibold); }

/* ---- Membership card (light frosted-glass + pastel glow) ---- */
.card-frosted {
  background: var(--card-frosted);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  color: var(--color-text-primary);
}

/* ---- Dark / "deep" card (bank-card & feature surfaces) ---- */
.card-dark {
  background: var(--gradient-card-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  color: var(--white);
}
.card-dark--navy { background: var(--gradient-card-navy); }
.card-dark--teal { background: var(--gradient-card-teal); }

/* ---- Tinted section / surface ---- */
.surface-tinted { background: var(--color-surface-tinted); border-radius: var(--radius-lg); }

/* ---- Divider ---- */
.divider { height: 1px; background: var(--color-divider); border: 0; }

/* ============================================================
 * App screen scaffold — the canonical page shell every wallet
 * tab uses (Me / Home / Wallet). Cool gradient backdrop, a large
 * bold title top-left, a control cluster top-right, content in
 * white rounded cards, and the floating tab bar pinned bottom.
 * ============================================================ */

/* Screen root: full-height, gradient backdrop, 16px side padding.
   Reserve bottom space (~110px) so content clears the floating tab bar. */
.app-screen {
  position: relative;
  min-height: 100vh;
  padding: 0 var(--screen-padding-x) calc(var(--space-32) + 78px);
  background: var(--app-backdrop);
  background-repeat: no-repeat;
}
.app-backdrop { background: var(--app-backdrop); background-repeat: no-repeat; }

/* Header row: big title left, action cluster right. */
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding-top: var(--space-28);
  padding-bottom: var(--space-20);
}
.screen-title {
  margin: 0;
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

/* Header actions: standalone round buttons, spaced. */
.header-actions { display: flex; align-items: center; gap: var(--space-12); }

/* Grouped cluster: 2+ round icon buttons inside ONE white pill
   (the bell+gear on Me, the NFC+plus on Wallet). Buttons inside drop
   their own shadow/fill — the pill carries the elevation. */
.header-cluster {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}
.header-cluster .icon-button { box-shadow: none; background: transparent; }

/* Vertical hairline splitter (e.g. between QRIS | Transfer actions). */
.cluster-split { width: 1px; align-self: stretch; background: var(--color-divider); margin: var(--space-4) 0; }

/* Content group card: the rounded white container that wraps stacked
   list rows. Uses the larger --radius-xl seen in the live app, and a
   softer translucent white so the backdrop reads through faintly. */
.card-group {
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .card-group { background: rgba(38, 38, 38, 0.72); }

/* Floating tab bar wrapper: pin to bottom, centered, with side inset. */
.tabbar-dock {
  position: fixed;
  left: 50%;
  bottom: var(--space-12);
  transform: translateX(-50%);
  width: calc(100% - var(--space-32));
  max-width: 420px;
}