/**
 * variables.css — Tokens de design do projeto Co.Crie.
 * Cores, tipografia, espaçamentos e reset CSS mínimo.
 * Altere apenas aqui para mudar o visual global do formulário.
 */

/* ─── Font: Metropolis ──────────────────────────────────────────────────── */
/* Thin */
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-ThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
}

/* Extra Light */
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-ExtraLightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
}

/* Light */
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}

/* Regular */
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}

/* Medium */
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
}

/* SemiBold */
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
}

/* Bold */
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

/* Extra Bold */
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-ExtraBoldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
}

/* Black */
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Metropolis";
  src: url("./fonts/Metropolis-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
}

/* ─── Tokens de cor ────────────────────────────────────────────────────────── */
:root {
  --color-primary: #192740; /* Navy — texto, painel esquerdo */
  --color-accent: #f24e29; /* Laranja — CTA, progresso, destaque */
  --color-bg: #f5f8f7; /* Off-white — fundo do formulário */
  --color-white: #ffffff;
  --color-text-muted: #6b7280; /* Labels, placeholders */
  --color-border: #e5e7eb; /* Borda de inputs no estado normal */
  --color-error: #dc2626; /* Mensagens de erro */
  --color-success: #059669; /* Validação positiva */

  /* ─── Tipografia ─────────────────────────────────────────────────────────── */
  --font-family: "Metropolis", system-ui, -apple-system, sans-serif;

  /* ─── Border-radius ──────────────────────────────────────────────────────── */
  --radius-input: 8px;
  --radius-btn: 8px;
}

/* ─── Reset CSS mínimo ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-family);
  color: var(--color-primary);
  -webkit-font-smoothing: antialiased;
}

.form__extra {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}