:root {
  --theme-primary: #0046e8;
  --theme-medium: #0041ac;
  --theme-dark: #3a2b68;
  --background: #f2f2f7;
  --font-color: #151515;
  --disabled-background: #bcbcbc;
  --placeholder-color: #aaaaaa80;
  --border-radius: 5px;
  --theme-primary-transparent: rgba(1, 70, 108, 0.8);
  --gray-lighter: #eff0f6;
  --gray-light: #e5e5ea;
  --gray-medium: #d9dbe9;
  --gray-dark: #6e7f88;
  --gray-darker: #6e7191;
  --gray-darkest: #262338;
  --error-color: #fd6a6a;
  --error-color-dark: #ff4136;
  --error-color-transparent: #fd6a6a1a;
  --success-color: #11b797;
  --success-color-dark: #0e8a71;
  --theme-light: #0145e8;
  --warning-color: #e9c429;
  --cancel-color: #ca024f;
  --form-labels-color: #4e4b66;
  --font-color-primary: #3a2b68;
  --font-color-secondary: rgb(87, 87, 87);

  /* Design System — brand */
  --brand-light: #e7ecfd; /* fundo do Segment Control */
  --brand-blue: #1545de; /* azul-claro do design system (texto/borda ativos) */
}

:root {
  /* superficies */
  --surface-ground: #f2f2f7;
  --surface-section: #ffffff;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-hover: #e9ecef;
  --surface-border: #dee2e6;

  --surface-0: #ffffff;
  --surface-50: #fafafa;
  --surface-100: #f5f5f5;
  --surface-200: #eeeeee;
  --surface-300: #e0e0e0;
  --surface-400: #bdbdbd;
  --surface-500: #9e9e9e;
  --surface-600: #757575;
  --surface-700: #616161;
  --surface-800: #424242;
  --surface-900: #212121;

  /* texto */
  --text-color: var(--font-color);
  --text-color-secondary: var(--gray-darker);

  /* cor primaria */
  --primary-color: var(--theme-primary);
  --primary-color-text: #ffffff;
}