/**
 * Design Tokens — FJPN Site
 *
 * Fonte: Obsidian vault, proerp/fjpn-site/architecture/design-tokens.md
 * Extraído do código-fonte do design publicado no Figma Make
 * (src/App.tsx + src/index.css, Tailwind v4.2.2 compilado).
 * Todos os valores são literais do código-fonte, não estimativas.
 *
 * Prefixo `--fjpn-` em todas as custom properties para não colidir
 * com o tema pai (bighearts) nem com variáveis do Elementor.
 *
 * NÃO editar wp-content/themes/bighearts/ — este arquivo vive no child theme.
 */

:root {

  /* ==========================================================
   * 1. PALETA — CORPO DO SITE
   * Bloco "Tokens" do código-fonte. Usado em Hero, Sobre, Números,
   * Programas, Missão, Áreas de Atuação, Notícias, Newsletter, CTA.
   * ========================================================== */
  --fjpn-blue-primary: #1b4da1;   /* Azul institucional principal — gradientes, textos de destaque, badges, borda de BlueButton outline */
  --fjpn-blue-dark: #133a7a;      /* Azul escuro — stop final de gradientes, BlueButton preenchido */
  --fjpn-blue-light: #e8f0fb;     /* Azul muito claro — fundo da categoria "Educação", hover de botões */
  --fjpn-blue-mid: #2563eb;       /* Azul médio/saturado — stop de gradiente (Hero, CTA de doação) */
  --fjpn-orange-primary: #f97316; /* Laranja — eyebrow, divisor de seção, OrangeButton, badge do Hero */
  --fjpn-text-primary: #1e293b;   /* Texto principal — headings, rótulos de cards */
  --fjpn-text-muted: #64748b;     /* Texto secundário — subtítulos, legendas, copyright do footer */
  --fjpn-bg-soft: #f8fafc;        /* Fundo neutro claro de seção alternada */
  --fjpn-white: #ffffff;          /* Branco puro — fundo de card, texto sobre azul */

  /* Estado de erro — ausente no design original, que não previu validação de
     formulário. Necessário para mensagens acessíveis. Os dois tons mantêm
     contraste AA tanto sobre fundo claro quanto sobre o gradiente azul. */
  --fjpn-error: #b91c1c;          /* Texto de erro sobre fundo claro */
  --fjpn-error-light: #fecaca;    /* Texto de erro sobre fundo escuro/gradiente */
  --fjpn-warning: #7a2e0e;        /* Aviso — laranja escurecido até contraste AA sobre branco */

  /* Laranja acessível — o laranja da marca (#f97316) tem contraste 2.80:1
     contra branco, reprovando em WCAG AA (4.5:1 para texto, 3:1 para
     indicador de foco). Este tom escurecido atinge 4.78:1 nos dois sentidos.
     USE ESTE em: texto laranja sobre fundo claro, fundo de botão com texto
     branco, e contorno de foco sobre fundo claro.
     O --fjpn-orange-primary segue válido para elemento decorativo grande
     (divisor, ícone) e sobre fundo escuro, onde 3:1 basta. */
  /* DECISÃO DO RESPONSÁVEL (item 27): o laranja de PREENCHIMENTO é o vivo do
     protótipo aprovado, #f97316, não o escurecido. Ele rende 2,80:1 com texto
     branco e reprova WCAG AA para texto normal — registrado aqui como escolha
     consciente de marca, não como descuido. Quem for revisitar: subir para
     4,5:1 exigiria escurecer até ~#bf5108, que foi recusado por fidelidade ao
     aprovado. Alternativa sem perder o tom: texto do botão em azul escuro em
     vez de branco. */
  --fjpn-orange-cta: #f97316;
  --fjpn-orange-cta-end: #ea6c0c;
  --fjpn-gradient-orange-cta: linear-gradient(135deg, #f97316, #ea6c0c);

  /* Anel de foco de teclado — este SEGUE escuro (4,78:1). Não aparece em uso
     normal com mouse, então não afeta a fidelidade visual; e um indicador de
     foco a 2,8:1 sobre fundo claro é praticamente invisível justamente para
     quem depende dele. É o único lugar onde o tom escurecido sobrevive. */
  --fjpn-orange-focus: #bf5108;

  /* ==========================================================
   * 2. PALETA — HEADER
   * Bloco "Header constants" do código-fonte. Conjunto DISTINTO
   * do azul do corpo — inconsistência do gerador (Figma Make),
   * não decisão de design. Mantido separado para fidelidade 1:1
   * com o código-fonte (ver nota da seção 1.2 do doc de origem).
   * ========================================================== */
  --fjpn-header-bg: #28529c;            /* Fundo do <header> fixo (height: 96px) */
  --fjpn-header-accent: #59a9ff;        /* Link de nav ativo/hover, seta de dropdown, indicador triangular */
  --fjpn-header-hover-bg: #f2f7ff;      /* Fundo de hover em itens de dropdown do menu */
  --fjpn-header-gradient-dark: #1a3567; /* Stop escuro de gradientes do header/logo, texto "Fundação" na logo */

  /* ==========================================================
   * 3. ESCALA NEUTRA (SLATE)
   * Escala Tailwind confirmada, seção 1.3 do doc de origem.
   * ========================================================== */
  --fjpn-slate-50: #f8fafc;   /* Fundo de seção alternada (= --fjpn-bg-soft) */
  --fjpn-slate-100: #f1f5f9;  /* Placeholder de imagem — fundo atrás de <img> nos cards de Programas */
  --fjpn-slate-200: #e2e8f0; /* Borda de cards, divisórias, bullet inativo de carrossel */
  --fjpn-slate-400: #94a3b8; /* Texto secundário sobre fundo escuro (footer) */
  --fjpn-slate-500: #64748b; /* Texto muted (= --fjpn-text-muted) */
  --fjpn-slate-700: #334155; /* Texto de corpo em parágrafos longos (Hero, Sobre) */
  --fjpn-slate-800: #1e293b; /* Headings (= --fjpn-text-primary) */
  --fjpn-slate-900: #0f172a; /* Fundo do <footer> */

  /* ==========================================================
   * 4. GRADIENTES
   * Valores literais em uso, seção 1.4 do doc de origem.
   * ========================================================== */
  --fjpn-gradient-hero: linear-gradient(135deg, #133a7a 0%, #1b4da1 60%, #2563eb 100%);   /* Fundo da seção Hero */
  --fjpn-gradient-cta: linear-gradient(135deg, #1b4da1 0%, #2563eb 100%);                 /* Bloco de CTA de doação */
  --fjpn-gradient-newsletter: linear-gradient(135deg, #133a7a, #1b4da1);                  /* Fundo da seção Newsletter */
  --fjpn-gradient-blue-button: linear-gradient(135deg, #1b4da1, #133a7a);                 /* Preenchimento do BlueButton */
  --fjpn-gradient-orange-button: linear-gradient(135deg, #f97316, #ea6c0c);               /* Preenchimento do OrangeButton */
  --fjpn-gradient-header-cta: linear-gradient(135deg, #1a3567, #28529c);                  /* Botão de destaque dentro do header */
  --fjpn-gradient-hero-word: linear-gradient(135deg, #f97316, #fbbf24);                   /* background-clip:text na palavra destacada do H1 */
  --fjpn-divider: linear-gradient(90deg, #f97316, #fb923c);                               /* .section-divider — barrinha 48×3px acima de eyebrows */

  /* ==========================================================
   * 5. SOMBRAS
   * box-shadow com rgba literal, seção 1.5 do doc de origem.
   * ========================================================== */
  --fjpn-shadow-card-hover: 0 20px 50px rgba(27, 77, 161, 0.14);        /* .card-lift:hover — hover de todos os cards */
  --fjpn-shadow-card: 0 4px 24px rgba(27, 77, 161, 0.07);               /* Card de estatística (seção Números), repouso */
  --fjpn-shadow-button-blue: 0 6px 20px rgba(27, 77, 161, 0.3);         /* BlueButton preenchido */
  --fjpn-shadow-button-blue-strong: 0 12px 40px rgba(27, 77, 161, 0.2); /* Botões primários em estado de destaque */
  --fjpn-shadow-button-orange: 0 6px 20px rgba(249, 115, 22, 0.35);     /* OrangeButton */
  --fjpn-shadow-header: 0 2px 24px rgba(0, 0, 0, 0.18);                 /* <header> fixo */
  --fjpn-shadow-social-icon: 0 2px 12px rgba(0, 0, 0, 0.08);            /* Botões sociais circulares (footer) */
  --fjpn-shadow-modal-strong: 0 30px 80px rgba(0, 0, 0, 0.35);          /* Elemento de maior destaque (dropdown/modal) */

  /* ==========================================================
   * 6. TIPOGRAFIA — FAMÍLIA E TAMANHOS
   * Inter (Google Fonts), fallback sans-serif. Seção 2 do doc de origem.
   * ========================================================== */
  --fjpn-font-sans: 'Inter', sans-serif;

  --fjpn-text-hero-h1: clamp(2.2rem, 5vw, 3.8rem);

  /* Componente Heading — tamanho xl */
  --fjpn-text-heading-xl: 2.25rem;      /* 36px, base */
  --fjpn-text-heading-xl-md: 3rem;      /* 48px, ≥768px */
  --fjpn-text-heading-xl-lg: 3.75rem;   /* 60px, ≥1024px */

  /* Componente Heading — tamanho lg (default, mais comum) */
  --fjpn-text-heading-lg: 1.875rem;     /* 30px, base */
  --fjpn-text-heading-lg-md: 2.25rem;   /* 36px, ≥768px */

  /* Componente Heading — tamanho md */
  --fjpn-text-heading-md: 1.5rem;       /* 24px, base */
  --fjpn-text-heading-md-md: 1.875rem;  /* 30px, ≥768px */

  /* Componente Heading — tamanho sm */
  --fjpn-text-heading-sm: 1.25rem;      /* 20px, sem variação responsiva */

  --fjpn-text-card-title: 0.875rem;     /* 14px — título de card (Programas) */
  --fjpn-text-stat-default: 2rem;       /* 32px — valor grande da seção Números */
  --fjpn-text-stat-long: 1.4rem;        /* 22,4px — valor da seção Números quando texto > 8 caracteres */
  --fjpn-text-body: 1rem;               /* 16px — parágrafo padrão */
  --fjpn-text-body-lg: 1.125rem;        /* 18px — parágrafo em destaque (Hero) */
  --fjpn-text-small: 0.75rem;           /* 12px — legendas, classe mais usada do site */
  --fjpn-text-eyebrow: 0.75rem;         /* 12px — rótulo acima de título */
  --fjpn-text-button: 0.875rem;         /* 14px — OrangeButton / BlueButton */
  --fjpn-text-nav: 18px;                /* Item de menu do header, valor explícito (não usa escala rem) */
  --fjpn-text-logo: clamp(1.4rem, 2.5vw, 2rem); /* Logo textual do header/footer — 22,4px a 32px fluido */

  /* ==========================================================
   * 7. TIPOGRAFIA — PESOS
   * font-weight em uso, seção 2.2 do doc de origem.
   * ========================================================== */
  --fjpn-weight-regular: 400;   /* Corpo de texto padrão */
  --fjpn-weight-medium: 500;    /* Textos intermediários */
  --fjpn-weight-semibold: 600;  /* Botões, labels, nav */
  --fjpn-weight-bold: 700;      /* Eyebrow, botões, textos de destaque */
  --fjpn-weight-extrabold: 800; /* Todos os headings (Heading, H1, valores de estatística) */
  --fjpn-weight-black: 900;     /* Uso pontual de extra-black */

  /* ==========================================================
   * 8. TIPOGRAFIA — LINE-HEIGHT
   * Seção 2.1 do doc de origem.
   * ========================================================== */
  --fjpn-leading-tight: 1.25;    /* Headings (leading-tight) */
  --fjpn-leading-hero: 1.1;      /* H1 do Hero (leading-[1.1]) */
  --fjpn-leading-snug: 1.375;    /* Título de card (leading-snug) */
  --fjpn-leading-relaxed: 1.625; /* Parágrafo de corpo — o mais comum do site */

  /* ==========================================================
   * 9. TIPOGRAFIA — LETTER-SPACING
   * Seção 2.3 do doc de origem.
   * ========================================================== */
  --fjpn-tracking-tighter: -0.03em; /* Uso pontual em elementos específicos */
  /* -0.025em conferido no fonte do protótipo (`tracking-tight` do Tailwind,
     que é -0.025em). Estava -0.02em aqui — diferença pequena por letra, mas
     num H1 de 60px com 20 caracteres dá quase 1px de deriva acumulada. */
  --fjpn-tracking-tight: -0.025em;
  --fjpn-tracking-nav: -0.01em;     /* Links de navegação (texto de 18px) */
  --fjpn-tracking-normal: 0.02em;   /* Uso pontual em elementos específicos */
  --fjpn-tracking-badge: 0.08em;    /* Badge/pill do Hero (texto pequeno em maiúsculas) */
  --fjpn-tracking-wide: 0.06em;     /* Uso pontual em elementos específicos */
  --fjpn-tracking-wider: 0.1em;     /* Uso pontual em elementos específicos */
  --fjpn-tracking-eyebrow: 0.18em;  /* Eyebrow (uppercase, bem espaçado) */

  /* ==========================================================
   * 10. ESPAÇAMENTO — PADDING VERTICAL DE SEÇÃO
   * Seção 3.1 do doc de origem.
   * ========================================================== */
  --fjpn-space-section-py-xl: 7rem;  /* 112px — CTA de doação, a seção com mais respiro do site */
  --fjpn-space-section-py-lg: 6rem;  /* 96px — padrão da maioria das seções (Sobre, Programas, Missão, Áreas, Notícias) */
  --fjpn-space-section-py-md: 5rem;  /* 80px — Números, Newsletter */
  --fjpn-space-section-py-sm: 4rem;  /* 64px — conteúdo interno do Footer */

  /* ==========================================================
   * 11. ESPAÇAMENTO — GAP DE GRID/FLEX
   * Seção 3.3 do doc de origem.
   * ========================================================== */
  --fjpn-gap-grid: 1.5rem;    /* 24px — gap padrão de grid de cards (Programas, Números, Áreas de Atuação) */
  --fjpn-gap-icon-text: 0.5rem;  /* 8px — ícone + texto em badges e botões */
  /* 12px — traço ↔ rótulo do eyebrow, e margem abaixo do par (`gap-3` e
     `mb-3` no fonte do protótipo). Token próprio em vez de reaproveitar
     --fjpn-gap-icon-text: os 8px daquele estão corretos para botão e badge,
     e mudá-lo para acertar o eyebrow estragaria os dois. */
  --fjpn-gap-eyebrow: 0.75rem;
  --fjpn-gap-icon-text-lg: 0.625rem; /* 10px — variação de ícone + texto */
  --fjpn-gap-medium: 1rem;   /* 16px — grupos de elementos médios */
  --fjpn-gap-hero-columns: 3rem; /* 48px — colunas do Hero (lg:grid-cols-2 gap-12) */
  --fjpn-gap-nav-items: 40px;    /* Espaçamento entre itens de navegação no header (valor inline) */

  /* ==========================================================
   * 12. ESPAÇAMENTO — PADDING DE CARD
   * Seção 3.4 do doc de origem.
   * ========================================================== */
  --fjpn-padding-card: 1.25rem;          /* 20px — corpo do card de Programas, abaixo da imagem */
  --fjpn-padding-card-stat: 2rem;        /* 32px — card de estatística (seção Números) */
  --fjpn-padding-cta-block: 3rem;        /* 48px — bloco de CTA com gradiente, mobile */
  --fjpn-padding-cta-block-md: 4rem;     /* 64px — bloco de CTA com gradiente, desktop (md:p-16) */
  --fjpn-card-image-height: 10rem;       /* 160px — altura fixa da imagem do card de Programas (h-40) */

  /* ==========================================================
   * 13. ESPAÇAMENTO — PADDING DE BOTÃO
   * Seção 3.5 do doc de origem.
   * ========================================================== */
  --fjpn-padding-button-x: 1.5rem;     /* 24px — horizontal de OrangeButton/BlueButton (px-6) */
  --fjpn-padding-button-y: 0.75rem;    /* 12px — vertical de OrangeButton/BlueButton (py-3) */
  --fjpn-padding-button-header: 14px 20px; /* Botão de destaque do header, valor inline */
  --fjpn-padding-badge-x: 1rem;        /* 16px — horizontal do badge/pill do Hero (px-4) */
  --fjpn-padding-badge-y: 0.375rem;    /* 6px — vertical do badge/pill do Hero (py-1.5) */
  --fjpn-padding-hamburger: 0.5rem;    /* 8px — botão hamburguer mobile (p-2) */

  /* ==========================================================
   * 14. FORMA — RADIUS
   * Escala Tailwind v4 confirmada no :root do código-fonte,
   * seção 4.1 do doc de origem.
   * ========================================================== */
  --fjpn-radius-default: 0.25rem; /* 4px — elementos pequenos (indicador de menu mobile) */
  --fjpn-radius-lg: 0.5rem;       /* 8px — botão hamburguer */
  --fjpn-radius-xl: 0.75rem;      /* 12px — badges de tag em cards, elementos médios */
  --fjpn-radius-2xl: 1rem;        /* 16px — o radius mais usado: botões, pills, blocos de destaque */
  --fjpn-radius-3xl: 1.5rem;      /* 24px — cards grandes (Programas, Números, bloco de CTA) */
  --fjpn-radius-full: 9999px;     /* Círculo/pílula — badge do Hero, botões sociais circulares, bullets de carrossel */

  /* ==========================================================
   * 15. FORMA — LARGURAS DE BORDA
   * Seção 4.2 do doc de origem.
   * ========================================================== */
  --fjpn-border-width-default: 1px; /* Borda de card, borda de botão social do footer */
  --fjpn-border-width-outline: 2px; /* Borda de botão outline (BlueButton com outline=true) */

  /* ==========================================================
   * 16. INTERAÇÃO — DURAÇÕES E CURVAS DE TRANSIÇÃO
   * Seção 5 do doc de origem.
   * ========================================================== */
  --fjpn-ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* --ease-in-out do tema Tailwind, usado quando não há transition inline */
  --fjpn-ease-simple: ease;                          /* A maioria das transições inline usa ease simples */

  --fjpn-duration-fast: 150ms;      /* Duração padrão do utilitário base do Tailwind */
  --fjpn-duration-color: 200ms;     /* "color 200ms ease" */
  --fjpn-duration-base: 300ms;      /* transition-all duration-300 — padrão para a maioria dos elementos interativos */
  --fjpn-duration-opacity: 300ms;   /* "opacity 300ms ease" */
  --fjpn-duration-shadow: 250ms;    /* "box-shadow 250ms ease" */
  --fjpn-duration-background: 400ms; /* "background 400ms ease" */
  --fjpn-duration-fade-up: 0.7s;    /* Animação de entrada @keyframes fadeUp */
  --fjpn-duration-float: 3.5s;      /* Animação de flutuação @keyframes float (badges decorativos) */
  --fjpn-duration-float-alt: 4s;    /* Variação da animação de flutuação */

  /* ==========================================================
   * 17. LAYOUT — CONTAINER E BREAKPOINTS
   * Seção 6.1 do doc de origem.
   * ========================================================== */
  --fjpn-container-width: 80rem;        /* 1280px — max-w-7xl, wrapper padrão de todas as seções de conteúdo */
  --fjpn-container-padding: 1.5rem;     /* 24px — respiro lateral em telas pequenas */
  --fjpn-container-padding-lg: 2rem;    /* 32px — a partir de 1024px (lg:px-8 no original) */
  --fjpn-container-header-width: 1440px; /* Largura máx. do header — container diferente do resto do site */
  --fjpn-container-cta-width: 64rem;    /* 1024px — max-w-5xl, bloco de CTA de doação */
  --fjpn-container-newsletter-width: 42rem; /* 672px — max-w-2xl, formulário de Newsletter */

  --fjpn-breakpoint-sm: 40rem;  /* 640px */
  --fjpn-breakpoint-md: 48rem;  /* 768px */
  --fjpn-breakpoint-lg: 64rem;  /* 1024px — o mais usado, muda o grid principal para desktop */

  /* ==========================================================
   * 18. DECORATIVO — NÃO FAZ PARTE DA PALETA INSTITUCIONAL
   * Cores por item, geradas independentemente da marca.
   * Seção 1.6 do doc de origem. Registradas aqui apenas como
   * referência — não usar como Global Colors do Elementor.
   * ========================================================== */
  --fjpn-decorative-cultura-color: #7c3aed;     /* Áreas de Atuação — Cultura (violeta) */
  --fjpn-decorative-cultura-bg: #ede9fe;
  --fjpn-decorative-comunicacao-color: #0891b2; /* Áreas de Atuação — Comunicação (ciano) */
  --fjpn-decorative-comunicacao-bg: #e0f7fa;
  --fjpn-decorative-social-color: #059669;      /* Áreas de Atuação — Responsabilidade Social (verde esmeralda) */
  --fjpn-decorative-social-bg: #d1fae5;

  --fjpn-decorative-social-facebook: #1877f2;  /* Ícones sociais do footer — cores oficiais de cada rede */
  --fjpn-decorative-social-instagram: #e1306c;
  --fjpn-decorative-social-youtube: #ff0000;
  --fjpn-decorative-social-twitter: #1da1f2;

}