/* ─────────────────────────────────────────────────────────────────────────────
   Theme 1 — Minimal Fintech
   Cool off-white canvas · frosted chrome · clean type · soft layered elevation.
   The default theme: every screen should feel calm, trustworthy, premium.
   ───────────────────────────────────────────────────────────────────────────── */

:root[data-theme="theme-1"] {
  --bg:           #F0F2F6;
  --surface:      #ffffff;
  --ink:          #0E1118;
  --ink-soft:     #5E6776;
  --line:         #E4E7EE;
  --ok:           #1A8F5F;
  --warn:         #A15C00;
  --danger:       #B42318;
  --radius:       18px;
  --radius-sm:    13px;
  --space:        16px;
  --title-weight: 800;
  --font:         system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow:       0 1px 2px rgba(14,17,24,.04), 0 6px 20px rgba(14,17,24,.07);
  --shadow-lg:    0 4px 6px rgba(14,17,24,.04), 0 12px 32px rgba(14,17,24,.10);
  --topbar-bg:    rgba(240,242,246,.88);
  --topbar-ink:   #0E1118;
  --nav-bg:       rgba(255,255,255,.95);
}

/* frosted glass chrome */
[data-theme="theme-1"] .topbar,
[data-theme="theme-1"] .tabbar { backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }

/* ── auth pages ───────────────────────────────────────────────────────────── */

/* subtle radial brand tint in the upper quadrant */
body[data-theme="theme-1"][data-page="login"],
body[data-theme="theme-1"][data-page="register"],
body[data-theme="theme-1"][data-page="forgot-password"],
body[data-theme="theme-1"][data-page="pin"],
body[data-theme="theme-1"][data-page="lock"] {
  background:
    radial-gradient(ellipse 130% 42% at 60% -5%, color-mix(in srgb, var(--brand-color) 11%, transparent), transparent 70%),
    var(--bg);
}

[data-theme="theme-1"] .auth__mark {
  border-radius: 20px;
  box-shadow:
    0 8px 28px color-mix(in srgb, var(--brand-color) 30%, transparent),
    0 2px 6px color-mix(in srgb, var(--brand-color) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.3);
}

[data-theme="theme-1"] .auth__title { letter-spacing: -.5px; }

/* ── topbar ───────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .topbar { border-bottom: 1px solid rgba(228,231,238,.7); }
[data-theme="theme-1"] .topbar__brand { letter-spacing: -.3px; }

/* ── bottom tab bar ───────────────────────────────────────────────────────── */

[data-theme="theme-1"] .tabbar { border-top: 1px solid rgba(228,231,238,.7); }
[data-theme="theme-1"] .tabbar__item.is-active .tabbar__ic { transform: translateY(-2px) scale(1.08); }

/* ── cards ────────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .card { border-radius: var(--radius); border-color: rgba(228,231,238,.8); }
[data-theme="theme-1"] .card__title,
[data-theme="theme-1"] .listhead__title,
[data-theme="theme-1"] .greet__name { letter-spacing: -.35px; }

/* ── hero balance card ────────────────────────────────────────────────────── */

[data-theme="theme-1"] .hero { border-radius: 20px; }
[data-theme="theme-1"] .hero__amt { font-size: 40px; letter-spacing: -1px; }

/* ── quick actions ────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .qa__ic { border-radius: 16px; }
[data-theme="theme-1"] .qa:active .qa__ic { transform: translateY(2px) scale(.92); }

/* ── buttons ──────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .btn { border-radius: var(--radius-sm); }
[data-theme="theme-1"] .btn--primary { letter-spacing: .1px; }

/* ── inputs ───────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .input { border-color: rgba(228,231,238,.9); background: #fafbfc; }
[data-theme="theme-1"] .input:focus { background: var(--surface); }

/* ── property cards ───────────────────────────────────────────────────────── */

[data-theme="theme-1"] .pcard { border-radius: var(--radius); border-color: rgba(228,231,238,.8); }
[data-theme="theme-1"] .pcard:active { transform: translateY(1px); }
[data-theme="theme-1"] .pcard__name { letter-spacing: -.2px; }

/* ── activity rows ────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .act__ic { border-radius: 14px; }
[data-theme="theme-1"] .assetcard__ic { border-radius: 14px; }

/* ── portfolio snapshot ───────────────────────────────────────────────────── */

[data-theme="theme-1"] .snap__val { font-size: 22px; letter-spacing: -.4px; }

/* ── menu rows ────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .menu { border-radius: var(--radius); }
[data-theme="theme-1"] .menu__row { padding: 15px 16px; }

/* ── statgrid ─────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .statgrid { border-radius: var(--radius); }
[data-theme="theme-1"] .stat__val { letter-spacing: -.3px; }

/* ── avatar ───────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .avatar,
[data-theme="theme-1"] .greet__av { border-radius: 14px; }

/* ── iconbtn ──────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .iconbtn { border-radius: 13px; }

/* ── chips ────────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .chip { border-radius: 999px; }
[data-theme="theme-1"] .amt-chip { border-radius: 999px; font-weight: 700; }

/* ── hub tiles (drawer theme variant) ────────────────────────────────────── */

[data-theme="theme-1"] .hub__tile { border-radius: var(--radius); }
[data-theme="theme-1"] .hub__ic { border-radius: 14px; }

/* ── buybar ───────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .buybar { border-radius: 0; box-shadow: 0 -4px 20px rgba(14,17,24,.07); }

/* ── receipt ──────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .receipt__badge { border-radius: 20px; width: 64px; height: 64px; }

/* ── bankpick ─────────────────────────────────────────────────────────────── */

[data-theme="theme-1"] .bankpick__ic { border-radius: 13px; }

/* ── prompt / KYC banner ──────────────────────────────────────────────────── */

[data-theme="theme-1"] .prompt { border-radius: var(--radius); }
[data-theme="theme-1"] .prompt__ic { border-radius: 13px; }

/* ── fade-in animation (slightly smoother) ───────────────────────────────── */

[data-theme="theme-1"] .fade-in { animation: theme1FadeUp .4s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes theme1FadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── focus ring ───────────────────────────────────────────────────────────── */

[data-theme="theme-1"] *:focus-visible {
  outline: 2px solid var(--brand-color);
  outline-offset: 2px;
  border-radius: 4px;
}