:root {
  /* ===== Cores da marca (próprias) ===== */
  --brand-500: #E63888;   /* roxo-violeta principal */
  --brand-600: #C42C74;   /* hover/escuro */
  --brand-400: #F0679F;   /* claro/realce */
  --brand-100: #FCE7F0;   /* tinte suave */

  /* ===== Neutros ===== */
  --ink-900: #1a1a2e;     /* títulos */
  --ink-700: #3f3f55;     /* texto forte */
  --ink-500: #6b7280;     /* texto secundário */
  --ink-300: #c7c9d1;     /* bordas */
  --ink-100: #f3f4f7;     /* fundo claro */
  --white:   #ffffff;

  --danger:  #dc2626;     /* erro/validação (vermelho neutro) */
  --success: #16a34a;
  --surface-bg: #f5f6f8;  /* fundo da área de login */

  /* ===== Tipografia ===== */
  --font-base: 'Roboto', 'Roboto Fallback', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.375rem;
  --fs-xl: 2.25rem;
  --fs-2xl: 2.75rem;
  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* ===== Espaçamentos ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ===== Raios e sombras ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 40px rgba(26, 26, 46, 0.12);
  --shadow-fab: 0 4px 16px rgba(26, 26, 46, 0.2);

  /* ===== Layout ===== */
  --hero-width: 42%;
  --card-max: 400px;
  --gutter: 16px;
}