/* ============================================================
   Vela — Mortgage origination workspace
   Design tokens + base styles · "Direction B" identity
   Clean · techy · futuristic — cool light, electric blue→cyan,
   Sora + JetBrains Mono
   ============================================================ */

:root {
  /* Surfaces (cool light neutrals) */
  --paper:        #F2F5FB;   /* app background */
  --surface:      #FFFFFF;   /* cards / panels */
  --surface-2:    #F4F7FD;   /* subtle raised */
  --line:         #E2E9F4;   /* hairline borders */
  --line-strong:  #D2DDEC;

  /* Ink (deep cool navy — also the dark sidebar surface) */
  --ink:          #0B1B36;   /* primary text + dark chrome */
  --ink-2:        #3C4F6E;   /* secondary text */
  --ink-3:        #66778F;   /* tertiary / muted */
  --ink-4:        #94A2BC;   /* faint */
  --ink-inv:      #EAF1FB;   /* text on dark */

  /* Brand accent (electric blue) + cyan partner.
     --gold* names kept for compatibility; they now carry the blue. */
  --gold:         #1466FF;   /* primary accent */
  --gold-2:       #2B7BFF;   /* brighter accent / hover */
  --gold-soft:    #E9F1FF;   /* tint */
  --gold-line:    #CFE0FF;   /* tint border */
  --cyan:         #06B6D4;   /* futuristic partner / live signal */
  --cyan-soft:    #E0F6FB;

  /* Semantic status (cool) */
  --green:        #0E9466;
  --green-soft:   #E4F6EE;
  --amber:        #C0820E;
  --amber-soft:   #FAF0D8;
  --red:          #E04B43;
  --red-soft:     #FCE9E7;
  --blue:         #0AA0C4;   /* "collecting" — reads as cyan */
  --blue-soft:    #E0F4F9;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* Shadow (cool navy) */
  --sh-sm: 0 1px 2px rgba(11,27,54,.05), 0 1px 1px rgba(11,27,54,.04);
  --sh-md: 0 4px 16px rgba(11,27,54,.07), 0 1px 3px rgba(11,27,54,.05);
  --sh-lg: 0 18px 48px rgba(11,27,54,.16), 0 4px 12px rgba(11,27,54,.08);
  --sh-pop: 0 12px 40px rgba(11,27,54,.18);
  --sh-glow: 0 6px 20px -5px rgba(20,102,255,.45);

  /* Type */
  --serif: "Sora", system-ui, -apple-system, sans-serif;   /* display */
  --sans:  "Sora", system-ui, -apple-system, sans-serif;   /* UI / body */
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Density (overridden by tweaks) */
  --pad: 24px;
  --row-h: 56px;
}

/* density variants */
[data-density="compact"] { --pad: 16px; --row-h: 46px; }
[data-density="comfy"]   { --pad: 32px; --row-h: 64px; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { height: 100%; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

::selection { background: var(--gold-soft); }

/* Numerals / money */
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }
.tnum { font-variant-numeric: tabular-nums; }

/* Display (formerly serif headlines — now Sora) */
.serif { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; line-height: 1.16; }

/* ---- scrollbars ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C7D2E2; border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #AEBCD2; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Reusable atoms
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; transition: all .15s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--ink); color: var(--ink-inv); }
.btn-primary:hover { background: #14264a; box-shadow: var(--sh-md); }
/* Primary CTA — electric blue→cyan gradient with a soft glow */
.btn-gold { background: linear-gradient(120deg, var(--gold), var(--cyan)); color: #fff; box-shadow: var(--sh-glow); }
.btn-gold:hover { filter: brightness(1.06); box-shadow: 0 8px 24px -5px rgba(20,102,255,.55); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface); border-color: var(--ink-3); color: var(--ink); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: rgba(20,102,255,.07); color: var(--ink); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}

.label-cap {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* focus ring */
.focusable:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* animations */
@keyframes fadeUp { from { transform: translateY(10px); } to { transform: translateY(0); } }
@keyframes fadeIn { from { transform: translateY(4px); } to { transform: translateY(0); } }
@keyframes growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { from { transform: scale(.94); } to { transform: scale(1); } }
@keyframes slideIn { from { transform: translateX(40px); } to { transform: translateX(0); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(20,102,255,.4); } 70% { box-shadow: 0 0 0 8px rgba(20,102,255,0); } 100% { box-shadow: 0 0 0 0 rgba(20,102,255,0); } }
.anim-fadeup { animation: fadeUp .45s cubic-bezier(.2,.7,.3,1) both; }
.anim-fadein { animation: fadeIn .4s ease both; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; }
}