/* ==========================================================================
   ImpactPlus v2.0 — Design Tokens
   ImpactPlus brand identity (blue/teal, Inter) with disciplined token rigor.
   Light-primary theme with strategic dark navy bands for hero/CTA punctuation.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --ip-blue:        #004a9f;   /* primary action, brand */
  --ip-blue-deep:   #003a7d;   /* hover / pressed */
  --ip-blue-soft:   #eaf1fb;   /* tinted fill, chips on light */
  --ip-teal:        #00a0a8;   /* highlight / secondary accent */
  --ip-teal-deep:   #00838a;   /* teal hover */
  --ip-teal-soft:   #e4f5f6;   /* teal tinted fill */

  /* ---- Ink & neutrals (light ramp; never pure #000/#fff for text) ---- */
  --ink:            #0f1b2d;   /* primary text / headings — cool near-black */
  --ink-2:          #2d3a4d;   /* strong body text */
  --muted:          #55627a;   /* secondary text, descriptions */
  --muted-2:        #7c8798;   /* tertiary text, captions, meta */
  --canvas:         #ffffff;   /* base page surface */
  --canvas-alt:     #eef3fb;   /* alternating section band (gentle brand-blue tint) */
  --surface:        #ffffff;   /* card / panel fill */
  --surface-alt:    #f8fafd;   /* nested / inset surface */
  --line:           #e4e9f1;   /* hairline borders, dividers */
  --line-strong:    #cfd8e6;   /* stronger borders, hover edges */

  /* ---- Dark navy band (hero / CTA sections) ---- */
  --navy-1:         #0a2f57;   /* gradient start */
  --navy-2:         #061d37;   /* gradient end */
  --navy-grad:      radial-gradient(120% 90% at 88% -10%, rgba(0,160,168,.30), transparent 55%),
                    radial-gradient(90% 80% at 6% 0%, rgba(0,74,159,.28), transparent 52%),
                    linear-gradient(165deg, #0a2f57 0%, #082644 52%, #061d37 100%);
  --on-dark:        #ffffff;
  --on-dark-muted:  rgba(255,255,255,.82);
  --on-dark-faint:  rgba(255,255,255,.62);
  --on-dark-line:   rgba(255,255,255,.14);

  /* ---- Status (functional only, minimal) ---- */
  --ok:             #0f8a5f;
  --warn:           #b0570e;
  --err:            #c0392b;

  /* ---- Typography ---- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Optional premium serif display (design suggestion #1) — swap --font-display to enable */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-display: var(--font-sans);   /* default: Inter headings. Set to --font-serif to trial */

  /* type scale (size / line-height / tracking) */
  --t-eyebrow:      0.75rem;   /* 12px, 600, uppercase, +.08em */
  --t-caption:      0.8125rem; /* 13px */
  --t-body-sm:      0.875rem;  /* 14px */
  --t-body:         1rem;      /* 16px */
  --t-body-lg:      1.125rem;  /* 18px */
  --t-subhead:      1.375rem;  /* 22px */
  --t-h3:           1.75rem;   /* 28px */
  --t-h2:           2.25rem;   /* 36px */
  --t-h1:           2.75rem;   /* 44px */
  --t-display:      3.5rem;    /* 56px */

  --lh-tight:       1.12;
  --lh-heading:     1.2;
  --lh-snug:        1.35;
  --lh-body:        1.6;

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-black:       800;

  /* ---- Spacing (4px base) ---- */
  --s-2: 2px;   --s-4: 4px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px;
  --s-56: 56px; --s-64: 64px; --s-80: 80px; --s-96: 96px; --s-120: 120px;

  /* ---- Radii (medium, modern — not pills except chips) ---- */
  --r-tag:    6px;
  --r-btn:    10px;
  --r-card:   14px;
  --r-panel:  16px;
  --r-pill:   999px;

  /* ---- Elevation (soft on light; hairline does most of the work) ---- */
  --shadow-sm:  0 1px 2px rgba(15,27,45,.05);
  --shadow-md:  0 1px 2px rgba(15,27,45,.05), 0 8px 24px -12px rgba(15,27,45,.18);
  --shadow-lg:  0 2px 4px rgba(15,27,45,.06), 0 24px 60px -24px rgba(15,27,45,.30);
  --shadow-focus: 0 0 0 3px rgba(0,74,159,.28);

  /* ---- Layout ---- */
  --maxw:        1440px;               /* wider container — use the screen, not a narrow column */
  --maxw-wide:   1680px;               /* extra-wide sections */
  --maxw-prose:  760px;
  --gap-section: 104px;
  --pad-x:       clamp(24px, 4.5vw, 72px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  .18s;
}

@media (max-width: 720px) {
  :root {
    --t-h1: 2.125rem;      /* 34px */
    --t-h2: 1.75rem;       /* 28px */
    --t-display: 2.5rem;   /* 40px */
    --gap-section: 64px;
    --pad-x: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
}