/* ==========================================================================
   D.O.B — Taste-driven design system
   Reading this as: fintech consumer banking portal + marketing site for
   trust-conscious retail users, with a calm premium trustworthy language,
   leaning toward Tailwind utilities + Outfit/Instrument Sans + restrained motion.
   Dials: VARIANCE 4 / MOTION 3 / DENSITY 4 — trust-first, airy, quiet motion.
   ========================================================================== */

/* ---- Tokens (single accent lock) ---- */
:root{
  --ink:#0B1220;          /* off-black, not #000 */
  --paper:#F9FAFB;        /* zinc-50 */
  --paper-2:#F1F5F9;      /* slate-100 for subtle sections */
  --line:#E2E8F0;         /* slate-200 */
  --line-strong:#CBD5E1;  /* slate-300 */
  --muted:#64748B;        /* slate-500 */
  --muted-2:#94A3B8;      /* slate-400 */
  --accent:#14A673;       /* desaturated emerald (<80%) */
  --accent-2:#0F7A55;
  --accent-soft:#E6F4EE;
  --accent-soft-2:#D1EDE1;
  --danger:#DC2626;
  --danger-soft:#FEE2E2;
  --warn:#D97706;
  --radius-card:20px;     /* shape lock: cards 20px */
  --radius-pill:999px;    /* buttons/inputs pill or 14px */
  --radius-input:14px;
  --shadow-card: 0 8px 32px rgba(11,18,32,.06), 0 2px 8px rgba(11,18,32,.04);
  --shadow-card-hover: 0 16px 48px rgba(11,18,32,.09), 0 4px 16px rgba(11,18,32,.06);
}

/* keep legacy vars for JS that reads them, map to new system */
:root{
  --color-emerald: var(--accent);
  --color-bg: var(--paper);
  --color-text: var(--ink);
}

/* ---- Base ---- */
*{ scrollbar-width:thin; scrollbar-color: var(--line-strong) transparent; }
html{ scroll-behavior:smooth; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3{ font-family: "Outfit", system-ui, sans-serif; letter-spacing:-0.02em; }
.font-mono{ font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ---- Focus (a11y) ---- */
*:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- Animations (restrained, motion 3) ---- */
@keyframes floatSoft{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes shimmerLedger{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(200%) } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.animate-floatSoft{ animation: floatSoft 6s ease-in-out infinite; }
.reveal{ opacity:0; transform:translateY(14px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.06s } .reveal-d2{ transition-delay:.11s } .reveal-d3{ transition-delay:.16s }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---- Signature: Vault Line ---- */
.vault-line{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  position:relative; overflow:hidden;
}
.vault-line::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  width:28%; transform:translateX(-100%);
  animation: shimmerLedger 3.2s cubic-bezier(.16,1,.3,1) infinite;
  opacity:.9;
}
@media (prefers-reduced-motion: reduce){ .vault-line::after{ display:none; } }

/* ---- Pending "beep" indicator ---- */
@keyframes beepRing{
  0%{ box-shadow: 0 0 0 0 rgba(217,119,6,.38); }
  70%{ box-shadow: 0 0 0 7px rgba(217,119,6,0); }
  100%{ box-shadow: 0 0 0 0 rgba(217,119,6,0); }
}
@keyframes beepBlink{
  0%,55%{ opacity:1; }
  56%,100%{ opacity:.25; }
}
.status-pending{
  animation: beepRing 1.4s cubic-bezier(.16,1,.3,1) infinite;
}
.status-pending .status-blink,
.status-blink{
  animation: beepBlink 1.4s step-start infinite;
  display:inline-block;
}

/* ---- Utilities ---- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card:hover{ box-shadow: var(--shadow-card-hover); }
.btn-primary{
  background: var(--ink); color:#fff;
  border-radius: var(--radius-pill);
  font-weight:600; font-size:14px;
  padding: 12px 20px;
  transition: transform .18s, background .18s, box-shadow .18s;
}
.btn-primary:hover{ background:#111D33; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(11,18,32,.18); }
.btn-primary:active{ transform: scale(.98); }
.btn-accent{
  background: var(--accent); color:#0B1220;
  border-radius: var(--radius-pill);
  font-weight:700;
}
.btn-accent:hover{ background: var(--accent-2); color:#fff; }
.btn-ghost{
  background:#fff; border:1px solid var(--line); color:var(--ink);
  border-radius: var(--radius-pill); font-weight:600;
}
.btn-ghost:hover{ border-color: var(--ink); }

.input{
  width:100%; background:#fff; border:1px solid var(--line);
  border-radius: var(--radius-input);
  padding: 11px 14px; font-size:14px; color:var(--ink);
  transition: border-color .18s, box-shadow .18s;
}
.input:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder{ color: var(--muted-2); }

/* legacy helpers kept */
.custom-scrollbar::-webkit-scrollbar{ width:6px; height:6px; }
.custom-scrollbar::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius:999px; }

/* ensure lucide sizing */
[data-lucide]{ stroke-width:1.75; }

/* ---- Native dropdown legibility ---- */
select option{ background:#ffffff; color:#0B1220; }
html.dark select option{ background:#0F1420; color:#ffffff; }
select:disabled, button:disabled{ cursor:not-allowed; opacity:.65; }