/* ==========================================================================
   Mazingira Yetu — Design Tokens
   Location: assets/css/variables.css
   Single source of truth for color, type, spacing, radius, shadow, and
   motion values. Every component in assets/css/main.css reads from here.
   ========================================================================== */

:root {
  /* Brand colors — derived from the Mazingira Yetu mark: forest green + sky/water blue */
  --mzy-green: #1E7A3D;
  --mzy-green-dark: #14532A;
  --mzy-green-light: #E6F4EA;
  --mzy-blue: #1E96C8;
  --mzy-blue-dark: #0E5C7D;
  --mzy-blue-light: #EAF7FC;
  --mzy-sand: #F4F1EA;

  /* Dark blue — primary action / navigation color (Section 22 brand hierarchy) */
  --mzy-navy: #0B3D66;
  --mzy-navy-dark: #082C4A;
  --mzy-navy-light: #E8F0F7;

  /* Semantic aliases used across templates */
  --mzy-primary: var(--mzy-navy);
  --mzy-primary-dark: var(--mzy-navy-dark);
  --mzy-secondary: var(--mzy-blue);
  --mzy-secondary-dark: var(--mzy-blue-dark);
  --mzy-white: #FFFFFF;
  --mzy-light-grey: #F5F7F6;
  --mzy-medium-grey: #64706B;
  --mzy-dark-grey: #223026;
  --mzy-border: #E1E8E3;

  /* Legacy aliases kept for any component still referencing old names */
  --mzy-dark-blue: var(--mzy-navy);
  --mzy-gold: var(--mzy-blue);
  --mzy-red: #B3261E;
  --mzy-light-blue: var(--mzy-blue-light);

  /* Header-only accent colors (scoped use — see main.css comments) */
  --mzy-yellow: #F2C300;
  --mzy-yellow-dark: #C9A400;
  --mzy-switch-red: #C00000;
  --mzy-switch-red-dark: #970000;
  --mzy-switch-black: #000000;
  --mzy-switch-black-dark: #1A1A1A;

  /* Footer — light-blue/black tokens retained for potential reuse
     (currently unused; footer background is dark navy, matching the
     main nav, per the latest revision — see --mzy-footer-bg below). */
  --mzy-footer-blue: #D9F0FA;
  --mzy-footer-blue-strong: #BFE3F5;
  --mzy-footer-text: #063B5C;
  --mzy-footer-border: rgba(6, 59, 92, 0.16);
  --mzy-footer-bg: var(--mzy-navy);
  --mzy-footer-divider: rgba(255, 255, 255, 0.25);

  /* Typography */
  --mzy-font-heading: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --mzy-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale */
  --mzy-space-xs: 8px;
  --mzy-space-sm: 16px;
  --mzy-space-md: 24px;
  --mzy-space-lg: 40px;
  --mzy-space-xl: 64px;
  --mzy-space-2xl: 96px;

  /* Radius */
  --mzy-radius-sm: 6px;
  --mzy-radius-md: 12px;
  --mzy-radius-lg: 20px;
  --mzy-radius-pill: 999px;

  /* Shadows — soft, premium, never heavy */
  --mzy-shadow-sm: 0 2px 8px rgba(20, 83, 42, 0.07);
  --mzy-shadow-md: 0 8px 24px rgba(20, 83, 42, 0.10);
  --mzy-shadow-lg: 0 20px 48px rgba(20, 83, 42, 0.16);
  --mzy-shadow-focus: 0 0 0 4px rgba(30, 150, 200, 0.35);

  /* Motion */
  --mzy-transition-fast: 250ms ease-out;
  --mzy-transition-med: 350ms ease-out;

  /* Layout — single global content-width system (Section 1 of the
     global-content-width spec). Every section container — header,
     nav, hero, content, cards, contact, CTA, footer — reads from
     these two variables so nothing competes with it. */
  --mzy-content-width: 1280px;
  --mzy-content-gutter: 40px;
  --mzy-container-max: var(--mzy-content-width); /* legacy alias, same value */
  --mzy-header-top-height: 64px;
  --mzy-header-nav-height: 50px;
  --mzy-header-height: calc(var(--mzy-header-top-height) + var(--mzy-header-nav-height));
  --mzy-header-sticky-top-height: 52px;
}

/* Reduced-motion support (Section 37 — Accessibility) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}