/* ============================================================
   VENTUS HUB — Design System Override Layer
   Realinha o tema "SassTech" ao design system canônico
   (ventus-hub/client/src/styles/design-tokens.css).
   DEVE ser carregado por ÚLTIMO, após main.css.
   Fonte da verdade: navy #002140 · yellow #FFE600 · warm gray · DM Sans.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap");

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand core */
  --brand-navy: #002140;
  --brand-yellow: #FFE600;
  --brand-white: #FFFFFF;

  /* Tipografia */
  --heading-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono-font: "DM Mono", "Fira Code", "Consolas", monospace;

  /* Primária (Navy) — canais de fallback (hsl) + escala hex explícita.
     600 = navy da marca (base dos botões). Tons claros 50..500, escuros 700..900. */
  --main-h: 209;
  --main-s: 100%;
  --main-l: 13%;
  --main-50:  #E8EDF3;
  --main-100: #C5D0DE;
  --main-200: #8BA5BF;
  --main-300: #5579A0;
  --main-400: #2A5480;
  --main-500: #003D6B;
  --main-600: #002140;
  --main-700: #001830;
  --main-800: #000E1C;
  --main-900: #00070E;

  /* Secundária (Navy escuro) — seções/superfícies escuras e headings */
  --main-two-h: 210;
  --main-two-s: 100%;
  --main-two-l: 9%;
  --main-two-50:  #E6EBF0;
  --main-two-100: #BFCEDD;
  --main-two-200: #8BA5BF;
  --main-two-300: #4F7396;
  --main-two-400: #244F77;
  --main-two-500: #002B52;
  --main-two-600: #001830;
  --main-two-700: #001226;
  --main-two-800: #000C1A;
  --main-two-900: #00060D;

  /* Preto/heading alinhados ao navy (era roxo 249 63% 15%) */
  --black: 210 100% 9%;
  --heading-color: var(--black);

  /* Acento (Yellow) — #FFE600 (era ouro 40 100% 54%) */
  --yellow-h: 54;
  --yellow-s: 100%;
  --yellow-l: 50%;

  /* Link azul herdado → navy */
  --blue-color: #002140;

  /* Neutros — Warm Gray (ventus-hub) */
  --neutral-50:  #FAFAF8;
  --neutral-100: #F4F4F1;
  --neutral-200: #E8E8E4;
  --neutral-300: #D1D1CB;
  --neutral-400: #A8A89E;
  --neutral-500: #7A7A70;
  --neutral-600: #52524A;
  --neutral-700: #2E2E28;
  --neutral-800: #1C1C18;
  --neutral-900: #0F0F0C;
  --neutral-950: #080806;

  /* Semânticos (ventus-hub) */
  --semantic-success: #059669;
  --semantic-warning: #D97706;
  --semantic-error:   #DC2626;
  --semantic-info:    #0369A1;

  /* Border radius padronizado */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;
}

/* ── 2. Tipografia global (DM Sans) ───────────────────────────
   Escopo deliberadamente restrito para não afetar fontes de ícones
   (Phosphor, Bootstrap Icons) que dependem de font-family própria. */
body {
  font-family: var(--body-font);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--heading-font);
}

input, textarea, select, button, .btn,
.form-control, .form-select {
  font-family: var(--body-font);
}

code, pre, kbd, samp, .font-mono {
  font-family: var(--mono-font);
}

/* ── 3. Componentes-chave ─────────────────────────────────────
   Botões usam --main-600 / --main-two-600 e flair animado que herdam
   os tokens acima → cor já vira navy automaticamente. Aqui só ajustamos
   radius, hover de superfície e botões secundários/acento. */

.btn {
  border-radius: var(--radius-md);
}

/* Primário preenchido — hover navy mais claro (visível mesmo com base escura) */
.btn-main:hover,
.btn-main:focus-visible {
  background-color: var(--main-500) !important;
}

.btn-main-two:hover,
.btn-main-two:focus-visible {
  background-color: var(--main-700) !important;
}

/* Secundário/claro sem flair animado → hover cinza quente #F4F4F1
   (regra de marca: ghost/outline/secondary não usam amarelo no hover). */
.btn-white:not(.button--stroke):hover,
.btn-white:not(.button--stroke):focus-visible {
  background-color: var(--neutral-100) !important;
  color: var(--heading-color) !important;
}

/* Utilitário de CTA de acento (amarelo / texto navy) para destaques */
.btn-accent {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-navy) !important;
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background-color: var(--accent-500, #CCB800) !important;
  color: var(--brand-navy) !important;
}

/* Inputs/cards — borda neutra warm gray + foco navy */
.form-control,
.form-select,
input.tw-rounded-12,
textarea.tw-rounded-12 {
  border-radius: var(--radius-md);
}

.form-control:focus,
.form-select:focus,
input:focus-visible,
textarea:focus-visible {
  border-color: var(--main-600) !important;
  box-shadow: 0 0 0 3px rgba(0, 33, 64, 0.12) !important;
  outline: none !important;
}

/* ── 4. Hero breadcrumb (section-bg-two) ─────────────────────
   No tema original, .section-bg-two usa fundo claro (#F3F8F8) com
   texto branco — contraste zero. Sobrescrevemos para navy. */
.breadcrumb.section-bg-two,
section.breadcrumb.section-bg-two {
  background-color: var(--brand-navy) !important;
  background-image: none !important;
}

/* ── 5. Classes de marca custom (hardcoded no tema) ───────────
   Estavam em #001f3f; alinhar ao navy exato #002140 do DS. */
.bg-ventushub        { background-color: var(--brand-navy) !important; }
.bg-ventushub-light  { background-color: #003D6B !important; }
.text-ventushub      { color: var(--brand-navy) !important; }
.border-ventushub    { border-color: var(--brand-navy) !important; }
.hover-bg-ventushub:hover   { background-color: var(--brand-navy) !important; }
.hover-text-ventushub:hover { color: var(--brand-navy) !important; }
.bg-ventushub.hover-bg-ventushub-light:hover { background-color: #003D6B !important; }

/* Acento amarelo utilitário (caso referenciado em HTML) */
.bg-brand-yellow   { background-color: var(--brand-yellow) !important; }
.text-brand-yellow { color: var(--brand-yellow) !important; }