/* ==========================================================================
   Woba Design System — tokens usados por este formulário
   Recorte de `colors_and_type.css` (fonte: Figma "Global Tokens Woba").

   Fonte de verdade é o Design System, não o protótipo de BTS: os dois divergem
   no canvas (#F1F1ED vs #FCFBF9), na borda (#E3E2DC vs #E8E4D8) e no anel de
   foco (o protótipo usa amarelo onde o DS usa o token de info). Aqui vale o DS.
   ========================================================================== */

@font-face {
  font-family: "Host Grotesk";
  src: url("./fonts/HostGrotesk-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("./fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutros ------------------------------------------------------------- */
  --color-neutral-black: #000000;
  --color-neutral-white: #ffffff;
  --color-neutral-dark-300: #95948f;
  --color-neutral-dark-400: #71716a;
  --color-neutral-dark-500: #4e4d45;
  --color-neutral-dark-600: #3e3e37;
  --color-neutral-dark-700: #2f2e29;
  --color-neutral-light-100: #f8f8f6;
  --color-neutral-light-200: #f1f1ed;
  --color-neutral-light-300: #eae9e5;
  --color-neutral-light-400: #e3e2dc;

  /* Marca --------------------------------------------------------------- */
  --color-brand-primary-50:  #fefce7;
  --color-brand-primary-100: #fef9cf;
  --color-brand-primary-200: #fdf39e;
  --color-brand-primary-500: #f9e10d;
  --color-brand-primary-600: #c9b50a;
  --color-brand-primary-700: #988908;
  --color-brand-secondary-500: #f6f2e7;
  --color-brand-secondary-600: #cfcabd;

  /* Feedback ------------------------------------------------------------ */
  --color-feedback-success-50:  #f2f9ea;
  --color-feedback-success-200: #cde7aa;
  --color-feedback-success-500: #81c42b;
  --color-feedback-success-700: #4d761a;
  --color-feedback-danger-50:  #fcefea;
  --color-feedback-danger-200: #f2c1ac;
  --color-feedback-danger-500: #de6530;
  --color-feedback-danger-700: #853d1d;
  --color-feedback-warning-50:  #fff3e7;
  --color-feedback-warning-200: #ffd1a1;
  --color-feedback-warning-700: #98540c;
  --color-feedback-info-50:  #ebf2fa;
  --color-feedback-info-200: #b0cceb;
  --color-feedback-info-500: #3a80ce;
  --color-feedback-info-700: #234d7c;

  /* Papéis semânticos — é o que o produto usa -------------------------- */
  --fg-1: var(--color-neutral-black);
  --fg-2: var(--color-neutral-dark-600);
  --fg-3: var(--color-neutral-dark-400);
  --fg-muted: var(--color-neutral-dark-300);
  --fg-on-brand: var(--color-neutral-black);
  --fg-on-dark: var(--color-neutral-light-200);

  --bg-canvas: var(--color-neutral-light-200);
  --bg-surface: var(--color-neutral-white);
  --bg-sunken: var(--color-neutral-light-100);
  --bg-accent: var(--color-brand-secondary-500);
  --bg-inverse: var(--color-neutral-black);

  --border-subtle: var(--color-neutral-light-400);
  --border-default: var(--color-neutral-light-300);
  --border-strong: var(--color-neutral-dark-600);

  --accent: var(--color-brand-primary-500);
  --accent-hover: var(--color-brand-primary-600);
  --accent-soft: var(--color-brand-primary-100);

  --danger: var(--color-feedback-danger-500);
  --warning: var(--color-feedback-warning-700);
  --info: var(--color-feedback-info-500);
  --success: var(--color-feedback-success-500);

  /* Tipografia ---------------------------------------------------------- */
  --font-display: "Host Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", "Host Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-h3: 40px;
  --fs-h4: 32px;
  --fs-h5: 24px;
  --fs-h6: 20px;
  --fs-h7: 16px;
  --fs-body-18: 18px;
  --fs-body-16: 16px;
  --fs-body-14: 14px;
  --fs-body-12: 12px;
  --fs-overline: 10px;

  --lh-tight: 1.2;
  --lh-body: 1.5;

  --ls-display: -0.03em;
  --ls-heading: -0.01em;
  --ls-overline: 0.08em;

  /* Espaçamento — base 4px, escala progressiva do Figma ---------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Raio — cartão 16, cartão aninhado 8. Não desviar. ------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Sombras — curtas e suaves ------------------------------------------ */
  --shadow-xs: 0 3px 6px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 16px 0 rgba(0, 0, 0, 0.16);

  /* Movimento — fade e escala sutil, sem bounce ------------------------ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}