/* ==========================================================================
   Embaixada Mundial do Bem - identidade visual (baseada na logo oficial)
   Marinho #0B3A6F (texto e estrutura), azul #1E88E5, verde #5DB82E,
   fundo claro e arejado. Laranja so em detalhes.
   ========================================================================== */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/poppins-800.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/nunito-400.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/nunito-600.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/nunito-700.woff2') format('woff2'); }

:root {
  --brand-navy: #0b3a6f;
  --brand-blue: #1e88e5;
  --brand-sky: #e8f3fd;
  --brand-green: #5db82e;
  --brand-green-dark: #3f8f1c;
  --brand-orange: #f08a24;
  --navy: #0b3a6f;
  --ink: #0b3a6f;
  --ink-soft: #536b82;

  --bg: #f7fafc;
  --surface-0: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #eef5fb;
  --surface-3: #dfecf8;
  --surface-green: #eef8e8;
  --surface-blue: #e8f3fd;

  --text: #0b3a6f;
  --text-strong: #082a52;
  --text-muted: #35557c;
  --text-faint: #566f8f;
  --on-brand: #ffffff;

  --line: rgba(11, 58, 111, 0.12);
  --line-strong: rgba(11, 58, 111, 0.26);
  --line-green: rgba(63, 143, 28, 0.45);
  --glow-blue: 0 8px 22px -10px rgba(30, 136, 229, 0.55);
  --glow-green: 0 8px 22px -10px rgba(63, 143, 28, 0.6);
  --shadow-1: 0 1px 2px rgba(11, 58, 111, 0.12);
  --shadow-2: 0 8px 24px -14px rgba(11, 58, 111, 0.28);
  --shadow-3: 0 24px 60px -30px rgba(11, 58, 111, 0.4);

  --grad-hero: radial-gradient(90% 80% at 0% 0%, rgba(30, 136, 229, 0.14) 0%, transparent 60%),
    radial-gradient(80% 70% at 100% 0%, rgba(93, 184, 46, 0.18) 0%, transparent 62%), #f7fafc;
  --grad-panel: none;
  --grad-green: linear-gradient(135deg, #5db82e 0%, #3f8f1c 100%);
  --grad-blue: linear-gradient(135deg, #1e88e5 0%, #0b3a6f 100%);
  --grad-rule: linear-gradient(90deg, transparent, rgba(30, 136, 229, 0.4), rgba(93, 184, 46, 0.4), transparent);

  --ok: #2f7a12;
  --ok-surface: #e6f5dc;
  --warn: #b25a00;
  --warn-surface: #fff1de;
  --danger: #b3261e;
  --danger-surface: #fde8e6;
  --info: #0b5fb0;
  --info-surface: #e3f0fc;
  --focus: #1e88e5;

  --font-display: 'Poppins', 'Nunito', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.82rem + 0.12vw, 0.92rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.16rem, 1.1rem + 0.3vw, 1.33rem);
  --step-2: clamp(1.38rem, 1.26rem + 0.6vw, 1.75rem);
  --step-3: clamp(1.64rem, 1.4rem + 1.1vw, 2.3rem);
  --step-4: clamp(1.95rem, 1.5rem + 1.9vw, 3rem);
  --step-5: clamp(2.3rem, 1.6rem + 3vw, 3.9rem);

  --leading-tight: 1.14;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* --- spacing and layout --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- motion tokens (section 22) --- */
  --t-micro: 160ms;
  --t-micro-slow: 220ms;
  --t-enter: 480ms;
  --t-enter-slow: 640ms;
  --ease-out: cubic-bezier(0.22, 0.72, 0.24, 1);
  --ease-in-out: cubic-bezier(0.5, 0.05, 0.3, 1);
  --ease-soft: cubic-bezier(0.3, 0.8, 0.3, 1);
  --reveal-shift: 18px;
  --stagger: 70ms;
}

/* Motion intensity is configurable in the panel. */
:root[data-motion-intensity='discreet'] {
  --t-enter: 360ms;
  --t-enter-slow: 420ms;
  --reveal-shift: 10px;
  --stagger: 45ms;
}
:root[data-motion='off'] {
  --t-micro: 1ms;
  --t-micro-slow: 1ms;
  --t-enter: 1ms;
  --t-enter-slow: 1ms;
  --reveal-shift: 0px;
  --stagger: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-micro: 1ms;
    --t-micro-slow: 1ms;
    --t-enter: 1ms;
    --t-enter-slow: 1ms;
    --reveal-shift: 0px;
    --stagger: 0ms;
  }
}