/* ============================================================================
   tokens.css — PLD_DESCOMPLICADO · Brand System "Cofre & Brasa"
   ----------------------------------------------------------------------------
   N1 da cascata: o PONTO ÚNICO onde os valores da marca viram código.

   Dono dos valores (N0) = os .md em Diretrizes/Identidade_Visual/:
     · cores .......... paleta_de_cores.md  (§2 brand · §3 surface · §4 escalas · §5 tokens)
     · tipografia ..... tipografia.md       (§3 hierarquia · §4.1 fallback stacks)
     · símbolo ........ simbolos_e_logotipo.md

   Mudou um valor num .md?  Atualize AQUI e depois siga design/kit/PROPAGACAO.md
   (há paletas hardcoded em tools/ e producao/ que este arquivo NÃO alcança).

   Como consumir:
     de design/marca/ ................. <link rel="stylesheet" href="../kit/tokens.css">
     de design/kit/ ................... <link rel="stylesheet" href="tokens.css">
     de Diretrizes/Identidade_Visual/ .. <link rel="stylesheet" href="../../design/kit/tokens.css">
   Sempre ANTES do <style> local — assim o arquivo ainda pode sobrescrever o que
   precise (ver §10 "divergências conhecidas").

   Regra 90/10: grafite + areia sustentam ~90% da peça; a brasa é os ~10%.
   Coleiras: zero azul de marca · neutros sempre quentes · nunca preto puro ·
   nunca gradiente roxo-em-branco · brasa nunca como texto sobre claro.
   ============================================================================ */

