/* ============================================================
   INNOVUTION — Colors & Type
   Solutions Beyond Ordinary
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND PRIMITIVES ---------- */

  /* Anchor colors — from brand brief */
  --navy-900: #0D1B2A;       /* Deep navy — primary surface, headlines */
  --navy-800: #122438;
  --navy-700: #1B3247;
  --steel-600: #4A6580;      /* Steel blue — wordmark, secondary text */
  --steel-500: #6B819A;
  --steel-400: #94A6BB;
  --steel-300: #C2CEDC;
  --steel-200: #DEE5EE;
  --steel-100: #ECF1F6;
  --paper:     #F7F9FC;      /* Off-white background */
  --white:     #FFFFFF;

  /* Innovution orange — accent / signal */
  --orange-700: #C25E1F;
  --orange-600: #E8722A;     /* Primary orange (logo dot, CTA) */
  --orange-500: #F07430;     /* Primary orange (alt — tagline) */
  --orange-400: #F8975F;
  --orange-300: #FBB890;
  --orange-200: #FCD4B8;
  --orange-100: #FDE8D6;

  /* Functional — used sparingly */
  --green-600:  #2E8B6F;     /* Success / validated proof */
  --amber-600:  #C98A1A;     /* Caution */
  --red-600:    #B33A3A;     /* Risk / error */

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:            var(--paper);
  --bg-elevated:   var(--white);
  --bg-inverse:    var(--navy-900);
  --bg-subtle:     var(--steel-100);
  --bg-band:       var(--navy-900);          /* Proof band, gov-con section */

  /* ---------- SEMANTIC TEXT ---------- */
  --fg1:           var(--navy-900);          /* Primary text */
  --fg2:           var(--steel-600);         /* Secondary text */
  --fg3:           var(--steel-500);         /* Tertiary / captions */
  --fg-inverse:    var(--white);             /* Text on navy */
  --fg-inverse-2:  var(--steel-300);         /* Secondary text on navy */
  --fg-accent:     var(--orange-600);        /* Accents on light */
  --fg-accent-dark:var(--orange-500);        /* Accents on navy (brighter) */

  /* ---------- BORDERS ---------- */
  --border:        var(--steel-200);
  --border-strong: var(--steel-300);
  --border-inverse:#22344A;
  --hairline:      rgba(13, 27, 42, 0.08);

  /* ---------- ACCENTS ---------- */
  --accent:        var(--orange-600);
  --accent-hover:  var(--orange-700);
  --accent-soft:   var(--orange-100);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:  'Saira', system-ui, sans-serif;          /* Wordmark match — squared geometric */
  --font-body:     'IBM Plex Sans', system-ui, sans-serif;  /* Body — technical, human */
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;/* Metrics, code, proof */

  /* ---------- TYPE SCALE (clamp for fluid) ---------- */
  --fs-display-xl: clamp(48px, 6vw, 84px);   /* Hero */
  --fs-display:    clamp(40px, 4.5vw, 64px); /* Section opener */
  --fs-h1:         clamp(32px, 3.4vw, 44px);
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-eyebrow:    12px;
  --fs-metric:     clamp(48px, 5.5vw, 72px);

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-display: 1.08;
  --lh-heading: 1.18;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Tracking */
  --ls-eyebrow:  0.14em;
  --ls-display:  -0.01em;
  --ls-tight:    -0.02em;
  --ls-mono:     0.02em;

  /* ---------- SPACING (8pt grid + 4 for fine) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- RADII ---------- */
  --r-xs: 2px;   /* hairline accents */
  --r-sm: 4px;   /* tags, inputs */
  --r-md: 6px;   /* buttons */
  --r-lg: 10px;  /* cards */
  --r-xl: 16px;  /* feature cards */
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.06);
  --shadow-sm: 0 2px 4px rgba(13, 27, 42, 0.06), 0 1px 2px rgba(13, 27, 42, 0.04);
  --shadow-md: 0 6px 16px rgba(13, 27, 42, 0.08), 0 2px 4px rgba(13, 27, 42, 0.04);
  --shadow-lg: 0 16px 36px rgba(13, 27, 42, 0.10), 0 4px 10px rgba(13, 27, 42, 0.06);
  --shadow-focus: 0 0 0 3px rgba(232, 114, 42, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ---------- LAYOUT ---------- */
  --container:    1200px;
  --container-sm: 880px;
  --gutter:       24px;
}

/* ============================================================
   BASE RESETS + SEMANTIC ELEMENT STYLES
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--orange-200); color: var(--navy-900); }

/* ---------- HEADINGS — display family on biggest, body sans on smaller ---------- */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg1);
  text-wrap: balance;
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--fg1);
  text-wrap: balance;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg1);
  text-wrap: balance;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--fg1);
  margin: 0;
}

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

.p-lead {
  font-size: var(--fs-body-lg);
  color: var(--fg2);
  line-height: 1.6;
  text-wrap: pretty;
}

small, .small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg3);
  line-height: 1.5;
}

/* ---------- EYEBROW LABEL — section labels per brand guide ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1.5px;
  background: var(--fg-accent);
  display: inline-block;
}
.eyebrow.on-dark { color: var(--orange-500); }
.eyebrow.on-dark::before { background: var(--orange-500); }

/* ---------- METRIC — proof statistics ---------- */
.metric {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-metric);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.metric .unit { color: var(--fg-accent); }
.metric.on-dark { color: var(--white); }
.metric.on-dark .unit { color: var(--orange-500); }

/* ---------- CODE / MONO ---------- */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--ls-mono);
  color: var(--fg2);
}

/* ---------- LINKS ---------- */
a {
  color: var(--fg-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }