/* =====================================================================
 * IMS — International Management Services
 * Colors + Type foundations
 *
 * Anchor color: the company mark is a deep navy globe (~#002030)
 * with cyan highlights (#30A0E0 / #70C0E0). The palette is built
 * around that mark plus warm concrete neutrals (jobsite reference)
 * and a single safety-amber accent (jobsite hi-vis reference).
 * Use safety amber sparingly — for highlights, status, or as a single
 * accent stripe. The brand is navy + concrete; amber is the spice.
 * ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&family=Saira+Semi+Condensed:wght@500;600;700;800&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand: Navy (primary) -------------------------------- */
  --ims-navy-950: #050F1A;
  --ims-navy-900: #0A1F33;   /* deepest — body bg in dark zones */
  --ims-navy-800: #0E2A44;   /* nav, footer */
  --ims-navy-700: #133657;   /* card surface dark */
  --ims-navy-600: #1A4570;   /* PRIMARY — buttons, links, headers */
  --ims-navy-500: #235A8E;
  --ims-navy-400: #4174A6;
  --ims-navy-300: #7CA0C2;
  --ims-navy-200: #B5C8DC;
  --ims-navy-100: #DCE6EF;
  --ims-navy-50:  #EEF3F8;

  /* ---------- Brand: Cyan (highlight, from globe shine) ------------ */
  --ims-cyan-700: #1B6FA3;
  --ims-cyan-600: #2589C2;
  --ims-cyan-500: #3FA3D9;   /* highlight accent */
  --ims-cyan-400: #6BBBE3;
  --ims-cyan-200: #C5E3F2;
  --ims-cyan-50:  #EAF5FB;

  /* ---------- Accent: Safety amber (single hi-vis hit) ------------- */
  --ims-amber-700: #B5790C;
  --ims-amber-600: #D08F10;
  --ims-amber-500: #E8A317;   /* status, KPI, single accent stripe */
  --ims-amber-400: #F0B647;
  --ims-amber-100: #FAEAC2;

  /* ---------- Neutrals: Warm concrete ------------------------------ */
  --ims-concrete-50:  #F6F4EF;  /* page background */
  --ims-concrete-100: #ECE9E2;  /* card surface */
  --ims-concrete-200: #DDD9CF;  /* dividers, low contrast borders */
  --ims-concrete-300: #BEB8AB;  /* disabled, captions on light */
  --ims-concrete-400: #8B867A;
  --ims-concrete-500: #5F5C54;
  --ims-concrete-600: #3F3D38;
  --ims-concrete-700: #2A2925;

  /* ---------- Semantic: Status ------------------------------------- */
  --ims-success: #2F855A;
  --ims-success-bg: #E4F1E9;
  --ims-warning: #C2740F;
  --ims-warning-bg: #FBEFD6;
  --ims-danger:  #B53028;
  --ims-danger-bg:  #F8E1DF;
  --ims-info:    #2589C2;
  --ims-info-bg: #E1EFF8;

  /* ---------- Semantic: Surface + foreground ----------------------- */
  --ims-bg:        var(--ims-concrete-50);
  --ims-bg-card:   #FFFFFF;
  --ims-bg-muted:  var(--ims-concrete-100);
  --ims-bg-dark:   var(--ims-navy-800);
  --ims-bg-darker: var(--ims-navy-900);

  --ims-fg-1: var(--ims-navy-900);        /* primary text */
  --ims-fg-2: var(--ims-concrete-600);    /* secondary text, body */
  --ims-fg-3: var(--ims-concrete-500);    /* tertiary, meta, captions */
  --ims-fg-4: var(--ims-concrete-400);    /* disabled */
  --ims-fg-inverse: #FFFFFF;
  --ims-fg-on-dark-1: #FFFFFF;
  --ims-fg-on-dark-2: rgba(255,255,255,0.78);
  --ims-fg-on-dark-3: rgba(255,255,255,0.56);

  --ims-link:        var(--ims-navy-600);
  --ims-link-hover:  var(--ims-cyan-700);

  --ims-border:      #E2DED4;             /* warm hairline */
  --ims-border-strong: var(--ims-concrete-300);
  --ims-border-dark: rgba(255,255,255,0.12);

  /* ---------- Typography: families --------------------------------- */
  --ims-font-display: "Saira Semi Condensed", "Saira", "Barlow Semi Condensed",
                      "Inter", system-ui, sans-serif;
  --ims-font-body:    "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --ims-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Typography: scale (1.250 major third) ---------------- */
  --ims-text-xs:   12px;
  --ims-text-sm:   14px;
  --ims-text-base: 16px;
  --ims-text-md:   18px;
  --ims-text-lg:   22px;
  --ims-text-xl:   28px;
  --ims-text-2xl:  36px;
  --ims-text-3xl:  48px;
  --ims-text-4xl:  64px;
  --ims-text-5xl:  84px;

  /* ---------- Spacing (4px base) ----------------------------------- */
  --ims-space-1:  4px;
  --ims-space-2:  8px;
  --ims-space-3:  12px;
  --ims-space-4:  16px;
  --ims-space-5:  24px;
  --ims-space-6:  32px;
  --ims-space-7:  48px;
  --ims-space-8:  64px;
  --ims-space-9:  96px;
  --ims-space-10: 128px;

  /* ---------- Radii (architectural — small) ------------------------ */
  --ims-radius-xs: 2px;
  --ims-radius-sm: 4px;
  --ims-radius-md: 6px;
  --ims-radius-lg: 10px;
  --ims-radius-pill: 999px;
  /* NB: large 16-24px rounding feels SaaS-y and off-brand for IMS.
     Keep corners crisp (4–6px) on cards & buttons. */

  /* ---------- Shadows (subtle; never glow) ------------------------- */
  --ims-shadow-1: 0 1px 2px rgba(10, 31, 51, 0.06),
                  0 1px 3px rgba(10, 31, 51, 0.04);
  --ims-shadow-2: 0 2px 6px rgba(10, 31, 51, 0.08),
                  0 1px 2px rgba(10, 31, 51, 0.04);
  --ims-shadow-3: 0 8px 24px rgba(10, 31, 51, 0.12),
                  0 2px 6px rgba(10, 31, 51, 0.06);
  --ims-shadow-image: 0 16px 40px -12px rgba(10, 31, 51, 0.30);

  /* ---------- Container widths ------------------------------------- */
  --ims-container-sm: 720px;
  --ims-container-md: 1040px;
  --ims-container-lg: 1280px;
  --ims-container-xl: 1440px;
  --ims-gutter:       clamp(20px, 4vw, 56px);
}

