/* =========================================================
   Creditify Design System — Colors & Type
   ========================================================= */

@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* Montserrat Alternates ships Bold (700) only, but the type scale below asks
   for 800. The 700 800 range maps both onto the real Bold file so headings
   render true Bold instead of a browser-synthesised fake bold. */
@font-face { font-family: 'Montserrat Alternates'; src: url('/assets/fonts/montserrat-alt-700.woff2') format('woff2'); font-weight: 700 800; font-style: normal; font-display: swap; }

:root {
  /* ----- Brand colors ----- */
  --brand-ink: #0E1B3D;        /* deep navy — primary wordmark, headings */
  --brand-green: #22C55E;      /* signal/accent — money, CTA, growth */
  --brand-green-600: #16A34A;
  --brand-green-700: #15803D;
  --brand-green-50: #ECFDF3;
  --brand-green-100: #D1FADF;

  /* ----- Neutrals (paper → ink) ----- */
  --ink-1000: #0E1B3D;         /* darkest text */
  --ink-900: #111827;
  --ink-700: #374151;
  --ink-500: #6B7280;          /* body secondary */
  --ink-400: #9CA3AF;          /* placeholder, captions */
  --ink-300: #D1D5DB;          /* borders strong */
  --ink-200: #E5E7EB;          /* borders default */
  --ink-100: #F3F4F6;          /* surface alt */
  --ink-50:  #F9FAFB;          /* surface */
  --paper:   #FFFFFF;

  /* ----- Semantic foreground / background ----- */
  --bg:          var(--paper);
  --bg-alt:      var(--ink-50);
  --bg-section:  #F4F7FB;       /* cool tinted section */
  --bg-dark:     var(--brand-ink);
  --fg-1:        var(--ink-1000);
  --fg-2:        var(--ink-700);
  --fg-3:        var(--ink-500);
  --fg-muted:    var(--ink-400);
  --fg-on-dark:  #FFFFFF;
  --fg-on-brand: #FFFFFF;
  --border:      var(--ink-200);
  --border-strong: var(--ink-300);

  /* ----- State colors ----- */
  --success: #22C55E;
  --success-bg: #ECFDF3;
  --warning: #F59E0B;
  --warning-bg: #FFFBEB;
  --danger:  #EF4444;
  --danger-bg: #FEF2F2;
  --info:    #3B82F6;
  --info-bg: #EFF6FF;

  /* ----- Radii ----- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ----- Shadows / elevation ----- */
  --shadow-xs: 0 1px 2px rgba(14, 27, 61, 0.05);
  --shadow-sm: 0 2px 6px rgba(14, 27, 61, 0.06), 0 1px 2px rgba(14, 27, 61, 0.04);
  --shadow-md: 0 8px 20px rgba(14, 27, 61, 0.08), 0 2px 4px rgba(14, 27, 61, 0.04);
  --shadow-lg: 0 20px 40px rgba(14, 27, 61, 0.12), 0 4px 8px rgba(14, 27, 61, 0.06);
  --shadow-cta: 0 8px 20px rgba(34, 197, 94, 0.35);
  --ring-focus: 0 0 0 3px rgba(34, 197, 94, 0.35);

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

  /* ----- Type families ----- */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat Alternates', 'Montserrat', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ----- Type scale ----- */
  --fs-hero: clamp(40px, 5vw, 64px);
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-eyebrow: 13px;
}

/* ===== Base ===== */
html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg); }
body { font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* ===== Semantic type ===== */
.hero, .display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}
h1, .h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.015em; color: var(--brand-ink); }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.01em; color: var(--brand-ink); }
h3, .h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; color: var(--brand-ink); }
h4, .h4 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h4); line-height: 1.3; color: var(--brand-ink); }
.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--fg-2); font-weight: 400; }
p, .body { font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2); }
small, .small { font-size: var(--fs-sm); color: var(--fg-3); }
.caption { font-size: var(--fs-xs); color: var(--fg-3); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-green-700);
}
.amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
}
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }
a { color: var(--brand-green-700); text-decoration: none; }
a:hover { text-decoration: underline; }