/* =========================================================
   MEPAX THEME CSS
   Design tokens, color palette, dark theme (default) and
   light theme overrides. Load before mepax-structure.css.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,600;1,400&display=swap');

/* =========================================================
   1. DESIGN TOKENS (neutral)
   ========================================================= */
:root {
  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-xxl: 96px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Layout */
  --nav-h: 72px;
  --nav-offset: 72px;
  --content-max: 1200px;
  --pad-x: clamp(24px, 5vw, 60px);
  --logo-zone: 200px;

  /* Typography */
  --font-title: 'Work Sans', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* Headings */
  --h1-size: clamp(36px, 5vw, 58px);
  --h1-weight: 900;
  --h1-lh: 1.08;
  --h1-ls: -1px;
  --section-eyebrow-size: 15px;
  --section-title-size: clamp(34px, 4.8vw, 54px);

  --h3-size: 1.15rem;
  --h3-weight: 700;
  --h3-lh: 1.2;
  --h3-ls: -.2px;

  --h4-size: 19px;
  --h4-weight: 600;
  --h4-lh: 1.35;
  --h4-ls: -.2px;

  /* Body / paragraphs */
  --body-size: 17px;
  --body-lh: 1.7;
  --section-sub-size: 19px;
  --section-sub-lh: 1.7;
}

/* =========================================================
   2. DARK THEME (default)
   ========================================================= */
:root,
html.dark-mode {
  /* Backgrounds */
  --bg: #080a1e;
  --bg-elevated: #151A22;
  --surface: #151A22;
  --surface-glass: rgba(12, 18, 36, .48);

  /* Text */
  --text: #fff;
  --text-muted: #AAB3C0;

  /* Accent */
  --accent: #0EA5E9;
  --accent-glow: #00dcff;

  /* Borders */
  --border: rgba(14, 165, 233, .15);

  /* Nav */
  --nav-glass: rgba(8, 10, 30, .42);
  --nav-glass-scrolled: rgba(8, 10, 30, .58);
}

/* =========================================================
   3. LIGHT THEME
   ========================================================= */
html.light-mode {
  /* Backgrounds */
  --bg: #fff;
  --bg-elevated: #F7F9FB;
  --surface: #F7F9FB;
  --surface-glass: rgba(255, 255, 255, .48);

  /* Text */
  --text: #111827;
  --text-muted: #6B7280;

  /* Accent */
  --accent: #0EA5E9;
  --accent-glow: #00dcff;

  /* Borders */
  --border: rgba(17, 24, 39, .1);

  /* Nav */
  --nav-glass: rgba(255, 255, 255, .78);
  --nav-glass-scrolled: rgba(255, 255, 255, .92);
}

/* =========================================================
   4. BLOCK SURFACES (framework)
   Exactly 2 background families are used for every "block"
   component on the site — nothing else:
     --block-gray  → flat elevated surface (cards, panels, cells)
     --block-blue  → translucent navy glass (services, hero panels)
   Icon chips reuse the same blue family at low opacity (accent tint).
   ========================================================= */
:root,
html.dark-mode {
  --block-gray: rgba(4, 9, 26, .2);
  --block-gray-blur: 22px;
  --block-blue: rgba(4, 9, 26, .9);
  --chip-blue: rgba(0, 220, 255, .09);

  /* Icon box (hp / svc / eco / lead / sc / diff-num) */
  --icon-box-bg: rgba(0, 220, 255, .09);
  --icon-box-border: rgba(0, 220, 255, .18);
  --icon-box-color: var(--accent-glow);
}
html.light-mode {
  --block-gray: var(--bg-elevated);
  --block-gray-blur: 0px;
  --block-blue: rgba(247, 249, 251, .95);
  --chip-blue: rgba(0, 220, 255, .09);

  /* Icon box — same family, readable on light surfaces */
  --icon-box-bg: rgba(0, 220, 255, .09);
  --icon-box-border: rgba(0, 220, 255, .22);
  --icon-box-color: var(--accent-glow);
}

:root {
  --icon-box-border-w: 1px;
  --icon-box-radius: var(--radius-sm);
  /* Uniform cyan border for blue-family blocks/chips.
     Gray blocks keep using --border. */
  --border-blue: rgba(0, 220, 255, .18);
}

html.light-mode .page-mesh { display: none; }
html.light-mode .hero-overlay { background: transparent; }
html.light-mode section.alt-bg { background: var(--bg-elevated); }
html.light-mode .ticker { background: var(--bg-elevated); }
html.light-mode footer { background: var(--bg-elevated); }
html.light-mode .nav-logo img { filter: none; }

html.light-mode .mepax-nav {
  border-bottom-color: var(--border);
}
html.light-mode .mepax-nav::after { opacity: .2; }
html.light-mode .mepax-nav.scrolled { box-shadow: 0 4px 24px rgba(17, 24, 39, .08); }

html.light-mode .gnp-banner {
  background: linear-gradient(135deg, rgba(0, 120, 150, .08) 0%, rgba(0, 60, 90, .06) 50%, rgba(0, 120, 150, .04) 100%);
  border-top-color: var(--border);
  border-bottom-color: var(--border);
}
html.light-mode .gnp-banner::before { color: rgba(14, 165, 233, .05); }
html.light-mode .gnp-num { color: var(--text); text-shadow: none; }
html.light-mode .gnp-pct { color: var(--accent-glow); }
html.light-mode h1 em, html.light-mode h2 em { text-shadow: none; }

html.light-mode .svc { border-color: var(--border); }
html.light-mode .svc h3 { color: var(--text); }
html.light-mode .svc:hover::after { background: rgba(0, 220, 255, .06); }

html.light-mode .reach-cell:hover { background: var(--surface); }
html.light-mode #ecosystem.ecosystem-section { background: var(--bg-elevated); }
html.light-mode .cta-wrap {
  background:
    radial-gradient(ellipse 60% 90% at 50% -20%, rgba(14, 165, 233, .08) 0%, transparent 65%),
    var(--bg-elevated);
}
html.light-mode .testimonial-card:hover { box-shadow: 0 12px 32px rgba(17, 24, 39, .08); }
html.light-mode .testimonials-track { scrollbar-color: var(--text) transparent; }
html.light-mode .testimonials-track::-webkit-scrollbar-thumb { background: rgba(17, 24, 39, .55); }
html.light-mode .testimonials-track::-webkit-scrollbar-thumb:hover { background: rgba(17, 24, 39, .85); }
html.light-mode .region-chips span {
  background: rgba(17, 24, 39, .04);
  border-color: var(--border);
  color: var(--text-muted);
}
html.light-mode .hero-pillars { border-color: var(--border); }
html.light-mode .mobile-drawer-panel { background: rgba(255, 255, 255, .96); border-left-color: var(--border); }
html.light-mode #sectors { background: var(--bg-elevated); }
html.light-mode .sc-img { background: #fff; }
html.light-mode .sc:hover { box-shadow: 0 18px 50px rgba(17, 24, 39, .1); }