/* Gerado de compartilhado/design/figma-export/tokens/variaveis.css (marca izatahub). Não editar à mão: mudou o Figma, exporte de novo e regere. */

:root {
  --navy-900: #00122D;
  --navy-800: #001E4B;
  --blue-700: #005198;
  --blue-600: #0071D3;
  --blue-400: #3A9BEA;
  --blue-200: #A3CDE2;
  --cyan-500: #00B4D8;
  --amber-400: #FFB020;
  --gray-700: #4A4A55;
  --gray-500: #7B7B7F;
  --gray-200: #D0D0D7;
  --surface-50: #F7F7FF;
  --surface-25: #F5FFFF;
  --white: #FFFFFF;
  --navy-mute: #CCD2DC;
  --placeholder: #FFF3BF;
  --red-600: #B3261E;
  --green-600: #1B7F4B;
  --bg-hero: var(--surface-25);
  --bg-hero-deep: var(--surface-50);
  --bg-page: var(--surface-25);
  --bg-section-alt: var(--surface-50);
  --bg-dark: var(--navy-800);
  --bg-footer: var(--navy-900);
  --bg-card: var(--white);
  --bg-preencher: var(--placeholder);
  --text-primary: var(--navy-800);
  --text-secondary: var(--gray-700);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--navy-mute);
  --text-highlight-on-dark: var(--cyan-500);
  --action-primary: var(--blue-600);
  --action-primary-hover: var(--blue-700);
  --action-primary-text: var(--white);
  --action-link: var(--blue-600);
  --accent: var(--cyan-500);
  --badge-free: var(--amber-400);
  --badge-free-text: var(--navy-800);
  --border: var(--gray-200);
  --focus-ring: var(--blue-600);
  --whatsapp: var(--blue-600);
  --state-error: var(--red-600);
  --state-success: var(--green-600);
  --border-input: var(--gray-500);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-30: 120px;
  --section-padding-y: 112px;
  --layout-margin: 120px;
  --layout-content-width: 1200px;
  --layout-gutter: 24px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --font-heading: "Manrope";
  --font-body: "Inter";
  --font-mono: "JetBrains Mono";
  --size-display: 56px;
  --size-h1: 48px;
  --size-h2: 36px;
  --size-h3: 24px;
  --size-body-lg: 18px;
  --size-body: 16px;
  --size-small: 14px;
  --size-label: 13px;
}

@media (max-width: 999px) {
:root {
--section-padding-y: 80px;
  --layout-margin: 32px;
  --layout-content-width: 704px;
}
}

@media (max-width: 689px) {
:root {
  --section-padding-y: 56px;
  --layout-margin: 20px;
  --layout-content-width: 350px;
  --layout-gutter: 16px;
  --size-display: 36px;
  --size-h1: 32px;
  --size-h2: 26px;
  --size-h3: 20px;
  --size-body-lg: 17px;
}
}