/* Tema APF Assessoria Empresarial — carregado DEPOIS de style.css.
   Sobrescreve apenas os tokens do design system: toda a estrutura de telas,
   componentes e JavaScript é a mesma do tema base (NUAD), o que permite
   mesclar os dois branches sem conflito de layout.
   Fonte: projeto "APF Quiz" no Claude Design (_apf_ds). */

/* Dosis — fonte de display confirmada do papel timbrado APF.
   Poppins — substituta livre da Century Gothic (fonte licenciada). */
@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600;700;800&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* ── Tipografia ─────────────────────────────────────────────────────── */
  --font-display: "Dosis", "Trebuchet MS", sans-serif;
  --font-body: "Poppins", "Century Gothic", "Questrial", -apple-system, sans-serif;
  --font-rounded: "Dosis", sans-serif;

  /* ── Verdes da marca (amostrados do logo e do timbrado) ─────────────── */
  --apf-green-900: #00521f;
  --apf-green-800: #006b2d;
  --apf-green-700: #0a7934;   /* chevron escuro; "A" do logo */
  --apf-green-600: #00913f;
  --apf-green-500: #14b255;   /* chevron médio; "P" do logo */
  --apf-green-400: #4fca82;
  --apf-green-300: #7adfa9;   /* "F" do logo e chevron claro */
  --apf-green-200: #a9ebc7;
  --apf-green-100: #d4f5e3;
  --apf-green-050: #eefbf3;
  --apf-lime-500: #92d050;
  --apf-plum-700: #3c1639;
  --apf-plum-500: #521e4e;    /* única cor não-verde da marca */
  --apf-plum-300: #8d5c88;

  /* ── Rampa de ação (substitui os azuis SGTES pelos verdes APF) ──────── */
  --sgtes-azul: var(--apf-green-700);
  --sgtes-verde: var(--apf-green-500);
  --sgtes-amarelo: var(--apf-lime-500);
  --sgtes-vermelho: #c0392b;
  --sgtes-cinza: #656565;
  --blue-50: var(--apf-green-050);
  --blue-100: var(--apf-green-100);
  --blue-200: var(--apf-green-200);
  --blue-300: var(--apf-green-300);
  --blue-400: var(--apf-green-400);
  --blue-500: var(--apf-green-700);
  --blue-600: var(--apf-green-800);
  --blue-700: var(--apf-green-900);
  --blue-800: #003a16;

  /* ── Rampas de apoio ────────────────────────────────────────────────── */
  --green-50: var(--apf-green-050); --green-100: var(--apf-green-100);
  --green-500: var(--apf-green-500); --green-600: var(--apf-green-600); --green-700: var(--apf-green-900);
  --yellow-50: #fdf5e4; --yellow-100: #fae7c2; --yellow-500: #c98a12; --yellow-600: #a87310; --yellow-700: #7d550c;
  --red-50: #fbeceb; --red-100: #f5d2cf; --red-500: #c0392b; --red-600: #a23023; --red-700: #82261c;

  /* ── Neutros (cinza do logo #656565, creme do timbrado) ─────────────── */
  --neutral-0: #ffffff;
  --neutral-50: #fafaf9;
  --neutral-100: #f5f5f3;
  --neutral-200: #e5e5e2;
  --neutral-300: #c9c9c6;
  --neutral-400: #b0b0ad;
  --neutral-500: #8a8a88;
  --neutral-600: #656565;
  --neutral-700: #4a4a4a;
  --neutral-800: #2e2e2e;
  --neutral-900: #1a1a1a;

  /* ── Série categórica (barras, quiz, nuvem): verdes + plum ──────────── */
  --data-1: var(--apf-green-700);
  --data-2: var(--apf-green-500);
  --data-3: var(--apf-lime-500);   /* mantém tinta escura, como o amarelo do tema base */
  --data-4: var(--apf-green-600);
  --data-5: var(--apf-plum-500);
  --data-6: var(--apf-green-800);
  --data-7: var(--apf-plum-300);
  --data-8: var(--apf-green-900);

  /* ── Semântica ──────────────────────────────────────────────────────── */
  --surface-page: #ffffff;
  --surface-card: #ffffff;
  --surface-sunken: #f5f5f3;
  --surface-inverse: #1a1a1a;
  --surface-accent: var(--apf-green-050);
  --surface-institutional: var(--apf-green-900); /* cabeçalho do participante */

  --text-heading: #1a1a1a;
  --text-body: #4a4a4a;
  --text-muted: #656565;
  --text-inverse: #ffffff;
  --text-link: var(--apf-green-700);
  --text-link-hover: var(--apf-green-900);

  --border-subtle: #e5e5e2;
  --border-default: #c9c9c6;
  --border-focus: var(--apf-green-500);

  --action-primary-bg: var(--apf-green-700);
  --action-primary-bg-hover: var(--apf-green-800);
  --action-primary-bg-active: var(--apf-green-900);
  --action-secondary-border: var(--apf-green-300);
  --action-secondary-fg: var(--apf-green-700);
  --action-secondary-bg-hover: var(--apf-green-050);
  --action-ghost-fg: var(--apf-green-700);
  --action-ghost-bg-hover: var(--apf-green-050);

  --status-success-fg: var(--apf-green-700);
  --status-success-bg: var(--apf-green-050);
  --status-success-border: var(--apf-green-300);
  --status-warning-fg: #7d550c;
  --status-warning-bg: #fdf5e4;
  --status-warning-border: #c98a12;
  --status-danger-fg: #c0392b;
  --status-danger-bg: #fbeceb;
  --status-danger-border: #c0392b;
  --status-info-fg: var(--apf-plum-500);
  --status-info-bg: #eee5ed;
  --status-info-border: var(--apf-plum-500);

  /* ── Cantos (APF é um pouco mais arredondado: cartões em 16px) ──────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Sombras suaves com tinta verde (nunca cinza-chumbo) ────────────── */
  --shadow-xs: 0 1px 2px rgba(10, 121, 52, .06);
  --shadow-sm: 0 1px 3px rgba(10, 121, 52, .08), 0 1px 2px rgba(26, 26, 26, .04);
  --shadow-md: 0 4px 12px rgba(10, 121, 52, .10), 0 1px 3px rgba(26, 26, 26, .04);
  --shadow-lg: 0 12px 32px rgba(10, 121, 52, .12), 0 2px 8px rgba(26, 26, 26, .05);
  --ring-focus: 0 0 0 3px rgba(20, 178, 85, .32);

  /* ── Movimento (calmo, sem bounce) ──────────────────────────────────── */
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);

  /* O único gradiente do sistema: a progressão A→P→F do logo */
  --gradient-apf: linear-gradient(90deg, var(--apf-green-700) 0%, var(--apf-green-500) 52%, var(--apf-green-300) 100%);
}

/* Marca: barra em gradiente A→P→F no lugar dos pontos ascendentes */
.wordmark .dots { display: none; }
.wordmark .brand-bar {
  display: block; width: 40px; height: 3px;
  border-radius: var(--radius-pill);
  background: var(--gradient-apf);
}
.wordmark.lg .brand-bar { width: 56px; }
.wordmark .name b { color: var(--apf-green-500); }

/* Faixa chevron do timbrado (rodapé da home) */
.chevron-band {
  display: block; width: 100%; height: 34px;
  object-fit: cover;
}