/* =============================================================
   inRange Design System — Core Tokens
   Colors + Typography + Radii + Shadows + Spacing
   =============================================================
   Palette built around the primary brand duo:
     — Growth Green  (#1FA84A)  from the Range wordmark
     — Advisory Navy (#14273F)  from the bar-chart mark
   Neutrals lean slate-cool to complement the navy, and we
   introduce warm earth accents as secondary options for
   differentiated client work (per brand openness to other colors).
   ============================================================= */

@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;8..60,700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand Primaries ---------- */
  --brand-green-50:  #EBF8EE;
  --brand-green-100: #CFEFD8;
  --brand-green-200: #9FDFB1;
  --brand-green-300: #6CCE89;
  --brand-green-400: #3FBB65;
  --brand-green-500: #1FA84A;   /* core Growth Green — wordmark */
  --brand-green-600: #15893B;
  --brand-green-700: #0F6B2E;
  --brand-green-800: #0B5024;
  --brand-green-900: #07361A;

  --brand-navy-50:   #EEF2F7;
  --brand-navy-100:  #D6DEE9;
  --brand-navy-200:  #ADBCCE;
  --brand-navy-300:  #7E93AE;
  --brand-navy-400:  #4F6B8A;
  --brand-navy-500:  #2C4868;
  --brand-navy-600:  #1E3551;
  --brand-navy-700:  #14273F;   /* core Advisory Navy — bar chart */
  --brand-navy-800:  #0D1B2D;
  --brand-navy-900:  #07111D;

  /* ---------- Neutrals (slate-cool) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8FA;
  --neutral-100: #EEF0F3;
  --neutral-200: #DEE2E8;
  --neutral-300: #C3CAD3;
  --neutral-400: #9BA5B1;
  --neutral-500: #6E7887;
  --neutral-600: #4C5665;
  --neutral-700: #343D4C;
  --neutral-800: #1F2733;
  --neutral-900: #0F141C;

  /* ---------- Warm Earth Accents (client-flex palette) ---------- */
  --accent-ochre:    #C98A2B;   /* secondary highlight, callouts */
  --accent-terra:    #B25838;   /* infographics */
  --accent-sand:     #F1E6D2;   /* soft section bgs */
  --accent-moss:     #6B8F3D;   /* alt sustainable green */
  --accent-sky:      #6FA3C0;   /* data viz, charts */
  --accent-plum:     #5B3A63;   /* data viz, charts */

  /* ---------- Semantic ---------- */
  --success:  var(--brand-green-500);
  --success-bg: var(--brand-green-50);
  --warning:  #D89B1F;
  --warning-bg: #FBF2DD;
  --danger:   #C8412F;
  --danger-bg: #FBE7E3;
  --info:     #2C73B8;
  --info-bg:  #E3EEF9;

  /* ---------- Surfaces ---------- */
  --bg:          var(--neutral-0);
  --bg-muted:    var(--neutral-50);
  --bg-sunken:   var(--neutral-100);
  --bg-inverted: var(--brand-navy-800);
  --bg-accent:   var(--brand-navy-700);

  --surface-card:     var(--neutral-0);
  --surface-elevated: var(--neutral-0);
  --surface-quiet:    var(--neutral-50);

  /* ---------- Foreground ---------- */
  --fg-1: var(--brand-navy-800);   /* primary text */
  --fg-2: var(--neutral-700);      /* body text */
  --fg-3: var(--neutral-500);      /* secondary / meta */
  --fg-4: var(--neutral-400);      /* disabled / hint */
  --fg-inverted: var(--neutral-0);
  --fg-brand:    var(--brand-green-600);
  --fg-link:     var(--brand-green-700);

  /* ---------- Borders ---------- */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-brand: var(--brand-green-500);
  --border-focus: var(--brand-green-500);

  /* ---------- Fonts ---------- */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* ---------- Type Scale (modular 1.2 — major 3rd softer) ---------- */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base: 16px;
  --text-md:  18px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 80px;

  /* ---------- Line Heights ---------- */
  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* ---------- Letter Spacing ---------- */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;

  /* ---------- Spacing Scale (4px base) ---------- */
  --space-0: 0;
  --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;
  --space-32: 128px;

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

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 39, 63, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 39, 63, 0.08), 0 1px 2px rgba(20, 39, 63, 0.04);
  --shadow-md: 0 6px 14px -4px rgba(20, 39, 63, 0.10), 0 2px 4px rgba(20, 39, 63, 0.05);
  --shadow-lg: 0 16px 32px -8px rgba(20, 39, 63, 0.14), 0 4px 8px rgba(20, 39, 63, 0.06);
  --shadow-xl: 0 32px 64px -12px rgba(20, 39, 63, 0.18);
  --shadow-focus: 0 0 0 3px rgba(31, 168, 74, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.8, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* ---------- Layout ---------- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;
}

/* =============================================================
   Semantic Typography Styles
   Use these element-level selectors OR the .t-* helpers
   ============================================================= */

html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg); }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--fg-1);
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h5, .t-h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .t-p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.t-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: 400;
}

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

.t-caption,
small {
  font-size: var(--text-xs);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

.t-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: var(--tracking-normal);
}

.t-quote {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  letter-spacing: var(--tracking-snug);
}

code, kbd, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-sunken);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

a:hover {
  border-bottom-color: currentColor;
}

a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* Numeric / tabular — useful for financial tables */
.t-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}