/*
 * SISTEMA DE DESIGN — VARIÁVEIS CSS CENTRALIZADAS
 * Arquivo único de referência para cores, tipografia e espaçamentos.
 * O plugin Quick Edit Panel lê e modifica variáveis deste sistema via WordPress Options API.
 * Para customizar manualmente, edite os valores abaixo.
 */

:root {

  /* ================================================
     PALETA DE CORES
     ================================================ */

  /* Cores primárias */
  --cor-primaria:        #0A84FF;   /* Azul principal — botões, links, destaques */
  --cor-primaria-hover:  #0066CC;   /* Hover do azul principal */
  --cor-secundaria:      #1C1C1E;   /* Quase preto — fundos escuros, hero */
  --cor-acento:          #30D158;   /* Verde — tags de status, badges */

  /* Tons neutros */
  --cor-fundo:           #F5F5F7;   /* Fundo geral da página */
  --cor-fundo-card:      #FFFFFF;   /* Fundo de cards e painéis */
  --cor-borda:           #D1D1D6;   /* Bordas sutis */
  --cor-sombra:          rgba(0, 0, 0, 0.08);

  /* Texto */
  --cor-texto:           #1C1C1E;   /* Texto principal */
  --cor-texto-suave:     #6E6E73;   /* Texto secundário, legendas */
  --cor-texto-invertido: #FFFFFF;   /* Texto sobre fundos escuros */

  /* Hero */
  --cor-hero-fundo:      #0A0A0F;   /* Fundo do hero section */
  --cor-hero-overlay:    rgba(10, 10, 15, 0.75);

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

  --fonte-titulo:        'Inter', 'Segoe UI', system-ui, sans-serif;
  --fonte-corpo:         'Inter', 'Segoe UI', system-ui, sans-serif;
  --fonte-mono:          'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Tamanhos de fonte (escala modular 1.25) */
  --texto-xs:    0.75rem;    /*  12px */
  --texto-sm:    0.875rem;   /*  14px */
  --texto-base:  1rem;       /*  16px */
  --texto-md:    1.125rem;   /*  18px */
  --texto-lg:    1.25rem;    /*  20px */
  --texto-xl:    1.5rem;     /*  24px */
  --texto-2xl:   2rem;       /*  32px */
  --texto-3xl:   2.5rem;     /*  40px */
  --texto-4xl:   3.5rem;     /*  56px */
  --texto-hero:  clamp(2.5rem, 6vw, 5rem); /* Responsivo */

  /* Pesos */
  --peso-normal:    400;
  --peso-medio:     500;
  --peso-semibold:  600;
  --peso-bold:      700;
  --peso-extrabold: 800;

  /* Altura de linha */
  --linha-apertada: 1.2;
  --linha-normal:   1.5;
  --linha-relaxada: 1.75;

  /* ================================================
     ESPAÇAMENTOS
     ================================================ */

  --espaco-1:   0.25rem;    /*  4px */
  --espaco-2:   0.5rem;     /*  8px */
  --espaco-3:   0.75rem;    /* 12px */
  --espaco-4:   1rem;       /* 16px */
  --espaco-5:   1.25rem;    /* 20px */
  --espaco-6:   1.5rem;     /* 24px */
  --espaco-8:   2rem;       /* 32px */
  --espaco-10:  2.5rem;     /* 40px */
  --espaco-12:  3rem;       /* 48px */
  --espaco-16:  4rem;       /* 64px */
  --espaco-20:  5rem;       /* 80px */
  --espaco-24:  6rem;       /* 96px */
  --espaco-32:  8rem;       /* 128px */

  /* Padding interno das seções (espaço entre a borda do container e o conteúdo) */
  --secao-padding-y: clamp(4rem, 8vw, 7rem);

  /*
   * PADDING HORIZONTAL — RESPONSÁVEL PELO "85% DA VIEWPORT"
   * Valor baixo = container mais largo = mais preenchimento da tela.
   * clamp(1rem, 2.5vw, 2rem) garante margens confortáveis sem desperdiçar espaço.
   *  360px → 1rem   (16px cada lado) → container = 92% ✓
   *  768px → 19px cada lado          → container ≈ 95% ✓
   * 1280px → 32px cada lado          → container ≈ 95% ✓
   * 1440px → 2rem   (32px cada lado) → container ≈ 96% ✓
   */
  --secao-padding-x: clamp(1rem, 2.5vw, 2rem);

  /* ================================================
     LAYOUT — LARGURAS DO CONTAINER
     ================================================ */

  /*
   * min(1500px, 92vw):
   *  - Em telas até ~1630px: usa 92vw → sempre ≥ 85% da viewport ✓
   *  - Em telas maiores (1630px+): usa 1500px → ≥ 85% até ~1760px ✓
   * Isso satisfaz o requisito de "mínimo 85% em todos os tamanhos comuns".
   */
  --container-max:      min(1500px, 92vw);
  --container-estreito: min(860px,  92vw);
  --container-largo:    min(1700px, 95vw);

  /* ================================================
     BORDAS E RAIOS
     ================================================ */

  --raio-sm:   4px;
  --raio-md:   8px;
  --raio-lg:   16px;
  --raio-xl:   24px;
  --raio-full: 9999px;

  /* ================================================
     SOMBRAS
     ================================================ */

  --sombra-sm:       0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --sombra-md:       0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --sombra-lg:       0 12px 32px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
  --sombra-card-hover: 0 20px 48px rgba(0,0,0,0.16);

  /* ================================================
     TRANSIÇÕES
     ================================================ */

  --transicao-rapida: 150ms ease;
  --transicao-normal: 250ms ease;
  --transicao-suave:  400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ================================================
     Z-INDEX
     ================================================ */

  --z-fundo:  -1;
  --z-base:    0;
  --z-elevado: 10;
  --z-menu:    100;
  --z-modal:   200;
  --z-topo:    300;
}

/* ================================================
   TEMA ESCURO (ativado por classe no body)
   ================================================ */
[data-tema="escuro"] {
  --cor-fundo:       #0A0A0F;
  --cor-fundo-card:  #1C1C1E;
  --cor-borda:       #3A3A3C;
  --cor-texto:       #F5F5F7;
  --cor-texto-suave: #8E8E93;
}