/* ==========================================================================
Design Tokens — SCS Synergy
==========================================================================
Single source of truth for colours, typography, spacing, shadows,
transitions, and layout constants used across the entire site.
Google Fonts — add this to every HTML :
========================================================================== */
:root {
/* ------------------------------------------------------------------
Colour Palette
------------------------------------------------------------------ */
/* Primary — Deep navy foundation */
--primary-dark: #0f172a;
--primary: #2563eb;
--primary-hover: #1d4ed8;
--primary-light: #3b82f6;
--secondary: #1e40af;
--accent-green: #16a34a;
/* Neutrals */
--text-dark: #1e293b;
--text-body: #475569;
--text-light: #64748b;
--text-white: #ffffff;
--bg-light: #f8fafc;
--bg-white: #ffffff;
--bg-dark: #0f172a;
--bg-overlay: rgba(15, 23, 42, 0.9);
/* Derived / utility colours */
--secondary-hover: #1e3a8a;
--accent-green-hover: #15803d;
--border-colour: #e2e8f0;
--border-dark: rgba(255, 255, 255, 0.08);
/* ------------------------------------------------------------------
Typography
------------------------------------------------------------------ */
--font-primary: 'Inter', sans-serif;
--font-heading: 'Montserrat', sans-serif;
/* Font sizes — mobile-first (scaled up in responsive.css) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-md: 1.125rem; /* 18px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 1.75rem; /* 28px */
--text-3xl: 2rem; /* 32px */
--text-4xl: 2.5rem; /* 40px */
--text-5xl: 3rem; /* 48px */
/* Line heights */
--leading-none: 1;
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.6;
--leading-relaxed: 1.75;
/* Letter spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.05em;
--tracking-wider: 0.1em;
/* Font weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold:800;
/* ------------------------------------------------------------------
Spacing — 8 px base unit
------------------------------------------------------------------ */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 2.5rem; /* 40px */
--space-8: 3rem; /* 48px */
--space-9: 4rem; /* 64px */
--space-10: 5rem; /* 80px */
--space-11: 6rem; /* 96px */
--space-12: 8rem; /* 128px */
/* ------------------------------------------------------------------
Shadows
------------------------------------------------------------------ */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
--shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.14);
/* ------------------------------------------------------------------
Transitions
------------------------------------------------------------------ */
--transition-fast: 150ms ease;
--transition-base: 300ms ease;
--transition-slow: 500ms ease;
--transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* ------------------------------------------------------------------
Border Radius
------------------------------------------------------------------ */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* ------------------------------------------------------------------
Layout
------------------------------------------------------------------ */
--container-max: 1200px;
--container-pad: var(--space-4); /* 16px on mobile */
--header-height: 80px;
/* ------------------------------------------------------------------
Z-index Scale
------------------------------------------------------------------ */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
}