/* =====================================================================
   GRANEMANN LAUX — DESIGN TOKENS
   Fonte única de verdade do sistema visual do escritório.
   Importe este arquivo ANTES de qualquer CSS de componente:
     <link rel="stylesheet" href="design-system/tokens.css">
   Em sub-pastas, ajuste o caminho relativo (ex: ../../design-system/tokens.css)
   ===================================================================== */

:root {
  /* ---- CORES (oficiais, extraídas do logo) ---------------------------- */
  --gl-navy:        #1E2A3A;  /* Marinho profundo — fundo principal */
  --gl-navy-light:  #2A384B;  /* Navy claro — tipografia secundária escura */
  --gl-coral:       #E55C52;  /* Coral — acento, destaques, ornamentos */
  --gl-coral-dark:  #D94A41;  /* Coral escuro — hover / variação */
  --gl-cream:       #F2EDE4;  /* Off-white — tipografia sobre marinho */
  --gl-cream-warm:  #EDE6D6;  /* Creme quente — fundo "papel & tinta" */
  --gl-gray-500:    #8A95A5;  /* Cinza médio — terciário, rodapés */
  --gl-gray-300:    #C8CED6;  /* Cinza claro */
  --gl-gray-200:    #E2E5EA;  /* Cinza muito claro — divisores */
  --gl-ink:         #1A1F27;  /* Tinta — corpo de texto em documentos */

  /* ---- ALIASES SEMÂNTICOS (use estes ao construir) -------------------- */
  --gl-bg:          var(--gl-navy);
  --gl-bg-alt:      var(--gl-cream-warm);
  --gl-text:        var(--gl-cream);
  --gl-text-dark:   var(--gl-navy);
  --gl-accent:      var(--gl-coral);
  --gl-accent-hover: var(--gl-coral-dark);
  --gl-muted:       var(--gl-gray-500);

  /* ---- TIPOGRAFIA ----------------------------------------------------- */
  /* Calibri é a fonte oficial MAJORITÁRIA do escritório (documentos, corpo,
     uso geral). Não é uma web font — no navegador usamos 'Carlito', o clone
     métrico-compatível. Em Word/.docx a fonte real continua sendo Calibri. */
  --gl-font-document: 'Calibri', 'Carlito', system-ui, sans-serif;  /* PRINCIPAL — documentos & corpo */
  --gl-font-body:     'Calibri', 'Carlito', system-ui, sans-serif;  /* corpo 400–500 */
  --gl-font-display:  'Archivo', system-ui, sans-serif;             /* display — títulos de marketing/posts 700–800 */
  --gl-font-mono:     'JetBrains Mono', ui-monospace, monospace;    /* kickers / metadados */
  --gl-font-cond:     'Barlow Condensed', sans-serif;               /* alternativa condensada */
  --gl-font-serif:    'Libre Caslon Text', Georgia, serif;          /* estilo Papel & Tinta */

  --gl-track-tight:  -0.02em;  /* títulos display */
  --gl-track-mono:    0.25em;  /* kickers mono caixa-alta */
  --gl-track-mono-lg: 0.28em;  /* kickers grandes */
  --gl-leading-display: 1.02;
  --gl-leading-body:    1.5;

  /* ---- ESCALA DE ESPAÇAMENTO (base 4px) ------------------------------- */
  --gl-space-1: 4px;
  --gl-space-2: 8px;
  --gl-space-3: 12px;
  --gl-space-4: 16px;
  --gl-space-5: 24px;
  --gl-space-6: 32px;
  --gl-space-7: 48px;
  --gl-space-8: 72px;

  /* ---- RAIO / SOMBRA / DIVISOR ---------------------------------------- */
  --gl-radius-sm:  4px;    /* botões, pills */
  --gl-radius-pill: 999px;
  --gl-hairline: 1px solid var(--gl-gray-200);
  --gl-shadow-page: 0 30px 60px -20px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.3);

  /* ---- ASSINATURAS DA MARCA (componentes recorrentes) ----------------- */
  --gl-bar-w: 72px;   /* barrinha coral âncora */
  --gl-bar-h: 4px;

  /* ---- TEXTURA DE GRÃO (parte da marca, não opcional) ----------------- */
  /* Aplique numa pseudo-camada ::before do bloco: ver .gl-grain abaixo */
  --gl-grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0   0 0 0 0.35 0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* =====================================================================
   UTILITÁRIO DE TEXTURA
   Coloque .gl-grain num container com position:relative.
   ===================================================================== */
.gl-grain { position: relative; }
.gl-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--gl-grain-url);
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 2;
}