/**
 * Mpower brand tokens
 * Edit values here, then mirror the same values in Divi 5 Variable Manager.
 */
:root {
  /* Core color */
  --mp-ink: #07111f;
  --mp-navy: #0d1b2e;
  --mp-blue: #2457ff;
  --mp-cyan: #24c7e5;
  --mp-aqua-soft: #dff8fc;
  --mp-cloud: #f5f7fb;
  --mp-white: #ffffff;
  --mp-slate: #475569;
  --mp-line: #d8e0ea;
  --mp-amber: #f4a340;

  /* Semantic aliases */
  --mp-color-bg: var(--mp-white);
  --mp-color-surface: var(--mp-cloud);
  --mp-color-text: var(--mp-ink);
  --mp-color-muted: var(--mp-slate);
  --mp-color-primary: var(--mp-blue);
  --mp-color-secondary: var(--mp-cyan);
  --mp-color-border: var(--mp-line);
  --mp-color-accent: var(--mp-amber);

  /* Type — load Space Grotesk and Inter locally or through Divi if desired. */
  --mp-font-display: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  --mp-font-body: "Inter", "Avenir Next", "Segoe UI", sans-serif;
  --mp-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Fluid type */
  --mp-text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --mp-text-sm: clamp(0.875rem, 0.84rem + 0.12vw, 0.9375rem);
  --mp-text-base: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --mp-text-lg: clamp(1.125rem, 1.04rem + 0.3vw, 1.25rem);
  --mp-text-xl: clamp(1.35rem, 1.16rem + 0.65vw, 1.75rem);
  --mp-text-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --mp-text-3xl: clamp(2.25rem, 1.65rem + 2vw, 3.75rem);
  --mp-text-hero: clamp(2.75rem, 1.7rem + 3.8vw, 6rem);

  /* Spacing */
  --mp-space-1: 0.5rem;
  --mp-space-2: 0.75rem;
  --mp-space-3: 1rem;
  --mp-space-4: 1.5rem;
  --mp-space-5: 2rem;
  --mp-space-6: 3rem;
  --mp-space-7: 4.5rem;
  --mp-space-8: 6rem;
  --mp-section-space: clamp(4rem, 2.7rem + 4vw, 7.5rem);
  --mp-content-width: 1200px;
  --mp-reading-width: 720px;

  /* Shape and depth */
  --mp-radius-sm: 0.5rem;
  --mp-radius-md: 0.875rem;
  --mp-radius-lg: 1.5rem;
  --mp-radius-pill: 999px;
  --mp-shadow-sm: 0 8px 24px rgba(7, 17, 31, 0.08);
  --mp-shadow-md: 0 18px 55px rgba(7, 17, 31, 0.14);
  --mp-focus-ring: 0 0 0 4px rgba(36, 87, 255, 0.24);

  /* Motion */
  --mp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mp-duration: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mp-duration: 0ms;
  }
}