/* =============================================================
   Lekhly — design tokens (fintech direction)
   Trustworthy, sharp, proactive. Steel azure chrome + platinum paper.
   Palette: gold · platinum · silver · cornflower · steel azure
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Color: chrome (steel azure) ---------- */
  --ink-navy:        #004E98;
  --ink-navy-2:      #1058A3;   /* card on chrome */
  --ink-navy-3:      #1A68B4;   /* hover on chrome */
  --ink-navy-72:     rgba(0,78,152,0.72);
  --ink-navy-56:     rgba(0,78,152,0.56);
  --ink-navy-48:     rgba(0,78,152,0.48);
  --ink-navy-32:     rgba(0,78,152,0.32);
  --ink-navy-24:     rgba(0,78,152,0.24);
  --ink-navy-12:     rgba(0,78,152,0.12);
  --ink-navy-06:     rgba(0,78,152,0.06);
  --ink-navy-04:     rgba(0,78,152,0.04);

  /* ---------- Color: paper (platinum / white) ---------- */
  --ivory:           #FFFFFF;
  --ivory-2:         #F5F6FA;
  --ivory-3:         #E2E5EB;

  /* On-chrome inverse text (used on azure backgrounds) */
  --on-navy:         #FFFFFF;
  --on-navy-72:      rgba(255,255,255,0.72);
  --on-navy-56:      rgba(255,255,255,0.56);
  --on-navy-32:      rgba(255,255,255,0.32);
  --on-navy-12:      rgba(255,255,255,0.12);

  /* ---------- Color: accent + semantic ---------- */
  --pumpkin:         #D4AF37;   /* brand mark, focus ring, accent CTA */
  --pumpkin-90:      #BF9B2F;
  --cornflower:      #3A6EA5;   /* secondary blue, links */
  --moss:            #3F6B4A;   /* positive delta, "covered" */
  --moss-90:         #335A3D;
  --amber:           #B45309;   /* warning */
  --rust:            #991B1B;   /* error / negative delta */

  /* ---------- Semantic surfaces ---------- */
  --bg:              var(--ivory-2);
  --bg-recess:       var(--ivory-3);
  --bg-chrome:       var(--ink-navy);
  --bg-hover:        var(--ink-navy-04);
  --bg-press:        var(--ink-navy-06);
  --border:          var(--ink-navy-12);
  --border-hover:    var(--ink-navy-24);
  --fg:              var(--ink-navy);
  --fg-muted:        #3A6EA5;   /* cornflower — readable on platinum */
  --fg-subtle:       #5A89AE;

  --accent:          var(--pumpkin);
  --link:            var(--cornflower);
  --positive:        var(--moss);
  --negative:        var(--rust);

  /* ---------- Type families ---------- */
  --font-display:    "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-serif:      "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type sizes ---------- */
  --fs-display-xl:   72px;
  --fs-display-l:    56px;
  --fs-display-m:    44px;
  --fs-h1:           32px;
  --fs-h2:           24px;
  --fs-h3:           18px;
  --fs-body-l:       17px;
  --fs-body:         15px;
  --fs-body-s:       13px;
  --fs-ui:           14px;
  --fs-label:        11px;
  --fs-mono:         12px;
  --fs-kpi:          36px;   /* big KPI numbers */
  --fs-kpi-l:        56px;   /* hero KPI */

  /* ---------- Line heights ---------- */
  --lh-display:      1.1;
  --lh-heading:      1.2;
  --lh-body:         1.55;
  --lh-tight:        1.08;

  /* ---------- Tracking ---------- */
  --ls-display:      -0.02em;
  --ls-heading:      -0.01em;
  --ls-body:         0;
  --ls-label:        0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- Radii ---------- */
  --r-0: 0px; --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-card:     0 1px 3px rgba(0,78,152,0.06), 0 1px 2px rgba(0,78,152,0.04);
  --shadow-sheet:    0 1px 0 rgba(0,78,152,0.04), 0 8px 24px -12px rgba(0,78,152,0.16);
  --shadow-press:    inset 0 1px 0 rgba(0,78,152,0.06);

  /* ---------- Motion ---------- */
  --ease:            cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-1:           80ms;
  --dur-2:           160ms;
  --dur-3:           320ms;

  /* ---------- Layout ---------- */
  --sidebar-w:       240px;
  --prose-width:     720px;
  --grid-width:      1200px;
}

/* ----- Tabular figures for all numbers/data UI ----- */
.lk-num, .lk-mono, .lk-kpi, table { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ----- Type utilities ----- */
.lk-display-xl { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.lk-display-l  { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display-l);  line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.lk-display-m  { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-display-m);  line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.lk-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.lk-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.lk-h3 { font-family: var(--font-sans);    font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-heading); }
.lk-body-l { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-l); line-height: var(--lh-body); }
.lk-body   { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body);   line-height: var(--lh-body); }
.lk-body-s { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--fg-muted); }
.lk-ui     { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-ui); line-height: 1.4; }
.lk-label  { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-label); line-height: 1.4; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-muted); }
.lk-mono   { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-mono); line-height: 1.4; }
.lk-kpi    { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-kpi); line-height: 1; letter-spacing: -0.01em; }

.lk-root { background: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* =============================================================
   Marketing site tokens — "Modern Fintech" direction (2026 redesign)
   Scoped under --mkt-* so the advisor portal's --ink-navy / --pumpkin /
   Source Serif system (above) is untouched. Landing page only.
   ============================================================= */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --mkt-ink:        #16181C;
  --mkt-body:        #3B4046;
  --mkt-muted:       #7A8088;
  --mkt-bg:          #F7F6F2;
  --mkt-surface:     #FFFFFF;
  --mkt-line:        #E7E6E0;
  --mkt-accent:      #1C5D45;
  --mkt-accent-dark: #164a37;
  --mkt-positive:    #2E7D52;
  --mkt-gap:         #AC7E27;
  --mkt-gap-tint:    rgba(172,126,39,0.1);
  --mkt-tint:        rgba(28,93,69,0.07);
  --mkt-accent-tint: rgba(28,93,69,0.12);

  --mkt-font-sans:   "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mkt-font-mono:   "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}