/* ============================================================
   Pergor Server — cópia de `tokens.css` de
   github.com/saskuash/Pergor-DesignSystem, a fonte da verdade.
   NÃO EDITE: divergiu, virou bug. Correção se faz no repositório
   do sistema e volta como cópia inteira.

   Sincronizado em 2026-08-28.
   ============================================================ */

/* ==========================================================================
   Pergor · Design System — camada canônica de tokens
   --------------------------------------------------------------------------
   Fonte da verdade: DESIGN.md (sistema) + marca/MARCA.md (logo e marca).
   Este arquivo é a ÚNICA origem permitida de cor, raio, sombra, tempo e
   família tipográfica em qualquer aplicação Pergor.

   Arquitetura em duas camadas (método registrado em
   "Referência — Design System Legível por IA", StartupSecondBrain):

     1. PRIMITIVOS  --pds-*    valor cru. Nunca referenciar em componente.
     2. ALIAS       --neutral-*, --surface-*, --r-*, --font …
                              é isto que o componente usa.

   O prefixo é --pds-* (Pergor Design System), e não --pg-*, porque --pg-*
   já existe em Pergor-Portal, assets-marca-nova e assets/tokens.css com 207
   usos e valores incompatíveis entre si. Reaproveitar o prefixo trocaria
   valores em silêncio na primeira página que carregasse as duas folhas.

   A regra que sustenta o resto: componente nunca referencia primitivo nem
   valor cru — só alias. É a camada de alias que absorve uma troca de marca
   sem tocar em um único componente.

   Os nomes da camada 2 são idênticos aos de DESIGN.md §13 e aos de
   mockups-v4.html, de propósito: o mockup de referência funciona sobre este
   arquivo sem nenhuma adaptação.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMITIVOS
   -------------------------------------------------------------------------- */
:root {
  /* Escala neutra — DESIGN.md §2 */
  --pds-preto:        #000000;
  --pds-grafite:      #36383B;
  --pds-cinza-80:     #6D7076;  /* 4,97:1 sobre branco; falha fora dele */
  --pds-cinza-75:     #5D5F64;  /* usar sempre que o fundo não for branco */
  --pds-cinza-50:     #E1E5EF;
  --pds-cinza-40:     #E8ECF3;
  --pds-cinza-30:     #F0F2F7;
  --pds-branco:       #FFFFFF;
  --pds-canvas:       #FFFFFF;  /* canvas do app no kit Venture; ver DESIGN.md §2 */
  --pds-superficie:   #F9F9F9;

  /* Tintas semânticas — fundo tingido + tinta de texto já corrigida
     para contraste (DESIGN.md §11). Os fundos vieram verbatim do kit
     Venture; só o texto foi escurecido. */
  --pds-azul-tint:    #EDF2FE;  --pds-azul-ink:    #2A5EF2;
  --pds-verde-tint:   #EEF5F0;  --pds-verde-ink:   #42774E;
  --pds-ambar-tint:   #FBF4EC;  --pds-ambar-ink:   #946022;
  --pds-oliva-tint:   #F7F7E8;  --pds-oliva-ink:   #726E13;
  --pds-vermelho-tint:#F7EDED;  --pds-vermelho-ink:#AF4B4B;
  --pds-violeta-tint: #F4EDF7;  --pds-violeta-ink: #8655B5;

  /* Marca — Manual de Marca Pergor v1.0, sistema petróleo (marca/MARCA.md).
     Estes quatro são os ÚNICOS valores de marca autorizados. O acento não
     é cor de interface: vive no knob do símbolo e no ponto do wordmark. */
  --pds-marca-tinta:   #17181B;  /* forma do símbolo sobre fundo claro */
  --pds-marca-papel:   #F4F1EB;  /* forma do símbolo sobre fundo escuro */
  --pds-marca-acento:  #0F5B6B;  /* knob sobre papel; fundo do ícone de app */
  --pds-marca-acento-claro: #4FC2D8;  /* knob sobre tinta */
}

