/* ==========================================================================
   CROWN CAPITAL BANK — DESIGN TOKENS
   Palette: deep trust-blue + paper white, ledger-inspired accents
   Type: Fraunces (display) / Inter (UI + body) / IBM Plex Mono (data)
   ========================================================================== */

:root{
  /* ---- Brand blues ---- */
  --navy-950:#060F22;
  --navy-900:#0A1F44;
  --navy-800:#0F2A5C;
  --blue-700:#123FAE;
  --blue-600:#1451D6;
  --blue-500:#3D74F2;
  --sky-400:#6FA0FF;
  --ice-200:#D9E6FF;
  --ice-100:#EAF1FF;
  --ice-50:#F4F8FF;

  /* ---- Neutrals ---- */
  --paper-50:#F6F8FC;
  --white:#FFFFFF;
  --ink-900:#0F1B2D;
  --ink-700:#28354A;
  --ink-600:#46536B;
  --ink-400:#7C8AA3;
  --ink-200:#C4CEDE;
  --line-200:#E2E8F4;
  --line-100:#EEF2F9;

  /* ---- Signal colors ---- */
  --mint-600:#0F9D6F;
  --mint-100:#E3FBF3;
  --amber-600:#B9760B;
  --amber-100:#FDF1DD;
  --red-600:#D14343;
  --red-100:#FBE7E7;

  /* ---- Type ---- */
  --font-display:"Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* ---- Scale ---- */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(10,31,68,0.06), 0 1px 1px rgba(10,31,68,0.04);
  --shadow-md:0 8px 24px rgba(10,31,68,0.10);
  --shadow-lg:0 24px 60px rgba(10,31,68,0.16);
  --shadow-navy:0 20px 50px rgba(6,15,34,0.35);

  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper-50);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
input,select,textarea{ font-family:inherit; font-size:inherit; }

:focus-visible{
  outline:2.5px solid var(--blue-500);
  outline-offset:2px;
  border-radius:4px;
}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-600);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:16px;
  height:1px;
  background:var(--blue-600);
}

h1,.h1{ font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-0.01em; color:var(--navy-900); }
h2,.h2{ font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-0.01em; color:var(--navy-900); }
h3,.h3{ font-family:var(--font-display); font-weight:600; line-height:1.2; color:var(--navy-900); }

.lede{ font-size:19px; line-height:1.6; color:var(--ink-600); }
.mono{ font-family:var(--font-mono); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:15px;
  border:1.5px solid transparent;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--blue-600); color:var(--white); box-shadow:var(--shadow-md); }
.btn-primary:hover{ background:var(--blue-700); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--navy-900); border-color:var(--line-200); }
.btn-ghost:hover{ border-color:var(--blue-500); color:var(--blue-600); }
.btn-white{ background:var(--white); color:var(--navy-900); box-shadow:var(--shadow-md); }
.btn-white:hover{ transform:translateY(-1px); }
.btn-onDark{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.35); }
.btn-onDark:hover{ border-color:var(--white); background:rgba(255,255,255,0.08); }
.btn-sm{ padding:9px 16px; font-size:13.5px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none !important; }

.btn-icon{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ice-100); color:var(--blue-600); border:none;
  transition:background .16s var(--ease);
}
.btn-icon:hover{ background:var(--ice-200); }

/* ---- Cards ---- */
.card{
  background:var(--white);
  border:1px solid var(--line-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card-pad{ padding:28px; }

/* ---- Badges ---- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:var(--radius-pill);
  font-size:12.5px;
  font-weight:600;
}
.badge-mint{ background:var(--mint-100); color:var(--mint-600); }
.badge-amber{ background:var(--amber-100); color:var(--amber-600); }
.badge-red{ background:var(--red-100); color:var(--red-600); }
.badge-blue{ background:var(--ice-100); color:var(--blue-600); }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ---- Forms ---- */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field label{ font-size:13.5px; font-weight:600; color:var(--ink-700); }
.field .hint{ font-size:12.5px; color:var(--ink-400); }
.input, select.input, textarea.input{
  padding:12px 14px;
  border:1.5px solid var(--line-200);
  border-radius:var(--radius-sm);
  background:var(--white);
  font-size:15px;
  color:var(--ink-900);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
  width:100%;
}
.input:focus{ border-color:var(--blue-500); box-shadow:0 0 0 4px var(--ice-100); outline:none; }
.input-group{ position:relative; }
.input-prefix{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-400); font-size:15px; }
.input-group .input{ padding-left:32px; }

/* ---- Ledger pulse — signature motif ---- */
.pulse-line{ position:relative; width:100%; height:1px; background:var(--line-200); overflow:visible; }
.pulse-line .dot{
  position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px;
  border-radius:50%; background:var(--blue-500);
  box-shadow:0 0 0 4px var(--ice-100);
  animation:travel 7s linear infinite;
}
@keyframes travel{
  0%{ left:0%; opacity:0; }
  5%{ opacity:1; }
  95%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}

/* ---- Scrollbar polish ---- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--ink-200); border-radius:10px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---- Utility ---- */
.text-mint{ color:var(--mint-600); }
.text-red{ color:var(--red-600); }
.text-muted{ color:var(--ink-600); }
.text-faint{ color:var(--ink-400); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }