/* ╔══════════════════════════════════════════════════════════════╗
   ║              ARQUIVO DE CONFIGURAÇÃO DO LAYOUT               ║
   ║                   Fernando Peres — index.html                ║
   ║                                                              ║
   ║  Edite este arquivo para personalizar cores, fontes,         ║
   ║  tamanhos e espaçamentos sem mexer no style.css principal.   ║
   ║                                                              ║
   ║  COMO USAR:                                                  ║
   ║  1. Este arquivo deve vir ANTES do style.css no HTML         ║
   ║     <link rel="stylesheet" href="config.css">                ║
   ║     <link rel="stylesheet" href="style.css">                 ║
   ║  2. Salve e atualize o navegador para ver as mudanças        ║
   ╚══════════════════════════════════════════════════════════════╝ */

:root {

  /* ── CORES PRINCIPAIS ─────────────────────────────────────── */

  /* Fundo geral da página */
  --bg: #07090E;

  /* Fundo dos cards/boxes */
  --card: rgba(12, 18, 30, 0.85);

  /* Dourado principal (botões, destaques, nome) */
  --gold: #C9A84C;

  /* Dourado claro (hover de botões) */
  --gold2: #E2C06A;

  /* Dourado transparente (bordas suaves) */
  --goldf: rgba(201, 168, 76, 0.13);

  /* Ciano (eyebrows, dot animado, links técnicos) */
  --cyan: #3BA8C5;

  /* Branco quente (texto principal) */
  --white: #EEE9DF;

  /* Cinza (texto secundário, placeholders) */
  --grey: #5A6470;

  /* Borda sutil branca (separadores, bordas de cards) */
  --b1: rgba(255, 255, 255, 0.06);

  /* Borda dourada (hero box) */
  --b2: rgba(201, 168, 76, 0.14);


  /* ── FONTES ───────────────────────────────────────────────── */

  /* Títulos e nomes (Playfair Display) */
  --serif: "Playfair Display", Georgia, serif;

  /* Corpo principal (Inter) */
  --sans: "Inter", system-ui, sans-serif;

  /* Tags, eyebrows, código (JetBrains Mono) */
  --mono: "JetBrains Mono", monospace;

  /* Textos secundários/descritivos (Economica) */
  --eco: "Economica", sans-serif;


  /* ── TAMANHOS DE FONTE ────────────────────────────────────── */

  /* Nome hero (Fernando / Peres) — usa clamp automático */
  --font-hero-name: clamp(50px, 5.5vw, 84px);

  /* Títulos dos boxes (ex: "Expertises", "Projetos Ativos") */
  --font-box-title: clamp(20px, 2vw, 26px);

  /* Texto da bio no hero */
  --font-hero-bio: 17px;

  /* Textos descritivos (sobre, academia, contato) */
  --font-body-sec: 17px;

  /* Itens de expertise */
  --font-expertise: 15px;

  /* Descrição dos cards acadêmicos */
  --font-acad-desc: 14px;

  /* Tags dos projetos */
  --font-proj-tag: 12px;

  /* Itens de comissões */
  --font-comissao: 14px;


  /* ── ESPAÇAMENTOS ─────────────────────────────────────────── */

  /* Largura máxima do conteúdo central */
  --max-width: 1120px;

  /* Padding lateral da shell */
  --shell-padding: 16px;

  /* Gap entre os boxes do grid */
  --grid-gap: 12px;

  /* Padding interno dos boxes */
  --box-padding: 28px 24px;

  /* Padding interno do hero (lado esquerdo) */
  --hero-padding: 52px 48px;


  /* ── BORDAS E RAIOS ───────────────────────────────────────── */

  /* Arredondamento dos boxes */
  --radius-box: 16px;

  /* Arredondamento do hero */
  --radius-hero: 20px;

  /* Arredondamento dos cards internos (projetos, academia) */
  --radius-card: 10px;

  /* Arredondamento dos botões */
  --radius-btn: 9px;

  /* Arredondamento da nav pill */
  --radius-nav: 100px;


  /* ── FOTO DO HERO ─────────────────────────────────────────── */

  /* Nome do arquivo da foto (deve estar na mesma pasta) */
  /* Altere direto no index.html: src="fernando.png" */

  /* Largura do painel da foto no hero */
  --hero-photo-width: 320px;

  /* Altura mínima do painel da foto */
  --hero-photo-min-height: 520px;


  /* ── LOGOS DOS PROJETOS ───────────────────────────────────── */

  /* Altura da área branca das logos */
  --proj-logo-height: 60px;

  /* Altura máxima da imagem da logo */
  --proj-logo-img-height: 40px;


  /* ── ANIMAÇÃO DE PARTÍCULAS (canvas) ─────────────────────── */
  /* Para ajustar as partículas, edite as constantes no <script>  */
  /* do index.html: N (quantidade), LINK (distância), MR (mouse)  */


  /* ── TICKER ───────────────────────────────────────────────── */

  /* Altura da faixa dourada */
  --ticker-height: 36px;

  /* Velocidade da animação (menor = mais rápido) */
  /* Altere no style.css: animation: tk 26s linear infinite       */

}