/* ============================================================================
   Leads Per Hour — design tokens canônicos (identidade oficial 2026).
   Cole este :root no topo de qualquer tela/projeto LPH e use só estas variáveis.
   Tema escuro sempre; Laranja Chama é o acento (nunca fundo de área grande).
   Cores oficiais, nomes e Pantone em references/identidade-visual.md.

   LINGUAGEM VISUAL (resumo — regras completas no SKILL.md):
   - Tipografia manda: Switzer em títulos e números; Inter no resto. Hierarquia
     vem de peso/tamanho/cor de texto, não de caixas.
   - Menos caixas: seções separadas por hairlines (--ln); superfícies elevadas
     (--s1/--s2) só em elementos interativos ou agrupamento real.
   - Um acento por vista: Chama na ação primária + estado ativo. Oráculo e
     informação usam os frios (--cool). Nada de acento espalhado.
   - Assinaturas da marca: o "/" como marcador (.slash-label), a régua espectral
     (.rule-brand / --grad-spectrum) usada UMA vez por vista, o raio como
     indicador vivo, números em Switzer tabular (.num).

   FONTES: (a) offline → <link rel="stylesheet" href="fonts.css"> (assets/fonts/)
           (b) internet → CDNs comentados em fonts.css. Fallbacks abaixo seguram.
   ============================================================================ */

