/* ==========================================================================
   EdgeSphere Tech Forward - DESIGN TOKENS
   Single source of truth for colour, type, spacing, radius, shadow, motion.
   Mirrors the Elementor Global Colors and Global Fonts.
   RULE: no hex value is written anywhere else in the project.
   ========================================================================== */

:root {

	/* --- BRAND COLOUR (approved corporate identity palette) --- */
	--es-navy:      #0A2540;  /* Deep Navy      - primary background */
	--es-blue:      #1473E6;  /* Electric Blue  - primary accent */
	--es-teal:      #19D3C5;  /* Cyber Teal     - secondary accent */
	--es-white:     #FFFFFF;
	--es-silver:    #A8B3C2;  /* Soft Silver    - supporting text */
	--es-platinum:  #F6F8FB;  /* Light Platinum - light sections */

	/* Accessibility extension: Cyber Teal measures 1.9:1 on white and fails
	   WCAG AA. This darkened teal is used for TEXT ON LIGHT surfaces only.
	   The brand accent itself is never altered. */
	--es-teal-ink:  #0E8C82;

	/* --- DERIVED SURFACES --- */
	--es-navy-deep:    #061829;
	--es-navy-raised:  #0E2C4A;
	--es-blue-hover:   #2C86F0;
	--es-ink:          #33404E;
	--es-ink-muted:    #6B7280;
	--es-on-dark-body: var(--es-silver);

	/* --- BORDERS --- */
	--es-border-on-dark:         rgba(255, 255, 255, 0.08);
	--es-border-on-dark-strong:  rgba(255, 255, 255, 0.45);
	--es-border-on-light:        rgba(10, 37, 64, 0.08);
	--es-border-on-light-strong: rgba(10, 37, 64, 0.25);
	--es-divider:                rgba(255, 255, 255, 0.08);

	/* --- TYPEFACES --- */
	--es-font-heading: "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	--es-font-body:    "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

	/* --- TYPE SCALE (fluid between 375px and 1440px viewports) --- */
	--es-text-h1: clamp(2.375rem, 1.803rem + 2.441vw, 4rem);
	--es-lh-h1:   1.10;
	--es-text-h2: clamp(2rem, 1.648rem + 1.502vw, 3rem);
	--es-lh-h2:   1.18;
	--es-text-h3: clamp(1.5rem, 1.324rem + 0.751vw, 2rem);
	--es-lh-h3:   1.28;
	--es-text-h4: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);
	--es-lh-h4:   1.35;

	--es-text-body-lg: 1.125rem;
	--es-lh-body-lg:   1.667;
	--es-text-body:    1rem;
	--es-lh-body:      1.625;
	--es-text-small:   0.875rem;
	--es-lh-small:     1.571;
	--es-text-label:   0.875rem;
	--es-text-nav:     0.875rem;
	--es-lh-nav:       1.428;
	--es-text-btn:     1rem;

	--es-weight-heading: 700;
	--es-weight-sub:     600;
	--es-weight-body:    400;
	--es-weight-nav:     600;

	--es-tracking-heading: -0.015em;
	--es-tracking-label:    0.12em;
}


/* --- SPACING, SIZING, ELEVATION, MOTION --- */

:root {

	/* Spacing scale */
	--es-space-1:   4px;
	--es-space-2:   8px;
	--es-space-3:  12px;
	--es-space-4:  16px;
	--es-space-5:  24px;
	--es-space-6:  32px;
	--es-space-7:  48px;
	--es-space-8:  64px;
	--es-space-9:  80px;
	--es-space-10: 96px;

	/* Section vertical rhythm: 56px mobile -> ~77px tablet -> 112px desktop */
	--es-section-y: clamp(3.5rem, 2.267rem + 5.258vw, 7rem);

	/* Horizontal gutters and content widths */
	--es-gutter:         clamp(1.25rem, 0.5rem + 3.2vw, 2.5rem);
	--es-container:      1280px;  /* standard content width */
	--es-container-wide: 1440px;  /* full-bleed section maximum */
	--es-grid-gap:       24px;

	/* Radius */
	--es-radius-btn:     10px;
	--es-radius-card:    16px;  /* standard */
	--es-radius-card-lg: 20px;  /* premium cards only, used sparingly */
	--es-radius-input:    8px;
	--es-radius-pill:   999px;

	/* Elevation - restrained, no glow */
	--es-shadow-card-dark:        0 12px 32px rgba(0, 0, 0, 0.35);
	--es-shadow-card-light:       0 2px 8px rgba(10, 37, 64, 0.06);
	--es-shadow-card-light-hover: 0 12px 28px rgba(10, 37, 64, 0.12);
	--es-shadow-btn:              0 8px 20px rgba(20, 115, 230, 0.35);
	--es-shadow-header:           0 1px 0 rgba(255, 255, 255, 0.08);

	/* Component sizing */
	--es-btn-height:    50px;  /* within the approved 46-52px range */
	--es-btn-padding-x: 32px;
	--es-card-padding:  32px;
	--es-icon-size:     40px;
	--es-header-height: 80px;  /* desktop; overridden below */

	/* Motion - subtle and executive, never flashy */
	--es-transition:      220ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--es-transition-slow: 600ms cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Focus ring - Electric Blue clears 3:1 on both navy and white */
	--es-focus: #1473E6;
}


/* Header height per the approved Section 1 specification */
@media (max-width: 1024px) {
	:root { --es-header-height: 70px; }
}

@media (max-width: 767px) {
	:root { --es-header-height: 60px; }
}