/* =========================================================================
   Dealdrum — Originator OS · design tokens
   Visual direction: calm institutional fintech. Warm off-white surfaces,
   refined purple primary, italic serif for hero numbers, geometric sans
   for UI. Inspired by Carta / Mercury / Stripe Atlas restraint.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ─── BRAND ───────────────────────────────────────────────────────────── */
  --primary:        #5B50E5;
  --primary-hover:  #4F44D9;
  --primary-press:  #4339C7;
  --primary-pale:   #EEEBFF;
  --primary-soft:   #DCD7FF;
  --primary-ink:    #2A1FAE;

  --accent-gold:    #B17A0E;
  --accent-gold-bg: #FBF1D7;

  /* ─── INK ─────────────────────────────────────────────────────────────── */
  --ink-1:   #0E1014;   /* primary text */
  --ink-2:   #1F232B;   /* h2/h3 */
  --ink-3:   #444B57;   /* secondary */
  --ink-4:   #6B7280;   /* tertiary */
  --ink-5:   #9099A6;   /* muted */
  --ink-6:   #BDC4CE;   /* hint */

  /* ─── SURFACES ────────────────────────────────────────────────────────── */
  --bg:           #FAFAF6;
  --bg-alt:       #F4F4EE;
  --panel:        #FFFFFF;
  --panel-alt:    #FCFCF9;
  --panel-ink:    #0E1014;     /* dark surface for contrast modules */
  --panel-ink-2:  #1A1D24;

  --border:        #E5E4DC;
  --border-soft:   #EEEDE5;
  --border-strong: #CFCEC2;
  --border-ink:    #2A2D35;
  --divider:       #ECECE3;

  /* ─── SEMANTIC ────────────────────────────────────────────────────────── */
  --success:    #0F7A3E;
  --success-bg: #E3F1E8;
  --success-bd: #B7DCC4;
  --warn:       #A86B0B;
  --warn-bg:    #FBF1D7;
  --warn-bd:    #ECD58E;
  --danger:     #B0241D;
  --danger-bg:  #FBE2DE;
  --danger-bd:  #EFB5B0;
  --info:       #1F5BE0;
  --info-bg:    #E3ECFE;
  --info-bd:    #BFD0F8;

  /* ─── SHADOWS ─────────────────────────────────────────────────────────── */
  --sh-1: 0 1px 1px rgba(14,16,20,.04), 0 0 0 1px rgba(14,16,20,.03);
  --sh-2: 0 1px 2px rgba(14,16,20,.04), 0 4px 12px rgba(14,16,20,.05);
  --sh-3: 0 4px 8px rgba(14,16,20,.06), 0 16px 32px rgba(14,16,20,.08);
  --sh-ring: 0 0 0 3px rgba(91,80,229,.18);
  --sh-card-hover: 0 6px 18px rgba(14,16,20,.07);

  /* ─── RADIUS ──────────────────────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ─── SPACE ───────────────────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;

  /* ─── TYPE ────────────────────────────────────────────────────────────── */
  --font-ui:      "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-eyebrow: 11px;
  --t-tiny:    12px;
  --t-small:   13px;
  --t-body:    14px;
  --t-lead:    16px;
  --t-h3:      18px;
  --t-h2:      22px;
  --t-h1:      30px;
  --t-display: 44px;
  --t-mega:    72px;

  --tracking-eyebrow: 0.12em;
  --tracking-tight:  -0.01em;
  --tracking-tighter:-0.02em;

  /* ─── LAYOUT ──────────────────────────────────────────────────────────── */
  --sidebar-w: 232px;
  --topbar-h:  60px;
  --content-max: 1480px;

  /* ─── MOTION ──────────────────────────────────────────────────────────── */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease:  cubic-bezier(.2,.7,.2,1);
}

/* ═══════════════════════════════ RESET ═══════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
svg { display: block; }

/* ═══════════════════════════════ TYPE ════════════════════════════════════ */

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-4);
}
.eyebrow--primary { color: var(--primary); }
.eyebrow--gold    { color: var(--accent-gold); }

.display {
  font-family: var(--font-serif);
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
  font-weight: 400;
}
.display em, .serif em { font-style: italic; }
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em; }
.serif-i { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

.h1, h1 { font-size: var(--t-h1); line-height: 1.15; font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--ink-1); }
.h2, h2 { font-size: var(--t-h2); line-height: 1.2;  font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--ink-1); }
.h3, h3 { font-size: var(--t-h3); line-height: 1.3;  font-weight: 600; color: var(--ink-1); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }

.tiny  { font-size: var(--t-tiny);  line-height: 1.4; }
.small { font-size: var(--t-small); line-height: 1.5; color: var(--ink-3); }
.muted { color: var(--ink-4); }
.mute2 { color: var(--ink-5); }