/* --------------------------------------------------------------------------
   2. ALIAS — o que os componentes consomem
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --neutral-100: var(--pds-preto);
  --neutral-90:  var(--pds-grafite);
  --neutral-80:  var(--pds-cinza-80);
  --neutral-75:  var(--pds-cinza-75);
  --neutral-50:  var(--pds-cinza-50);
  --neutral-40:  var(--pds-cinza-40);
  --neutral-30:  var(--pds-cinza-30);
  --neutral-0:   var(--pds-branco);

  --canvas:     var(--pds-canvas);
  --surface-50: var(--pds-superficie);
  --surface-0:  var(--pds-branco);

  --blue-tint:    var(--pds-azul-tint);      --blue-ink:    var(--pds-azul-ink);
  --green-tint:   var(--pds-verde-tint);     --green-ink:   var(--pds-verde-ink);
  --amber-tint:   var(--pds-ambar-tint);     --amber-ink:   var(--pds-ambar-ink);
  --olive-tint:   var(--pds-oliva-tint);     --olive-ink:   var(--pds-oliva-ink);
  --red-tint:     var(--pds-vermelho-tint);  --red-ink:     var(--pds-vermelho-ink);
  --violet-tint:  var(--pds-violeta-tint);   --violet-ink:  var(--pds-violeta-ink);

  /* Sombra só para camadas que flutuam de fato (§5).
     Card em repouso não recebe sombra nenhuma. */
  --shadow-float: 0 8px 24px rgba(0, 0, 0, .06);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, .12);

  /* Véu do modal. O valor é o de .modal-bg em mockups-v4.html; virou token
     aqui porque estava cru lá e é o único overlay do sistema. */
  --scrim: rgba(0, 0, 0, .38);

  /* Raios (§5) */
  --r-card:  12px;
  --r-panel: 10px;
  --r-input: 8px;
  --r-badge: 6px;
  --r-pill:  999px;

  /* Movimento: 120–200ms (§9) */
  --t: 160ms ease-out;

  /* Tipografia (§3). Inter carrega toda a interface.
     Archivo existe SÓ para o wordmark — ver marca/MARCA.md. */
  --font:          'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-wordmark: 'Archivo', var(--font);

  /* Marca dentro da INTERFACE. A forma é preto puro, não o `#17181B` de
     marca: o console é monocromático e um #17181B ao lado de um #000000 lê
     como erro de renderização, não como escolha (marca/MARCA.md). O tinta de
     marca continua disponível como primitiva, para peça de comunicação. */
  --marca-forma:  var(--pds-preto);
  --marca-knob:   var(--pds-marca-acento);
  --marca-acento: var(--pds-marca-acento);
}

/* Símbolo sobre fundo escuro: reescreve só os dois alias de marca.
   Aplicar a classe no ancestral, não no <svg>. */
.marca-invertida {
  --marca-forma: var(--pds-marca-papel);
  --marca-knob:  var(--pds-marca-acento-claro);
}

/* Símbolo sobre o acento chapado: o knob assume a cor do fundo e lê
   como recorte — "vazado, não colorido" (MARCA.md §Variações). */
.marca-sobre-acento {
  --marca-forma: var(--pds-marca-papel);
  --marca-knob:  var(--pds-marca-acento);
}