:root {

  /* ==========================================================================
     1. BRAND COLORS — paleta_de_cores.md §2
     ========================================================================== */
  --grafite:        #16181D;   /* Tinta / Grafite — âncora escura, o cofre       */
  --brasa:          #E3A24A;   /* Brasa (âmbar-ouro) — acento primário, o "_"    */
  --ouro:           #97611A;   /* Ouro profundo — texto/link âmbar sobre claro   */
  --ember:          #C0552F;   /* Ember (terracota) — ênfase emocional rara      */

  /* ==========================================================================
     2. SURFACE COLORS — paleta_de_cores.md §3
     ========================================================================== */
  --areia:          #F6F1E8;   /* Superfície padrão clara (quente)               */
  --papel:          #FFFFFF;   /* Superfície elevada / cards                     */
  --creme:          #F8F4EC;   /* Superfície creme (editorial alternativo)       */
  --nevoa:          #ECE5D9;   /* Névoa quente — container / divisória           */
  --grafite-glow:   #1E2128;   /* Grafite +glow — card sobre fundo escuro        */

  /* ==========================================================================
     3. ESCALAS 50 → 900 — paleta_de_cores.md §4
     ========================================================================== */

  /* 3.1 Neutros — Grafite (warm neutral) · §4.1 */
  --neutral-50:     #F5F4F2;
  --neutral-100:    #E9E6E1;
  --neutral-200:    #D5D1C9;
  --neutral-300:    #B7B2A9;
  --neutral-400:    #908B82;
  --neutral-500:    #6B6862;   /* token base — texto secundário / legendas       */
  --neutral-600:    #4B4944;
  --neutral-700:    #33322E;
  --neutral-800:    #232427;   /* superfície escura elevada                      */
  --neutral-900:    #16181D;   /* token base — Tinta                             */
  --neutral-950:    #0F1115;   /* Ink — preto mais profundo (raro)               */

  /* 3.2 Brasa — Âmbar · §4.2 */
  --amber-50:       #FBF4E7;
  --amber-100:      #F6E5C8;
  --amber-200:      #EFCF99;
  --amber-300:      #E9BC72;
  --amber-400:      #E6AE59;
  --amber-500:      #E3A24A;   /* token base — Brasa                             */
  --amber-600:      #C9852F;
  --amber-700:      #97611A;   /* token base — Ouro profundo (AA sobre claro)    */
  --amber-800:      #744A18;
  --amber-900:      #523413;

  /* 3.3 Ember — Terracota · §4.3 */
  --ember-50:       #FAEDE8;
  --ember-100:      #F3D6CA;
  --ember-200:      #E6AF9C;
  --ember-300:      #D98A6F;
  --ember-400:      #CC6C49;
  --ember-500:      #C0552F;   /* token base — Ember                             */
  --ember-600:      #9F4524;
  --ember-700:      #7C361B;   /* texto ember sobre claro (AA)                   */
  --ember-800:      #5C2814;
  --ember-900:      #3F1C0E;

  /* 3.4 Areia — superfícies quentes · §4.4 */
  --sand-0:         #FFFFFF;   /* Papel                                          */
  --sand-50:        #FBF8F2;
  --sand-100:       #F8F4EC;   /* Papel creme                                    */
  --sand-200:       #F6F1E8;   /* token base — Areia                             */
  --sand-300:       #ECE5D9;   /* Névoa                                          */
  --sand-400:       #E0D7C6;   /* borda sobre claro                              */
  --sand-500:       #CFC4AE;

  /* ==========================================================================
     4. FEEDBACK (funcional) — paleta_de_cores.md §4.5
     `info` é a ÚNICA exceção fria e nunca é cor de marca.
     A Brasa nunca é usada como cor de alerta.
     ========================================================================== */
  --success:        #2E7D46;   --success-tint: #E7F2EA;   --success-shade: #1E5531;
  --warning:        #C98A1E;   --warning-tint: #FBF1DC;   --warning-shade: #8A5E12;
  --error:          #B23A2E;   --error-tint:   #F8E5E1;   --error-shade:   #7C271E;
  --info:           #3F6E69;   --info-tint:    #E4EDEB;   --info-shade:    #294845;

  /* ==========================================================================
     5. TOKENS SEMÂNTICOS — paleta_de_cores.md §5
     A camada que o produto deveria consumir (nunca hex cru).
     ========================================================================== */
  --bg-default-light:      var(--sand-200);
  --bg-default-dark:       var(--neutral-900);
  --bg-surface-light:      var(--sand-0);
  --bg-surface-dark:       var(--neutral-800);
  --bg-container-light:    var(--sand-300);
  --bg-container-dark:     var(--grafite-glow);
  --text-primary-light:    var(--neutral-900);
  --text-primary-dark:     var(--sand-200);
  --text-secondary-light:  var(--neutral-500);
  --text-secondary-dark:   #A39C8E;
  --text-link-light:       var(--amber-700);
  --text-link-dark:        var(--amber-500);
  --accent-primary:        var(--amber-500);
  --accent-emphasis:       var(--ember-500);
  --border-light:          var(--sand-400);
  --border-dark:           #2C2F37;

  /* ==========================================================================
     6. EXTENSÕES DO SISTEMA
     Valores que NÃO estão nas tabelas dos .md de paleta — nasceram nas peças e
     estão declarados aqui de propósito, marcados como extensão. Cada um tem
     motivo registrado; não invente novos sem registrar no .md dono.
     ========================================================================== */

  /* 6.1 Cinza-labirinto — cor do símbolo TM1 sobre escuro.
     EXCEÇÃO DECLARADA E ÚNICA à coleira "neutros sempre quentes" (aprovada
     14/07/2026). Só o símbolo usa; nunca vira texto nem superfície. */
  --cinza-labirinto: #6E7789;

  /* 6.2 Ember claro para texto/ícone sobre escuro (o ember puro não passa AA
     como texto sobre grafite). */
  --ember-txt:       #E0906F;

  /* 6.3 Série de dataviz — ORDEM FIXA d1→d4, validada para CVD sobre #1E2128.
     A brasa fica reservada como acento e NÃO entra na série. */
  --d1: #DDA23A;
  --d2: #88A8EC;   /* único tom frio tolerado — categórico, nunca cor de marca */
  --d3: #DC6E44;
  --d4: #3FC5A3;

  /* 6.4 Superfícies e fios do tema escuro do kit (acima do grafite+glow) */
  --surface-dark-2: #242A34;   /* card elevado sobre card                        */
  --hairline-dark:  #2A2F39;   /* fio/borda de 1px sobre escuro                  */
  --mesh:           #3A4150;   /* malha/labirinto de fundo (estudos do símbolo)  */

  /* 6.5 Superfícies e fios do tema claro impresso (brand book claro) */
  --surface-light-2: #FBF7EF;
  --hairline-light:  #E4DCCB;

  /* 6.6 Textos dessaturados (o "muted" de cada tema) — ver §10, divergem entre
     arquivos e por isso ganham nome próprio aqui. */
  --muted-warm:     #D3CCC1;   /* areia dessaturada — padrão do kit escuro       */
  --muted-warm-2:   #B0A89C;   /* segundo nível do kit escuro                    */
  --muted-cool:     #9AA0AB;   /* cinza frio de UI (preflight / estudos)         */
  --muted-light-2:  #8A8578;   /* segundo nível sobre claro                      */
  --success-txt:    #63B57F;   /* sucesso legível sobre escuro                   */

  /* 6.7 Palco do deck 16:9 (frontend-slides) */
  --stage-bg:       #0b0c0f;   /* moldura fora do palco                          */
  --slide-bg:       var(--grafite);

  /* ==========================================================================
     7. TIPOGRAFIA — tipografia.md §3 e §4.1
     Inter é a VOZ PRINCIPAL de tudo, inclusive títulos (700 Display/H1 ·
     600 H2/H3 · 400 corpo). Fraunces é SERIFA RESERVADA: logo/wordmark "PLD"
     (travado pelo registro no INPI) + acentos raros de conexão.
     Na dúvida, Inter.
     ========================================================================== */
  --font-text:  'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:  'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* 7.1 Escala tipográfica — tipografia.md §3.1 (grid de 8px, base 16px) */
  --fs-display:  56px;  --lh-display:  1.05;  --tr-display:  -0.5px;  /* Inter 700 */
  --fs-h1:       40px;  --lh-h1:       1.1;   --tr-h1:       -0.4px;  /* Inter 700 */
  --fs-h2:       30px;  --lh-h2:       1.15;  --tr-h2:       -0.3px;  /* Inter 600 */
  --fs-h3:       24px;  --lh-h3:       1.2;   --tr-h3:       -0.2px;  /* Inter 600 */
  --fs-eyebrow:  12px;  --lh-eyebrow:  1.3;   --tr-eyebrow:  2.5px;   /* Inter 600 CAIXA ALTA */
  --fs-body-l:   18px;  --lh-body-l:   1.6;   --tr-body-l:   0;       /* Inter 400 */
  --fs-body:     16px;  --lh-body:     1.6;   --tr-body:     0;       /* Inter 400 */
  --fs-body-s:   14px;  --lh-body-s:   1.55;  --tr-body-s:   0;       /* Inter 400 */
  --fs-caption:  12.5px;--lh-caption:  1.5;   --tr-caption:  0.2px;   /* Inter 400/500 */
  --fs-label:    14px;  --lh-label:    1;     --tr-label:    0.2px;   /* Inter 600 */
  --fs-mono:     14px;  --lh-mono:     1.5;   --tr-mono:     0;       /* Mono 400 */

  /* 7.2 Pesos liberados — tipografia.md §3.3 */
  --fw-regular: 400;  --fw-medium: 500;  --fw-semibold: 600;  --fw-bold: 700;

  /* ==========================================================================
     8. FORMA E MOVIMENTO
     ========================================================================== */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 999px;
  --ease:   cubic-bezier(.22,1,.36,1);   /* nunca bounce */
  --maxw:   980px;                       /* largura editorial das vitrines */

  /* ==========================================================================
     9. APELIDOS POR ARQUIVO
     Os HTML do sistema batizaram as mesmas cores com nomes diferentes. Nada é
     renomeado nos arquivos — os apelidos apontam para o token canônico, então
     este .css é substituto direto de qualquer :root local.
     ========================================================================== */

  /* 9.1 Nomes em inglês (Diretrizes/*_preview.html) */
  --graphite:     var(--grafite);
  --graphite2:    var(--grafite-glow);
  --graphite-2:   var(--grafite-glow);
  --amber:        var(--brasa);
  --amber-deep:   var(--ouro);
  --sand:         var(--areia);
  --paper:        var(--papel);
  --cream:        var(--creme);
  --mist:         var(--nevoa);
  --line:         var(--border-dark);
  --ink:          var(--neutral-950);   /* ver §10 — brand-book-a4-claro usa #16181D */

  /* 9.2 Nomes em português (design/marca, design/kit, manual_visual, preflight) */
  --card:         var(--grafite-glow);  /* ver §10 — brand-book-a4-claro usa #FFFFFF */
  --card-2:       var(--surface-dark-2);/* ver §10 — brand-book-a4-claro usa #FBF7EF */
  --hair:         var(--hairline-dark); /* ver §10 — brand-book-a4-claro usa #E4DCCB */
  --sym:          var(--cinza-labirinto);/* ver §10 — brand-book-a4-claro usa #16181D */
  --grafite-elev: var(--grafite-glow);
  --grafite-2:    var(--grafite-glow);
  --grafite-3:    var(--hairline-dark);
  --grafite-card: var(--neutral-800);

  /* 9.3 "muted" — DEFAULT = tema escuro do kit. Divergências em §10. */
  --muted:        var(--muted-warm);
  --muted-2:      var(--muted-warm-2);

  /* 9.4 Feedback com prefixos do catálogo de componentes */
  --sys-ok:       var(--success);
  --sys-warn:     var(--warning);
  --sys-err:      var(--error);
  --sys-crit:     var(--ember-700);
  --ok-txt:       var(--success-txt);

  /* 9.5 Apelidos de tipografia — todos apontam para as 3 stacks canônicas */
  --ft:           var(--font-text);
  --font-t:       var(--font-text);
  --text:         var(--font-text);
  --sans:         var(--font-text);
  --fd:           var(--font-serif);   /* corrigido 30/07/2026 — era Source Serif 4
                                          em wordmark-comparacao.html; o wordmark
                                          está registrado no INPI em Fraunces      */
  --font-d:       var(--font-serif);
  --serif:        var(--font-serif);
  --mono:         var(--font-mono);

  /* 9.6 Stacks de DEMONSTRAÇÃO (aplicacoes_preview mostra como fica sem as
     fontes da marca). Literais de propósito — não aliasar. */
  --fallback-serif: Georgia, 'Times New Roman', serif;
  --fallback-sans:  Arial, 'Segoe UI', sans-serif;
}

