/* XMotion Child — global tokens + safe fallbacks only.
 * Elementor Site Settings remain the primary styling source. This file is
 * a fallback so non-Elementor content (blog posts, search, 404, comments)
 * still looks on-brand. It must NEVER hide content, and must NEVER use
 * !important to fight Elementor widget settings. */

/* Canonical tokens — reconciled from BRAND.md + the homepage design system.
 * Primary navy is #0B1220 (design system). #0A1428 (older BRAND.md) is kept
 * as a legacy alias only; do not introduce a third navy. */
:root {
  --xm-navy: #0B1220;
  --xm-navy-legacy: #0A1428;
  --xm-charcoal: #111827;
  --xm-charcoal-2: #1F2937;
  --xm-card-dark: #141E33;
  --xm-light: #F5F7FB;
  --xm-white: #FFFFFF;
  --xm-blue: #2563EB;
  --xm-purple: #7C3AED;
  --xm-cyan: #00E0FF; /* accent ONLY on dark backgrounds, never body text on light */
  --xm-body-light: #4B5563;
  --xm-body-dark: #CBD5E1;
  --xm-body-dark-2: #E2E8F0;
  --xm-border-light: #E5E9F2;
  --xm-font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --xm-font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: var(--xm-font-body);
  color: var(--xm-body-light);
  background: var(--xm-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--xm-font-heading);
  color: var(--xm-navy);
  line-height: 1.15;
}

/* Links: blue on light. Cyan is never a body link on light backgrounds
 * (it fails contrast) — cyan appears only on dark backgrounds, via Elementor. */
a { color: var(--xm-blue); }
a:hover, a:focus { color: var(--xm-purple); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--xm-blue);
  outline-offset: 2px;
}

/* Fallback button classes for non-Elementor contexts ONLY (forms, 404,
 * comments). Elementor buttons use their own native styling. */
.xm-btn-primary {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--xm-blue), var(--xm-purple));
  color: var(--xm-white);
  font-family: var(--xm-font-heading);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  min-height: 44px;
  line-height: 1.4;
}
.xm-btn-primary:hover, .xm-btn-primary:focus { color: var(--xm-white); }

/* Reduced motion: this file adds no animation, so nothing to disable here.
 * Any animation added later must be wrapped in:
 *   @media (prefers-reduced-motion: no-preference) { ... } */

/* Responsive container fallback for non-Elementor templates. */
.xm-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) { .xm-container { padding-left: 32px; padding-right: 32px; } }