/* ============================================================
   STELIC — Colors & Type
   Construction management & project controls
   Source of truth: stelic.com (Themify/WordPress build)
   Typeface: Poppins (Google Fonts)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---------- LOCAL FONTS ---------- */
/* Archivo — variable grotesque sans (wght 100–900, plus width axis).
   One file covers every weight; italic in a second file. */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/Archivo-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/Archivo-Italic-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* IBM Plex Mono — monospace, static weights */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  --navy:          #0b204b;  /* primary — logo, headings, nav/footer */
  --ink:           #0b1220;  /* near-black — body text, dark surfaces */
  --cyan:          #009be3;  /* accent — CTAs, underlines, links, bands */
  --cyan-bright:   #32a5de;  /* hover / lighter accent on dark */
  --cyan-deep:     #0079b4;  /* pressed / darker accent */

  /* ---------- NEUTRALS ---------- */
  --white:         #ffffff;
  --off-white:     #f4f5f5;  /* primary light section background */
  --mist:          #f8fafc;  /* alternate very-light background */
  --line:          #e3e6ea;  /* hairline borders on light */
  --line-strong:   #cfd4da;  /* stronger borders / inputs */
  --gray:          #6b7280;  /* secondary text / muted labels */
  --gray-soft:     #9aa2ad;  /* tertiary text, placeholders */

  /* ---------- ON-DARK ---------- */
  --on-dark:       #ffffff;
  --on-dark-dim:   #aeb8c9;  /* muted text on navy/ink */
  --dark-line:     #1d2c4d;  /* hairline on navy surfaces */

  /* ---------- SEMANTIC STATUS ---------- */
  --success:       #1f8a4c;
  --success-bg:    #e7f4ec;
  --warning:       #c8881a;
  --warning-bg:    #fbf1de;
  --danger:        #c33b3b;
  --danger-bg:     #f9e7e7;
  --info:          #009be3;
  --info-bg:       #e2f4fc;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-archivo: 'Archivo', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  /* ---------- WEIGHTS ---------- */
  --w-light:    300; /* @kind font */  /* large display headings — signature Stelic look */
  --w-regular:  400; /* @kind font */
  --w-medium:   500; /* @kind font */  /* body emphasis, labels */
  --w-semibold: 600; /* @kind font */  /* buttons, nav, eyebrows */
  --w-bold:     700; /* @kind font */

  /* ---------- TYPE SCALE (desktop) ---------- */
  --fs-display: 60px;  /* hero H1 */
  --fs-h1:      48px;
  --fs-h2:      40px;
  --fs-h3:      32px;
  --fs-h4:      24px;
  --fs-h5:      20px;
  --fs-eyebrow: 13px;  /* uppercase section labels */
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;

  /* ---------- RADII ---------- */
  --r-sm:  6px;
  --r-md:  10px;   /* cards, image tiles */
  --r-lg:  16px;
  --r-pill: 999px; /* CTA buttons, badges */

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .06);
  --shadow-md: 0 6px 18px rgba(11, 18, 32, .10);
  --shadow-lg: 0 18px 44px rgba(11, 18, 32, .16);

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1); /* @kind other */
  --dur:  .25s; /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.display, h1.display {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--navy);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--navy);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--fs-h2);
  line-height: 1.16;
  color: var(--navy);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--navy);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--navy);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h5);
  line-height: 1.35;
  color: var(--navy);
}

/* Uppercase section eyebrow with the signature cyan underline */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--cyan);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}

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

.muted { color: var(--gray); }

a, .link {
  color: var(--cyan);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--cyan-deep); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}