/* --------------------------------------------------------------------------
   3. BASE
   --------------------------------------------------------------------------
   Copiada verbatim de mockups-v4.html. Importa mais do que parece: o mockup
   quase não declara `line-height` por componente — dez vezes no arquivo
   inteiro — então a entrelinha de toda a interface vem desta herança. Sem
   esta base, um app que só adote os tokens fica sem escala tipográfica
   nenhuma e cai no 16px do navegador.

   Duas correções em relação à versão anterior deste arquivo, que divergia
   do mockup em silêncio: a cor do corpo é `neutral-90` (#36383B) e não
   `neutral-100`; e o tamanho e a entrelinha, que não existiam aqui, são
   14px/1.5.
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }

body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--neutral-90);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Títulos em medium (500) — nunca bold (§3) */
h1, h2, h3, h4 {
  font-weight: 500;
  color: var(--neutral-100);
  letter-spacing: -.015em;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { letter-spacing: -.022em; }
b, strong { font-weight: 600; }
a { color: var(--blue-ink); }
button { font: inherit; cursor: pointer; }

/* Anel de foco: 2px preto com offset de 2px — a única borda de 2px do
   sistema (§11). Nunca remover sem substituir por outro indicador visível. */
:focus-visible { outline: 2px solid var(--neutral-100); outline-offset: 2px; }
.sobre-preto :focus-visible { outline-color: var(--neutral-0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .linha-anim { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ==========================================================================
   4. PAR TONAL ESCURO
   --------------------------------------------------------------------------
   Ativado por `data-tema="dark"` no <html>. Sem esse atributo o sistema é
   claro — não há `prefers-color-scheme` aqui de propósito: o tema é decisão
   de produto por superfície, não preferência do sistema operacional.

   Como foi derivado: para cada token, procurou-se o cinza cuja razão de
   contraste contra o canvas escuro é a MESMA que a do token claro contra o
   branco. O espelho fica dentro de 0,03 em todos os degraus de texto — e
   reproduz até a falha conhecida do claro, `neutral-80` sobre `neutral-30`
   em 4,48:1. A regra de §11 vale sem alteração nos dois temas.

   |             | claro   | escuro  | razão contra o canvas |
   |-------------|---------|---------|-----------------------|
   | surface-50  | #F9F9F9 | #18191C | 1,05 · 1,06           |
   | neutral-30  | #F0F2F7 | #1D1E21 | 1,12 · 1,11           |
   | neutral-40  | #E8ECF3 | #222327 | 1,18 · 1,18           |
   | neutral-50  | #E1E5EF | #27282C | 1,26 · 1,26           |
   | neutral-80  | #6D7076 | #83848D | 4,97 · 5,00           |
   | neutral-75  | #5D5F64 | #9697A2 | 6,39 · 6,41           |
   | neutral-90  | #36383B | #CCCDDB | 11,76 · 11,79         |
   | neutral-100 | #000000 | #FFFFFF | 21,00 · 18,58         |

   O último não fecha porque 18,58:1 é o teto: branco sobre #121316. Aceito.

   As tintas NÃO puderam ser espelhadas pela razão. Escurecer uma matiz já
   escura como o azul #2A5EF2 até 1,12:1 sobre o canvas a leva a #000104 — a
   cor desaparece. Cada tinta escura é o canvas misturado a 22% da matiz, e o
   ink é a matiz clareada até passar de 4,7:1 sobre ela. Isso dá 1,21–1,23:1
   de separação contra o canvas, um pouco mais do que os 1,08–1,15 do claro.
   É desvio consciente: no escuro um selo tingido some antes disso.
   ========================================================================== */
:root {
  /* Primitivas escuras. Ficam no :root para existirem sempre; quem as ativa
     é o bloco [data-tema="dark"] abaixo. */
  --pds-esc-canvas:     #121316;
  --pds-esc-superficie: #18191C;
  --pds-esc-cinza-30:   #1D1E21;
  --pds-esc-cinza-40:   #222327;
  --pds-esc-cinza-50:   #27282C;
  --pds-esc-cinza-80:   #83848D;  /* só sobre canvas e surface-50, como no claro */
  --pds-esc-cinza-75:   #9697A2;
  --pds-esc-grafite:    #CCCDDB;  /* o corpo */
  --pds-esc-branco:     #FFFFFF;  /* títulos e ação */

  --pds-esc-azul-tint:     #172446;  --pds-esc-azul-ink:     #648AF6;
  --pds-esc-verde-tint:    #1D2922;  --pds-esc-verde-ink:    #729A7B;
  --pds-esc-ambar-tint:    #2F2419;  --pds-esc-ambar-ink:    #B0895B;
  --pds-esc-oliva-tint:    #272715;  --pds-esc-oliva-ink:    #96934F;
  --pds-esc-vermelho-tint: #351F22;  --pds-esc-vermelho-ink: #C47B7B;
  --pds-esc-violeta-tint:  #2C2239;  --pds-esc-violeta-ink:  #A581C8;
}

[data-tema="dark"] {
  color-scheme: dark;

  /* A escala inverte de papel: neutral-100 passa a ser a cor de maior
     contraste (branco) e neutral-0 a de menor (o próprio canvas), que é o
     texto sobre o botão primário. */
  --neutral-100: var(--pds-esc-branco);
  --neutral-90:  var(--pds-esc-grafite);
  --neutral-80:  var(--pds-esc-cinza-80);
  --neutral-75:  var(--pds-esc-cinza-75);
  --neutral-50:  var(--pds-esc-cinza-50);
  --neutral-40:  var(--pds-esc-cinza-40);
  --neutral-30:  var(--pds-esc-cinza-30);
  --neutral-0:   var(--pds-esc-canvas);

  --canvas:     var(--pds-esc-canvas);
  --surface-50: var(--pds-esc-superficie);
  --surface-0:  var(--pds-esc-canvas);

  --blue-tint:    var(--pds-esc-azul-tint);      --blue-ink:    var(--pds-esc-azul-ink);
  --green-tint:   var(--pds-esc-verde-tint);     --green-ink:   var(--pds-esc-verde-ink);
  --amber-tint:   var(--pds-esc-ambar-tint);     --amber-ink:   var(--pds-esc-ambar-ink);
  --olive-tint:   var(--pds-esc-oliva-tint);     --olive-ink:   var(--pds-esc-oliva-ink);
  --red-tint:     var(--pds-esc-vermelho-tint);  --red-ink:     var(--pds-esc-vermelho-ink);
  --violet-tint:  var(--pds-esc-violeta-tint);   --violet-ink:  var(--pds-esc-violeta-ink);

  /* Sombra quase não lê sobre fundo escuro. O sistema já separa por filete
     de 1px (§5), então a sombra fica só para dar profundidade ao que flutua,
     mais fechada do que no claro. */
  --shadow-float: 0 8px 24px rgba(0, 0, 0, .40);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, .60);
  --scrim: rgba(0, 0, 0, .62);

  /* A marca usa a variante de fundo tinta (marca/MARCA.md). */
  --marca-forma:  var(--pds-marca-papel);
  --marca-knob:   var(--pds-marca-acento-claro);
  --marca-acento: var(--pds-marca-acento-claro);
}