/* =====================================================================
 * Semantic typographic styles — apply directly with these classes,
 * or @extend their declarations in component scope.
 * ===================================================================== */

.ims-h1, .ims-h2, .ims-h3, .ims-h4, .ims-h5, .ims-eyebrow, .ims-display {
  font-family: var(--ims-font-display);
  color: var(--ims-fg-1);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ims-display {
  font-size: clamp(48px, 7vw, var(--ims-text-5xl));
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.ims-h1 {
  font-size: clamp(36px, 5vw, var(--ims-text-3xl));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.ims-h2 {
  font-size: var(--ims-text-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.ims-h3 {
  font-size: var(--ims-text-xl);
  font-weight: 600;
  line-height: 1.2;
}

.ims-h4 {
  font-size: var(--ims-text-lg);
  font-weight: 600;
  line-height: 1.3;
}

.ims-h5 {
  font-size: var(--ims-text-md);
  font-weight: 600;
  line-height: 1.4;
}

/* Eyebrow — section labels above headlines. Uppercase, tracked. */
.ims-eyebrow {
  font-size: var(--ims-text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ims-cyan-700);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ims-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ims-cyan-700);
}

.ims-lead {
  font-family: var(--ims-font-body);
  font-size: var(--ims-text-md);
  line-height: 1.55;
  color: var(--ims-fg-2);
  font-weight: 400;
  text-wrap: pretty;
}

.ims-body, p {
  font-family: var(--ims-font-body);
  font-size: var(--ims-text-base);
  line-height: 1.65;
  color: var(--ims-fg-2);
  font-weight: 400;
  text-wrap: pretty;
}

.ims-small {
  font-family: var(--ims-font-body);
  font-size: var(--ims-text-sm);
  line-height: 1.5;
  color: var(--ims-fg-3);
}

.ims-caption {
  font-family: var(--ims-font-body);
  font-size: var(--ims-text-xs);
  line-height: 1.4;
  color: var(--ims-fg-3);
  letter-spacing: 0.02em;
}

.ims-mono {
  font-family: var(--ims-font-mono);
  font-size: var(--ims-text-sm);
  letter-spacing: -0.01em;
}

/* Quote / project KPI numerals — display weight, oversized */
.ims-numeral {
  font-family: var(--ims-font-display);
  font-weight: 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--ims-navy-700);
}