@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');

:root {
  --color-navy: #0A3656;
  --color-green-deep: #1E6B52;
  --color-green-light: #2E7D32;
  --color-amber: #D9822B;
  --color-whatsapp: #25D366;
  --color-ink: #1E293B;
  --color-fog: #F4F7F9;
  --color-white: #FFFFFF;
  --color-red: #B91C1C;
  --color-steel-100: #e2e8f0;
  --color-steel-500: #64748b;

  --surface-page: var(--color-white);
  --surface-subtle: var(--color-fog);
  --surface-inverse: var(--color-navy);
  --text-primary: var(--color-navy);
  --text-secondary: #475569;
  --text-inverse: var(--color-white);
  --border-subtle: var(--color-steel-100);
  --action-primary: var(--color-green-deep);
  --action-primary-hover: #16513e;
  --action-secondary: var(--color-navy);
  --status-alert: var(--color-red);
  --accent: var(--color-amber);

  --font-display: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --shadow-card: 0 0.25rem 1rem rgba(10,54,86,0.10);
  --shadow-float: 0 0.75rem 2rem rgba(10,54,86,0.18);
  --focus-ring: 0 0 0 3px var(--color-white), 0 0 0 6px var(--color-green-deep);
  --touch-target: 2.75rem;
  --container-max: 75rem;
}