/*
 * base.css — reset, default design tokens, and the structural skeleton. Every rule
 * references var(--token); a theme file (themes/theme-N.css) overrides the tokens and
 * adds personality. Per-developer brand values (--brand-color) are set at runtime by
 * theme.js on top of whichever theme is active.
 */

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
html { scroll-behavior: smooth; }
body { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
input, select, textarea { font: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
:root { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
/* better text selection color */
::selection { background: color-mix(in srgb, var(--brand-color) 22%, transparent); }
/* hide scrollbars on touch UI */
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- default tokens (themes override) ---- */
:root {
  --brand-color: #0B5FFF;
  --brand-color-ink: #ffffff;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --ink: #16181d;
  --ink-soft: #5b6370;
  --line: #e6e8ec;
  --ok: #1a8f5f;
  --warn: #a15c00;
  --danger: #b42318;

  --radius: 14px;
  --radius-sm: 10px;
  --space: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --title-weight: 800;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06);

  --topbar-bg: var(--surface);
  --topbar-ink: var(--ink);
  --nav-bg: var(--surface);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  font-size: 15px;
  /* Fintech: figures align in columns everywhere (balances, amounts, tables). */
  font-variant-numeric: tabular-nums;
  /* prevent iOS input zoom on focus */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---- layout skeleton ---- */
.content {
  padding: var(--space);
  display: flex;
  flex-direction: column;
  gap: var(--space);
  /* max width on large tablets / landscape phones */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* when chrome (topbar/nav) is injected, pad around it */
body.has-chrome .content { padding-top: 12px; }
body.has-chrome.nav-tabs .content { padding-bottom: calc(76px + var(--safe-bottom)); }

.stack { display: flex; flex-direction: column; gap: var(--space); }
.screen { min-height: 100%; display: flex; flex-direction: column; }
/* utility: visually hidden but screen-reader accessible */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- splash ---- */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  /* Pre-brand: clean white */
  background-color: #ffffff;
  color: #16181d;
  transition: background-color .45s ease, color .45s ease;
}
/* Fancy white state: soft radial glow in the centre */
.splash::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 80% 65% at 50% 44%, #eef2ff 0%, transparent 100%);
  transition: opacity .45s ease;
}
/* All child content sits above the pseudo-element */
.splash > * { position: relative; z-index: 1; }
/* Branded state: switch to developer colour */
.splash.branded { background-color: var(--brand-color); color: var(--brand-color-ink); }
.splash.branded::before { opacity: 0; }
.splash.is-hiding { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
/* Logo box — subtle on white, glassy when branded */
.splash__logo {
  width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px;
  background: rgba(0,0,0,.04); font-size: 34px; font-weight: 800;
  box-shadow: 0 2px 14px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,1);
  transition: background .45s ease, box-shadow .45s ease;
}
.splash.branded .splash__logo { background: rgba(255,255,255,.18); box-shadow: 0 8px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.25); }
.splash__name { font-size: 20px; font-weight: 700; letter-spacing: -.2px; }
.splash__status { font-size: 13px; opacity: .75; letter-spacing: .2px; }
/* Spinner — dark on white, light on brand colour */
.spinner {
  width: 26px; height: 26px; border-radius: 50%; animation: spin .8s linear infinite;
  border: 2.5px solid rgba(0,0,0,.1); border-top-color: #16181d;
  transition: border-color .45s ease;
}
.splash.branded .spinner { border-color: rgba(255,255,255,.3); border-top-color: var(--brand-color-ink); }
@keyframes spin { to { transform: rotate(360deg); } }