/* ============================================================================
   10. DIVERGÊNCIAS CONHECIDAS (o mesmo nome com valores diferentes por arquivo)
   ----------------------------------------------------------------------------
   Estes nomes NÃO puderam ser unificados sem mudar o render. O default acima é
   o do tema escuro do kit; os arquivos abaixo mantêm um :root curto de override
   no próprio <style>, apontando sempre para tokens desta folha (nunca hex cru).

     --card / --card-2 / --hair / --sym / --ink
        · escuro (13 arquivos) ......... #1E2128 / #242A34 / #2A2F39 / #6E7789 / #0F1115
        · brand-book-a4-claro.html ..... #FFFFFF / #FBF7EF / #E4DCCB / #16181D / #16181D

     --muted
        · #D3CCC1  kit escuro (design-system, brand-book-a4, especimen,
                   wordmark, componentes-animados, frontend-slides-base) ← DEFAULT
        · #A39C8E  previews (paleta, tipografia, grafismos, aplicacoes,
                   direcao_de_imagem) = text/secondary dark da paleta §5
        · #9AA0AB  preflight + conceitos_simbolo (cinza frio de UI)
        · #6B6862  brand-book-a4-claro (= neutral-500)

     --muted-2
        · #B0A89C  kit escuro ← DEFAULT   · #8A8578  claro   · #6B6862  preflight

   Decidir um valor único para "muted" é decisão de marca, não de refatoração:
   está registrado em design/kit/PROPAGACAO.md como pendência.
   ============================================================================ */