/*
 * theme.css — Moneyplant India Client Portal.
 * Quiet as a bank statement, precise as a ledger: warm paper canvas, one
 * moss-green accent for links/trust, one brass accent reserved for the
 * single action that matters. 6px corners, shadow tier 1, hairline rules.
 */

:root {
  --canvas: #faf9f5;
  --surface: #fdfcfb;
  --surface-2: #f2efe6;
  --border: #e3ddd0;
  --border-strong: #cdc3ac;
  --ink: #1b2420;
  --muted: #626663;

  --accent: #c08a2e;
  --accent-hover: #a97a28;
  --accent-ink: #1b1710;
  --accent-text: #1f6f4a;
  --accent-strong: #7f5b1e;
  --accent-soft: #f3e9d4;
  --accent-border: #d9be8b;

  --success: #1f6f4a;
  --success-ink: #ffffff;
  --success-soft: #e3efe6;
  --success-strong: #185c3c;
  --warning: #a15c1f;
  --warning-ink: #ffffff;
  --warning-soft: #f3e6d5;
  --warning-strong: #8a4d18;
  --danger: #9c2b26;
  --danger-ink: #ffffff;
  --danger-soft: #f4dedd;
  --danger-strong: #86211d;

  --chart-1: #c08a2e;
  --chart-2: #1f6f4a;
  --chart-3: #2f7d8a;
  --chart-4: #5b6a86;
  --chart-5: #b06a3e;
  --chart-6: #6d5aa6;

  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 0.375rem;
  --radius-card: 0.375rem;
  --radius-input: 0.375rem;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-raised: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
  --shadow-btn: none;
  --card-pad: 1.25rem;
  --caps: none;
  --caps-tracking: 0.03em;
  --btn-weight: 600;
}

html[data-theme="dark"] {
  --canvas: #14160f;
  --surface: #1b1e17;
  --surface-2: #22261c;
  --border: #2d3126;
  --border-strong: #3c4132;
  --ink: #f2efe6;
  --muted: #9a9d8f;

  --accent: #d9a13c;
  --accent-hover: #c38f2f;
  --accent-ink: #17140f;
  --accent-text: #52bd8d;
  --accent-strong: #e0b563;
  --accent-soft: #2c2413;
  --accent-border: #4a3c1e;

  --success: #52bd8d;
  --success-ink: #0d1f16;
  --success-soft: #16241c;
  --success-strong: #7ad1a8;
  --warning: #d99a4e;
  --warning-ink: #2a1c08;
  --warning-soft: #2c2013;
  --warning-strong: #e6b573;
  --danger: #e2685f;
  --danger-ink: #2a0d0a;
  --danger-soft: #2c1613;
  --danger-strong: #f0938c;

  --chart-1: #d9a13c;
  --chart-2: #52bd8d;
  --chart-3: #4fa7b9;
  --chart-4: #8790a8;
  --chart-5: #d98a5e;
  --chart-6: #a68ad9;

  --shadow-card: 0 1px 2px color-mix(in srgb, #000000 30%, transparent);
  --shadow-raised: 0 10px 28px color-mix(in srgb, #000000 45%, transparent);
}

/*
 * app.css — Moneyplant India. What no primitive covers: the OTP success
 * check, the portfolio-value entrance, the allocation bar, the chat bubbles,
 * and the bottom tab bar's safe-area padding on a real phone. Tokens only.
 */

/* ---- Bottom tab bar: room for the home-indicator on a real phone -------- */
nav[aria-label="Primary"] {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ---- The one orchestrated motion: OTP digits settle into a check, which
   crossfades the panel into the dashboard hand-off. Rests visible; the
   keyframe only adds emphasis for a visitor who can see motion. ------------ */
@keyframes otp-check-in {
  from { opacity: 0.4; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}
.otp-success-check {
  animation: otp-check-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html.reduced-motion .otp-success-check { animation: none; }

#auth-panel[data-redirect] {
  animation: fade-up 260ms ease both;
}

/* ---- Hero portfolio figure: rests at its real value, count-up adds the
   entrance once, on first view. -------------------------------------------- */
.hero-figure {
  animation: fade-up 420ms ease both;
}
html.reduced-motion .hero-figure { animation: none; }

/* ---- Allocation — a slim horizontal stacked bar, never a donut ---------- */
.alloc-bar {
  display: flex;
  width: 100%;
  height: 0.625rem;
  overflow: hidden;
  border-radius: var(--radius-btn, 999px);
  background: var(--surface-2);
}
.alloc-bar > span {
  height: 100%;
  transition: flex-basis 300ms ease;
}
.alloc-legend { display: flex; flex-direction: column; gap: 0.625rem; }
.alloc-legend-row { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; }
.alloc-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; flex: none; }
.alloc-legend-name { flex: 1; min-width: 0; color: var(--ink); }
.alloc-legend-pct { font-variant-numeric: tabular-nums; color: var(--muted); }

/* ---- Finny chat bubbles --------------------------------------------------- */
.chat-row { display: flex; }
.chat-row.is-user { justify-content: flex-end; }
.chat-bubble {
  max-width: 85%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: var(--radius-card, 0.75rem);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
}
.chat-row.is-user .chat-bubble {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--ink);
}
.chat-row.is-assistant .chat-bubble { background: var(--surface-2); border-color: transparent; }

/* ---- OTP boxes: a single hairline focus ring, mono figures --------------- */
[data-otp-index] { caret-color: var(--accent-text); }