/* ============================================
   MANUAL DO HOME OFFICE — Design Tokens
   Identidade visual: autoridade técnica + praticidade
   ============================================ */

:root {
  /* ============================================
     CORES
     ============================================ */

  /* Cor de destaque principal — azul técnico/profissional */
  --cor-acento: #1A6BFF;               /* Azul elétrico — CTAs, links, hover */
  --cor-acento-hover: #0052CC;         /* Azul escuro hover */
  --cor-acento-suave: #E8F0FF;         /* Azul claro — badges e backgrounds */

  /* Base escura (header, footer, hero) */
  --cor-dark: #111827;                 /* Quase preto */
  --cor-dark-alt: #1F2937;             /* Cards hover, footer interno */
  --cor-texto-claro: #F9FAFB;          /* Texto sobre fundo escuro */
  --cor-texto-claro-alt: #D1D5DB;      /* Texto secundário sobre fundo escuro */
  --cor-texto-claro-fraco: #9CA3AF;    /* Texto terciário sobre fundo escuro */

  /* Cores de texto e conteúdo */
  --cor-titulo: #111827;
  --cor-corpo: #374151;
  --cor-meta: #6B7280;
  --cor-borda: #E5E7EB;
  --cor-borda-forte: #D1D5DB;

  /* Fundo geral */
  --cor-fundo: #FFFFFF;
  --cor-fundo-alt: #F9FAFB;
  --cor-fundo-card: #FFFFFF;

  /* Categorias — cada categoria tem sua cor */
  --cor-reviews: #F59E0B;              /* Âmbar */
  --cor-reviews-suave: #FEF3C7;
  --cor-setup: #10B981;                /* Verde esmeralda */
  --cor-setup-suave: #D1FAE5;
  --cor-produtividade: #1A6BFF;        /* Azul */
  --cor-produtividade-suave: #E8F0FF;
  --cor-saude: #EF4444;                /* Vermelho coral */
  --cor-saude-suave: #FEE2E2;

  /* Estado / aviso */
  --cor-aviso-bg: #FEF3C7;
  --cor-aviso-borda: #FCD34D;
  --cor-aviso-texto: #92400E;

  /* ============================================
     TIPOGRAFIA
     ============================================ */

  --fonte-display: 'DM Serif Display', Georgia, serif;
  --fonte-texto: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fonte-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Tamanhos */
  --tamanho-hero-h1: 52px;
  --tamanho-hero-h1-mobile: 32px;
  --tamanho-h1-post: 40px;
  --tamanho-h1-post-mobile: 28px;
  --tamanho-h2: 28px;
  --tamanho-h2-mobile: 22px;
  --tamanho-h3: 20px;
  --tamanho-corpo: 17px;
  --tamanho-meta: 14px;
  --tamanho-menu: 15px;
  --tamanho-card-titulo: 18px;
  --tamanho-card-excerpt: 15px;

  /* Line heights */
  --lh-titulo: 1.15;
  --lh-corpo: 1.7;
  --lh-card: 1.35;

  /* ============================================
     LAYOUT E ESPAÇAMENTOS
     ============================================ */

  --largura-max: 1280px;
  --largura-conteudo-post: 68%;
  --largura-sidebar-post: 32%;
  --largura-conteudo-home: 66%;
  --largura-sidebar-home: 34%;

  --padding-container: 5%;
  --padding-container-mobile: 20px;

  --espaco-xs: 8px;
  --espaco-sm: 16px;
  --espaco-md: 40px;
  --espaco-lg: 80px;
  --espaco-xl: 120px;

  /* ============================================
     COMPONENTES
     ============================================ */

  --raio-sm: 6px;
  --raio-md: 12px;
  --raio-lg: 20px;
  --raio-pill: 999px;

  --sombra-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
  --sombra-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12), 0 12px 32px rgba(0, 0, 0, 0.10);
  --sombra-header: 0 2px 16px rgba(0, 0, 0, 0.15);
  --sombra-hero-image: 0 20px 60px rgba(0, 0, 0, 0.2);

  --transicao: 200ms ease;
  --transicao-media: 350ms ease;
}