/* ──────────────────────────────────────────────
   Upfront — shared design tokens
   Two expressions share this system:
   1. www.myupfront.com (enterprise-serious)
   2. gettoknow.myupfront.com (sales presentation)
   ──────────────────────────────────────────────*/

:root {
  /* ——— color: brand ——— */
  --up-blue:        #0D58FF;
  --up-blue-600:    #0A46CC;
  --up-blue-700:    #083599;
  --up-blue-50:     #EEF3FF;
  --up-blue-100:    #DCE6FF;
  --up-blue-200:    #B8CDFF;

  /* ——— color: neutrals (cool, subtly warm paper) ——— */
  --ink:            #0A0B0F;
  --ink-2:          #1A1B22;
  --ink-3:          #2D2E38;
  --body:           #3D3F4A;
  --muted:          #6B6D7A;
  --faint:          #9C9EAB;
  --line:           #E4E5EA;
  --line-2:         #EEEFF3;
  --paper:          #FBFBF9;     /* subtle warm off-white */
  --paper-2:        #F5F5F2;
  --white:          #FFFFFF;

  /* dark variants (for hero bands, sales deck) */
  --d-bg:           #0A0B0F;
  --d-bg-2:         #13141A;
  --d-line:         #22242D;
  --d-text:         #F3F2EE;
  --d-muted:        #8B8D9B;

  /* ——— color: semantic ——— */
  --pos:            #137C3D;     /* money good */
  --pos-soft:       #DCEEE2;
  --warn:           #8A5A00;
  --warn-soft:      #F6EAD1;
  --neg:            #A6322F;
  --neg-soft:       #F4DCD8;

  /* ——— accent: outcome / savings / live / growth ——— */
  --up-orange:        #F97316;
  --up-orange-600:    #EA580C;
  --up-orange-soft:   #FEF1E6;
  --up-orange-50:     #FFF8F1;

  /* ——— motion ——— */
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast:         0.18s;
  --dur-base:         0.4s;
  --dur-slow:         0.7s;

  /* ——— type ——— */
  --font-display:   'Outfit', system-ui, sans-serif;
  --font-body:      'Outfit', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;
  --font-serif:     'Newsreader', 'Instrument Serif', Georgia, serif;

  /* type scale (1.2) */
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-17: 17px;
  --t-20: 20px;
  --t-24: 24px;
  --t-32: 32px;
  --t-40: 40px;
  --t-52: 52px;
  --t-68: 68px;
  --t-88: 88px;

  /* ——— space (8pt) ——— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  /* ——— radii / shadow ——— */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-5: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10,11,15,0.04), 0 1px 1px rgba(10,11,15,0.03);
  --shadow-md: 0 4px 12px rgba(10,11,15,0.05), 0 1px 3px rgba(10,11,15,0.04);
  --shadow-lg: 0 20px 60px rgba(10,11,15,0.08), 0 6px 16px rgba(10,11,15,0.04);

  /* ——— layout ——— */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: 24px;
}

/* ——— reset ——— */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--font-body);
  font-size: var(--t-17);
  line-height: 1.55;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; }

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