/* ==========================================================================
   SITESURGEON PRO — DESIGN TOKENS
   Single source of truth for colour, type, spacing, radius and motion.
   Change a value here and it propagates across every page.
   ========================================================================== */

/* ==========================================================================
   FONT FACES
   Self-hosted — no external calls to fonts.googleapis.com.
   Drop the .woff2 files into /assets/fonts/ using exactly these filenames.
   Until they are present the stack falls back to system fonts and the site
   still renders correctly.
   ========================================================================== */
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* ---- Brand (unchanged from Homepage 1) ---- */
  --ink-950: #050B1A;
  --ink-navy: #0B1730;
  --ink-navy-2: #13224A;
  --surgical-teal: #0F9D8F;
  --teal-lite: #2FD4C0;
  --alert-orange: #FF5A1F;
  --vital-amber: #F5B324;
  --coral: #F2545B;
  --paper: #FFFFFF;

  /* ---- Low-contrast surface ramp (new) ---- */
  --mist: #FBFCFE;
  --cloud: #EFF4FA;
  --cloud-2: #EEF3F9;
  --tint-teal: #F0FAF8;
  --line: #E7ECF4;
  --line-soft: #EFF3F8;
  --line-dark: rgba(255,255,255,0.10);

  /* ---- Text ramp, softened ---- */
  --ink: #0E1B33;
  --slate: #45526A;
  --slate-2: #626F86;
  --slate-3: #7D8A9E;

  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

  --max-width: 1240px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  /* softer, wider, lower-opacity shadows */
  --shadow-soft: 0 1px 2px rgba(14,27,51,0.03), 0 8px 24px -14px rgba(14,27,51,0.10);
  --shadow-lift: 0 2px 6px rgba(14,27,51,0.04), 0 22px 48px -26px rgba(14,27,51,0.18);
  --shadow-stage: 0 30px 70px -34px rgba(5,11,26,0.42);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}