:root{
  /* ===== CORES DE MARCA (oficiais) ===================================== */
  --chama:     #f2552c;  /* Laranja Chama  — acento primário (PANTONE 17-1462) */
  --rubi:      #d8321a;  /* Laranja Rubi   — par do Chama em gradiente; destrutivo */
  --noite:     #1d262d;  /* Azul Noite     — base do tema escuro (PMS 433 C) */
  --lago:      #203e49;  /* Lago Refletido — superfície fria / secundária (19-4326) */
  --agua:      #115e66;  /* Verde água     — acento frio: Oráculo, info (PMS 5473) */
  --obsidiana: #131313;  /* Obsidiana      — preto de marca (Black 6 C) */
  --branco:    #ffffff;

  /* ===== SUPERFÍCIES (derivadas do Azul Noite) ========================= */
  --bg:  #141b1f;   /* fundo único da aplicação — o padrão é TUDO flat sobre ele */
  --s1:  #1a2229;   /* elevação 1: hover de linha, input, item ativo de lista */
  --s2:  #1d262d;   /* elevação 2: popover, ⌘K, toast (Azul Noite puro) */
  --s3:  #26313a;   /* elevação 3: hover sobre s2 */
  --well:#0f1417;   /* poço: trilhas de barra, code, fundo de gráfico */

  /* ===== HAIRLINES (a estrutura vem delas, não de caixas) ============== */
  --ln:  rgba(255,255,255,.07);   /* divisória padrão */
  --ln2: rgba(255,255,255,.14);   /* ênfase / bordas de input / hover */

  /* ===== TEXTO ========================================================= */
  --tx:  #f4f7f8;   /* primário */
  --t2:  #9aa7ad;   /* secundário */
  --t3:  #6d7a81;   /* terciário: rótulos, hints, eyebrows */

  /* ===== ACENTO PRIMÁRIO (Laranja Chama) — um por vista ================ */
  --ac:      #f2552c;
  --ac2:     #f57756;               /* hover */
  --ac-press:#da4d28;               /* pressionado */
  --acsoft:  rgba(242,85,44,.12);   /* raro: fundo de estado ativo quando inevitável */
  --on-ac:   #ffffff;

  /* ===== ACENTO FRIO (Verde água) — Oráculo, info, secundário ========= */
  --cool:     #115e66;
  --cool2:    #2a8a91;              /* legível sobre fundo escuro */
  --coolsoft: rgba(17,94,102,.16);
  --on-cool:  #ffffff;

  /* ===== SEMÂNTICOS (discretos; cor no glifo/texto, não em pílulas) ==== */
  --ok:     #2fbf71;
  --warn:   #f5a623;
  --danger: #d8321a;

  /* ===== CANAIS (cor no GLIFO, botão continua neutro) ================== */
  --wa:  #25d366;   /* WhatsApp */
  --li:  #3b82c4;   /* LinkedIn (ajustado p/ leitura no escuro) */
  --call:#2a8a91;   /* Ligação (verde água) */

  /* ===== TEMPERATURA (glifo + palavra na cor; sem pílula) ============== */
  --hot: #f2552c;
  --warm:#f5a623;
  --cold:#4a9ba6;

  /* ===== GEOMETRIA ====================================================== */
  --r:     12px;    /* contêineres que precisarem de caixa */
  --r-sm:  8px;     /* botões / inputs */
  --r-lg:  16px;    /* modais / ⌘K */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;

  /* ===== GRADIENTES DE MARCA (só nas assinaturas) ====================== */
  --grad-chama:    linear-gradient(135deg,#f2552c 0%,#d8321a 100%);                        /* símbolo / hero raro */
  --grad-spectrum: linear-gradient(90deg,#f2552c 0%,#d8321a 26%,#203e49 70%,#115e66 100%); /* régua espectral */

  /* ===== TIPOGRAFIA ==================================================== */
  --font-display:'Switzer',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* ===== GRÁFICOS (ordem fixa de séries; padrões em assets/charts.html) = */
  --chart-1:#f2552c;              /* série principal — Chama */
  --chart-2:#2a8a91;              /* comparação — verde água legível */
  --chart-3:#6d7a81;              /* contexto — neutro */
  --chart-grid:rgba(255,255,255,.07);

  /* ===== DIVERSOS ====================================================== */
  --scroll:#2a353d;
  --pop-shadow:0 24px 60px rgba(0,0,0,.45);   /* popover / ⌘K / modal */
  color-scheme:dark;              /* form controls nativos no tema certo */
}

/* ============================================================================
   TEMA CLARO (variante oficial) — ative com <html data-theme="light">.
   Derivado das rampas oficiais de tons/sombras (references/brand-source/
   tons-e-sombras.pdf): superfícies nos tints do Azul Noite, texto no próprio
   Azul Noite, acento continua Laranja Chama. Mesma hierarquia, mesmas regras.
   O produto usa escuro como padrão; o claro serve a landings, docs, e-mails,
   impressão e preferência do usuário.
   ============================================================================ */
[data-theme="light"]{
  --bg:  #fcfcfd;   /* fundo (branco com um sopro frio) */
  --s1:  #f2f4f5;   /* hover de linha / input */
  --s2:  #ffffff;   /* popover / ⌘K / toast (par com --pop-shadow) */
  --s3:  #e9edee;   /* hover sobre s2 */
  --well:#edf0f1;   /* trilhas / poços */

  --ln:  rgba(29,38,45,.10);
  --ln2: rgba(29,38,45,.20);

  --tx:  #1d262d;   /* texto = Azul Noite (oficial) */
  --t2:  #5c6b73;
  --t3:  #7c878d;

  --ac2:     #da4d28;              /* hover do primário escurece no claro */
  --ac-press:#c24423;
  --acsoft:  rgba(242,85,44,.10);

  --cool2:    #0f555c;
  --coolsoft: rgba(17,94,102,.10);

  --ok:     #14834a;
  --warn:   #a8690a;
  --danger: #c22d15;

  --wa:  #1da851;  --li:  #0a66c2;  --call:#0f6a72;
  --hot: #da4d28;  --warm:#a8690a;  --cold:#29717d;

  --scroll:#c9d1d4;
  --pop-shadow:0 18px 44px rgba(29,38,45,.16);
  --chart-2:#0f6a72; --chart-3:#8e999f; --chart-grid:rgba(29,38,45,.10);
  color-scheme:light;
}

/* ===== BASE ============================================================ */
*    { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--tx); font-family:var(--font);
       font-size:13.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
       text-rendering:optimizeLegibility; }

h1,h2,h3,h4,.display{ font-family:var(--font-display); font-weight:600;
       line-height:1.15; letter-spacing:-.015em; }
.display{ font-weight:700; letter-spacing:-.02em; }

::selection             { background:var(--ac); color:#fff; }
::-webkit-scrollbar      { width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--scroll); border-radius:8px; }

/* ===== ASSINATURAS DA MARCA ============================================ */
/* Régua espectral — use UMA vez por vista (fio do topo ou sob o título). */
.rule-brand{ height:2px; border:0; background:var(--grad-spectrum); }

/* Rótulo com a barra "/" (vem de PER / HOUR, alusão a km/h).
   Serve para eyebrows e grupos de navegação. */
.slash-label{ font-size:10.5px; font-weight:600; letter-spacing:.09em;
       text-transform:uppercase; color:var(--t3); }
.slash-label::before{ content:"/ "; color:var(--ac); font-weight:700; }

/* Números de dado — Switzer, dígitos tabulares. */
.num{ font-family:var(--font-display); font-variant-numeric:tabular-nums;
      letter-spacing:-.02em; }

/* ===== UTILITÁRIOS ===================================================== */
.h1    { font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:-.02em; }
.muted { color:var(--t2); }
.hair-t{ border-top:1px solid var(--ln); }
.hair-b{ border-bottom:1px solid var(--ln); }
