/* ============================================================
   MatriKem — Design System: CSS Variables
   Cores baseadas no Manual de Marca oficial (v1.0)
   Primário: #1B527B | Carvão: #2E3641 | Branco: #FFFFFF
   ============================================================ */

:root {
  /* ── Tipografia ── */
  --font-display: 'Jost', sans-serif;     /* Substituto da Futura para web */
  --font-body:    'DM Sans', sans-serif;

  /* ── Azul primário (cor principal da marca) ── */
  --color-primary:         #1B527B;   /* cor oficial do manual */
  --color-primary-dark:    #133D5C;   /* hover, estados ativos */
  --color-primary-darker:  #0C2940;   /* navbar, footer bg, CTA final */
  --color-primary-light:   #B8D3E8;   /* texto sobre fundo escuro */
  --color-primary-bg:      #EBF2F9;   /* fundo de cards, seções alt */
  --color-primary-border:  #B8D3E8;   /* bordas de cards em fundo claro */

  /* ── Carvão escuro (cor de contraste da marca) ── */
  --color-dark:            #2E3641;   /* cor oficial do manual — headlines */
  --color-dark-mid:        #4B5563;   /* texto corrido */
  --color-dark-muted:      #6B7480;   /* labels, captions, eyebrows */
  --color-dark-subtle:     #9CA3AF;   /* placeholders */
  --color-dark-bg:         #F2F3F4;   /* fundo neutro */

  /* ── Accent âmbar (não é da marca, derivado para uso web) ── */
  /* Usado apenas em: botões de PDF/guia, badges de conteúdo */
  --color-accent:          #C47D0E;
  --color-accent-dark:     #8F5B08;
  --color-accent-light:    #FAD48A;
  --color-accent-bg:       #FEF5E4;

  /* ── Fundos e superfícies ── */
  --color-bg:              #F5F8FC;   /* fundo base das páginas */
  --color-bg-alt:          #EBF2F9;   /* seções alternadas */
  --color-surface:         #FFFFFF;   /* cards, superfícies elevadas */
  --color-border:          #DCE6F0;   /* bordas padrão */
  --color-border-strong:   #B8D3E8;   /* bordas de destaque */

  /* ── Espaçamentos de seção ── */
  --section-py:      80px;    /* padding vertical das seções desktop */
  --section-py-sm:   48px;    /* padding vertical mobile */

  /* ── Border radius ── */
  --radius:    6px;    /* botões, inputs, pequenos elementos */
  --radius-lg: 12px;   /* cards, painéis */
  --radius-xl: 20px;   /* hero image, elementos maiores */

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(12, 41, 64, 0.08);
  --shadow-md:  0 4px 16px rgba(12, 41, 64, 0.10);
  --shadow-lg:  0 8px 32px rgba(12, 41, 64, 0.12);

  /* ── Transições ── */
  --transition: all 0.2s ease;
}

/* ── Utilitários de cor ── */
.text-primary-mk  { color: var(--color-primary) !important; }
.text-dark-mk     { color: var(--color-dark) !important; }
.bg-primary-mk    { background-color: var(--color-primary) !important; }
.bg-primary-bg    { background-color: var(--color-primary-bg) !important; }
.bg-surface       { background-color: var(--color-surface) !important; }
.bg-alt           { background-color: var(--color-bg-alt) !important; }
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-primary);
}