/* ============================================================
   Stratify — Colors & Type
   "Faith in the Future"

   Core palette extracted from the brandmark:
   - Cobalt #3961ec    (primary, center of mark)
   - Periwinkle #99aef5 (gradient outer edge)
   - Ink #0e1430       (deep navy — used for primary text)
   - Slate #5b6478     (tagline gray)

   The brand reads: confident, ordered, optimistic, considered.
   Architectural geometry. Generous whitespace. Quiet typography.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand ---------- */
  --brand-cobalt:        #3961ec;
  --brand-cobalt-deep:   #2a4ed4;     /* hover/press */
  --brand-cobalt-soft:   #5b7df0;     /* mid gradient stop */
  --brand-periwinkle:    #99aef5;     /* outer gradient stop */
  --brand-mist:          #e6ecfe;     /* tinted backgrounds */
  --brand-fog:           #f3f6fe;     /* lightest tinted bg */

  --brand-gradient: radial-gradient(120% 120% at 30% 30%, #99aef5 0%, #5b7df0 45%, #3961ec 100%);
  --brand-gradient-flat: linear-gradient(135deg, #99aef5 0%, #3961ec 100%);

  /* ---------- Ink / neutrals ---------- */
  --ink-900: #0e1430;   /* headlines, primary text */
  --ink-800: #1c2440;
  --ink-700: #2c3556;
  --ink-600: #424b6b;
  --ink-500: #5b6478;   /* secondary text, tagline */
  --ink-400: #8b93a7;
  --ink-300: #c2c8d6;
  --ink-200: #e2e5ec;
  --ink-100: #eef0f5;
  --ink-50:  #f7f8fb;
  --paper:   #ffffff;

  /* ---------- Semantic ---------- */
  --success:        #138a5e;
  --success-soft:   #e2f5ec;
  --warning:        #b8761c;
  --warning-soft:   #fbf1de;
  --danger:         #c43838;
  --danger-soft:    #fbe7e7;
  --info:           var(--brand-cobalt);
  --info-soft:      var(--brand-mist);

  /* ---------- Foreground / Background tokens ---------- */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-500);   /* secondary text */
  --fg-3: var(--ink-400);   /* tertiary / captions */
  --fg-on-brand: #ffffff;

  --bg-1: var(--paper);     /* page */
  --bg-2: var(--ink-50);    /* subtle surface */
  --bg-3: var(--ink-100);   /* deeper surface */
  --bg-tinted: var(--brand-fog);

  --border-1: var(--ink-200);
  --border-2: var(--ink-300);

  /* ---------- Type families ---------- */
  --font-sans:    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-serif:   'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (modular ~1.22) ---------- */
  --fs-display-xl: 84px;   /* hero */
  --fs-display-l:  64px;
  --fs-display-m:  48px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    12px;
  --fs-eyebrow:    12px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-eyebrow: 0.18em;
  --tracking-tight:   -0.02em;
  --tracking-display: -0.025em;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(14, 20, 48, 0.05);
  --shadow-sm: 0 1px 3px rgba(14, 20, 48, 0.06), 0 1px 2px rgba(14, 20, 48, 0.04);
  --shadow-md: 0 4px 14px -2px rgba(14, 20, 48, 0.08), 0 2px 4px rgba(14, 20, 48, 0.04);
  --shadow-lg: 0 12px 32px -8px rgba(14, 20, 48, 0.12), 0 4px 8px rgba(14, 20, 48, 0.04);
  --shadow-xl: 0 24px 56px -12px rgba(14, 20, 48, 0.18), 0 8px 16px rgba(14, 20, 48, 0.06);
  --shadow-brand: 0 12px 32px -10px rgba(57, 97, 236, 0.45);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* default — confident settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* sparing, for emphasis */
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   Semantic element styles — drop these into any page
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.35;
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}
.display-l {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}
.display-m {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

.body-l { font-size: var(--fs-body-l); line-height: 1.55; }
.body-s { font-size: var(--fs-body-s); }
.caption { font-size: var(--fs-caption); color: var(--fg-2); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-2);
}

.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-2);
  border-radius: var(--r-xs);
  padding: 2px 6px;
}

a { color: var(--brand-cobalt); text-decoration: none; }
a:hover { color: var(--brand-cobalt-deep); text-decoration: underline; text-underline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--s-8) 0; }

::selection { background: rgba(57, 97, 236, 0.18); color: var(--ink-900); }


/* ============================================================
   Marketing UI Kit — shared component styles
   ============================================================ */
body { background: var(--paper); }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-cobalt); color: #fff; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 10px; box-shadow: var(--shadow-brand); transition: all var(--dur-base) var(--ease-out); text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.btn-primary:hover { background: var(--brand-cobalt-deep); color: #fff; text-decoration: none; }
.btn-primary.btn-lg { font-size: 15px; padding: 14px 22px; border-radius: 12px; }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink-900); font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--border-1); transition: all var(--dur-base) var(--ease-out); text-decoration: none; cursor: pointer; font-family: inherit; }
.btn-secondary:hover { background: var(--brand-fog); border-color: #c5d0fb; text-decoration: none; }
.btn-secondary.btn-lg { font-size: 15px; padding: 13px 21px; border-radius: 12px; }
.badge-success { display: inline-flex; align-items: center; gap: 6px; background: var(--success-soft); color: #0a5f41; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.badge-success::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--success); }
a { text-decoration: none; }
a:hover { text-decoration: none; }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: var(--ink-200); border-radius: 999px; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 999px; background: var(--brand-cobalt); cursor: pointer; box-shadow: 0 2px 6px rgba(57,97,236,.4); border: 2px solid #fff; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 999px; background: var(--brand-cobalt); cursor: pointer; border: 2px solid #fff; }