/*
 * Fontes da marca, auto-hospedadas (subset latin).
 * Sora ecoa a geometria arredondada do wordmark; Inter carrega o corpo de texto.
 * Ambas são SIL OFL — self-host é permitido e mantém o site fora do Google (LGPD + 1 RTT a menos).
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/sora-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/sora-700.woff2') format('woff2');
}

/*
 * Design tokens — a fonte única de verdade da identidade.
 * Todas as cores derivam do logo: pin dourado + wordmark marrom.
 * Nunca escreva um hex direto em outro arquivo; use estas variáveis.
 */

:root {
  /* --- Cor --- */
  --gm-ink:        #3B2B27; /* marrom do wordmark: texto e superfícies fortes */
  --gm-ink-soft:   #5A4741;
  --gm-slab:       #1F1714; /* pedra escura: área de membros e seções de impacto */
  --gm-slab-lift:  #2A211D; /* superfície elevada sobre o slab */

  --gm-gold:       #E8B04B; /* ação primária */
  --gm-gold-deep:  #C9902F; /* hover/active do dourado */
  --gm-gold-soft:  #F5D9A0; /* fundos de destaque */
  --gm-gold-wash:  #FBEFD6; /* wash bem leve, para badges e realces */

  --gm-cream:      #FBF7F1; /* fundo da página — branco puro esfria demais a marca */
  --gm-white:      #FFFFFF;
  --gm-stone:      #8A7C74; /* texto secundário */
  --gm-line:       #E7DED4; /* bordas */
  --gm-line-dark:  #3A2F2A; /* bordas sobre o slab */

  --gm-success:    #2E7D5B;
  --gm-alert:      #C0453B;
  --gm-info:       #3E6C8F;

  /* Papéis semânticos — use estes nos componentes, não os brutos acima. */
  --gm-bg:            var(--gm-cream);
  --gm-bg-raised:     var(--gm-white);
  --gm-text:          var(--gm-ink);
  --gm-text-muted:    var(--gm-stone);
  --gm-border:        var(--gm-line);
  --gm-accent:        var(--gm-gold);
  --gm-accent-text:   var(--gm-ink); /* texto sobre dourado — o marrom passa AA, o branco não */
  --gm-on-dark:       #F0E7DD;
  --gm-on-dark-muted: #A9998E;

  /* --- Tipografia --- */
  --gm-font-display: Sora, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --gm-font-body:    Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;

  --gm-text-xs:  0.8125rem;
  --gm-text-sm:  0.875rem;
  --gm-text-md:  1.0625rem;
  --gm-text-lg:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --gm-text-xl:  clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --gm-text-2xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);

  --gm-leading-tight: 1.15;
  --gm-leading-body:  1.7;
  --gm-tracking-tight: -0.02em;
  --gm-tracking-wide:  0.08em;

  /* --- Espaço --- */
  --gm-space-1: 0.5rem;
  --gm-space-2: 1rem;
  --gm-space-3: 1.5rem;
  --gm-space-4: 2.5rem;
  --gm-space-5: 4rem;
  --gm-space-6: 6rem;

  --gm-gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --gm-content: 760px;
  --gm-wide:    1140px;
  --gm-full:    1440px;

  /* --- Forma --- */
  --gm-radius-sm: 8px;
  --gm-radius:    14px;
  --gm-radius-lg: 22px;
  --gm-radius-pill: 999px;

  /* Sombras quentes: sombra cinza sobre fundo creme parece sujeira. */
  --gm-shadow-sm: 0 1px 2px rgba(59, 43, 39, 0.06), 0 2px 6px rgba(59, 43, 39, 0.04);
  --gm-shadow:    0 4px 12px rgba(59, 43, 39, 0.07), 0 12px 32px rgba(59, 43, 39, 0.06);
  --gm-shadow-lg: 0 8px 24px rgba(59, 43, 39, 0.10), 0 24px 60px rgba(59, 43, 39, 0.10);

  /* --- Textura de marca --- */
  /* Veio de mármore em SVG. Elemento gráfico que distingue o site de um template. */
  --gm-veins: url('../img/veins.svg');

  /* --- Movimento --- */
  --gm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gm-fast: 140ms;
  --gm-slow: 320ms;

  --gm-header-h: 76px;

  /* Logo — ajustável no Personalizar › Identidade do site.
     inc/customizer.php sobrescreve estes valores; ficam aqui como padrão. */
  --gm-logo-width: 190px;
  --gm-logo-mark: 34px;
}

/*
 * Escopo escuro. Aplicado em .gm-dark (seções de impacto) e, mais adiante,
 * no shell da área de membros. Só troca os papéis semânticos.
 */
.gm-dark {
  --gm-bg:         var(--gm-slab);
  --gm-bg-raised:  var(--gm-slab-lift);
  --gm-text:       var(--gm-on-dark);
  --gm-text-muted: var(--gm-on-dark-muted);
  --gm-border:     var(--gm-line-dark);

  background-color: var(--gm-bg);
  color: var(--gm-text);
}