/* =====================================================================
   FORTIFY — Colors & Type foundation
   Brand: Fortify Security Systems Ltd, Gibraltar — CCTV, access control &
   security assessment solutions for businesses.
   ---------------------------------------------------------------------
   FONTS ARE SUBSTITUTIONS. The live site (fortify.gi) is JS-rendered and
   exposes no font files; the logo wordmark is a custom chamfered geometric
   sans. Pending real brand fonts, this system uses Google Fonts:
     • Space Grotesk  -> display / headings (techy, geometric)
     • IBM Plex Sans  -> body / UI (professional, technical, trustworthy)
     • IBM Plex Mono  -> labels, specs, status readouts
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk: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 CYAN (sampled from logo: rgb 72,192,208 = #48C0D0) -- */
  --cyan-50:  #ECF9FB;
  --cyan-100: #D2F0F4;
  --cyan-200: #A6E1E9;
  --cyan-300: #74CEDB;
  --cyan-400: #48C0D0;   /* PRIMARY brand color */
  --cyan-500: #2FA9BA;
  --cyan-600: #228896;
  --cyan-700: #1C6C77;
  --cyan-800: #1A555E;
  --cyan-900: #18454C;

  --brand:        var(--cyan-400);
  --brand-hover:  var(--cyan-500);
  --brand-press:  var(--cyan-600);

  /* ---------- INK / NAVY (dark security surfaces) --------------------- */
  --ink-900: #0A1219;   /* deepest background */
  --ink-800: #0E1A24;
  --ink-700: #132634;
  --ink-600: #1B3344;
  --ink-500: #244155;

  /* ---------- NEUTRAL SLATE ------------------------------------------ */
  --slate-0:   #FFFFFF;
  --slate-50:  #F5F8FA;
  --slate-100: #EBF0F4;
  --slate-200: #DAE2E9;
  --slate-300: #BCC8D2;
  --slate-400: #93A2AF;
  --slate-500: #6B7B89;
  --slate-600: #4C5B68;
  --slate-700: #36434E;
  --slate-800: #222D36;
  --slate-900: #131B22;

  /* ---------- SEMANTIC (status / monitoring) ------------------------- */
  --success: #2FB67A;   --success-bg: #E6F6EF;   /* armed / online */
  --warning: #E8A93B;   --warning-bg: #FCF3E1;   /* attention */
  --danger:  #E5533D;   --danger-bg:  #FBEBE8;   /* alert / breach */
  --info:    var(--cyan-400); --info-bg: var(--cyan-50);

  /* ---------- SEMANTIC SURFACES (light theme default) ---------------- */
  --bg:        var(--slate-50);
  --surface:   var(--slate-0);
  --surface-2: var(--slate-100);
  --fg1:       var(--slate-900);   /* primary text */
  --fg2:       var(--slate-600);   /* secondary text */
  --fg3:       var(--slate-400);   /* muted / captions */
  --border:    var(--slate-200);
  --border-strong: var(--slate-300);

  /* ---------- DARK SURFACES (hero / monitoring UI) ------------------- */
  --d-bg:      var(--ink-900);
  --d-surface: var(--ink-800);
  --d-surface-2: var(--ink-700);
  --d-fg1:     var(--slate-50);
  --d-fg2:     #9FB2C0;
  --d-fg3:     #5E7385;
  --d-border:  rgba(255,255,255,.08);

  /* ---------- TYPE FAMILIES ------------------------------------------ */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE (rem @ 16px base) --------------------------- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */

  /* ---------- RADII -------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- SPACING (4px base) ------------------------------------- */
  --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;

  /* ---------- SHADOWS ------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(15,26,36,.06);
  --shadow-sm: 0 1px 3px rgba(15,26,36,.10), 0 1px 2px rgba(15,26,36,.06);
  --shadow-md: 0 4px 12px rgba(15,26,36,.10), 0 2px 4px rgba(15,26,36,.06);
  --shadow-lg: 0 12px 32px rgba(15,26,36,.14), 0 4px 8px rgba(15,26,36,.06);
  --shadow-glow: 0 0 0 4px rgba(72,192,208,.18);  /* focus ring / brand glow */

  /* ---------- MOTION ------------------------------------------------- */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .12s;
  --dur: .2s;
  --dur-slow: .36s;
}

/* =====================================================================
   SEMANTIC TYPE — apply with classes or as a reference
   ===================================================================== */
.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg1);
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.h4, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--fg1);
}
.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--fg2);
}
.p, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg2);
}
.small {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg2);
}
.caption {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--fg3);
}
/* Eyebrow / kicker — the brand's signature technical label */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
}