/* ============================================================
   LIGTEC — camada de tokens da marca
   Fonte ÚNICA da identidade. Não contém regras de componente:
   só a paleta, a tipografia e as formas (raio/sombra/gradiente).

   Carregado DEPOIS de bundle/app.css (para sobrescrever as
   variáveis do tema comercial) e ANTES de custom.css + panel.css,
   que fazem o mapeamento semântico (--pnl-*, --auth-*).

   Paleta tirada do logo: navy da engrenagem inferior como base do
   chrome, verde-limão como destaque. Os nomes --lg-royal-* (base)
   e --lg-flame-* / --lg-gold-* (destaque) são LEGADO do briefing
   anterior e hoje são aliases das escalas novas — panel.css,
   auth.css e custom.css ainda os citam. Ao escrever CSS novo, use
   --lg-navy-* e --lg-lime-*.

   Tipografia (casa com o logo):
     wordmark  → sans geométrica (Montserrat)
     tagline   → serif de transição (Libre Baskerville)
     corpo     → Source Sans 3
     cifras    → JetBrains Mono
   ============================================================ */

:root {
  /* ----- NAVY — cor base: o azul da engrenagem inferior do logo ----- */
  --lg-navy-950: #060c16;
  --lg-navy-900: #0c1826;
  --lg-navy-800: #16283d;
  --lg-navy-700: #1f3a56;
  --lg-navy-600: #2a4a70;   /* primário sobre claro: ~8.9:1 com branco */
  --lg-navy-500: #35608f;
  --lg-navy-400: #4a7bb0;
  --lg-navy-300: #7ba1cb;
  --lg-navy-200: #b3c8e0;
  --lg-navy-100: #dbe5f1;
  --lg-navy-50:  #eef3f9;

  /* ----- VERDE-LIMÃO — destaque: o verde do logo ----- */
  --lg-lime-700: #4e6a12;   /* texto sobre branco: ~7:1 */
  --lg-lime-600: #5f7d1a;   /* texto sobre branco: ~4.8:1 */
  --lg-lime-500: #7fa321;   /* ícones e grafismos sobre claro */
  --lg-lime-400: #a2c442;   /* o verde exato da arte; só sobre escuro */
  --lg-lime-300: #bcda6c;
  --lg-lime-100: #e6f2c8;
  --lg-lime-50:  #f4fae5;

  /* ----- neutros de interface ----- */
  --lg-steel-500: #6f7b8a;
  --lg-steel-400: #93a2b5;
  --lg-steel-300: #b6c4d4;
  --lg-night-900: #04070d;
  --lg-ink-950: #0b0e13;
  --lg-ink-900: #141821;
  --lg-ink-800: #1e242f;
  --lg-ink-700: #2a313d;
  --lg-ink-600: #3a424f;
  --lg-ink-500: #5a6472;
  --lg-ink-400: #7c8797;
  --lg-ink-300: #a6b0be;
  --lg-ink-200: #cbd3dd;
  --lg-ink-100: #e4eaf2;
  --lg-ink-50:  #f3f6fa;

  /* ----- SEMÂNTICAS (feedback do sistema) ----- */
  --lg-success:      #1e9e6a;
  --lg-success-soft: #e6f5ee;
  --lg-danger:       #c4483f;
  --lg-danger-soft:  #fbeceb;
  --lg-warn:         #8a6d12;
  --lg-warn-soft:    #fbf3dd;
  --lg-info:         var(--lg-navy-500);
  --lg-info-soft:    var(--lg-navy-50);

  /* ----- ALIASES DO BRIEFING ANTERIOR -----
     panel.css, auth.css e custom.css ainda citam ~50 vezes os nomes da paleta
     conceitual (royal / flame / gold). Eles continuam funcionando porque
     apontam para as cores reais da LIGTEC. Ao editar um desses arquivos,
     prefira o nome novo; a renomeação em massa fica pendente. */
  --lg-royal-950: var(--lg-navy-950);
  --lg-royal-900: var(--lg-navy-900);
  --lg-royal-800: var(--lg-navy-800);
  --lg-royal-700: var(--lg-navy-700);
  --lg-royal-600: var(--lg-navy-600);
  --lg-royal-500: var(--lg-navy-500);
  --lg-royal-400: var(--lg-navy-400);
  --lg-royal-300: var(--lg-navy-300);
  --lg-royal-200: var(--lg-navy-200);
  --lg-royal-100: var(--lg-navy-100);
  --lg-royal-50:  var(--lg-navy-50);

  --lg-flame-700: var(--lg-lime-700);
  --lg-flame-600: var(--lg-lime-600);
  --lg-flame-500: var(--lg-lime-500);
  --lg-flame-400: var(--lg-lime-400);
  --lg-flame-300: var(--lg-lime-300);
  --lg-flame-100: var(--lg-lime-100);
  --lg-flame-50:  var(--lg-lime-50);

  --lg-gold-700: var(--lg-lime-700);
  --lg-gold-600: var(--lg-lime-600);
  --lg-gold-500: var(--lg-lime-400);
  --lg-gold-400: var(--lg-lime-400);
  --lg-gold-300: var(--lg-lime-300);
  --lg-gold-100: var(--lg-lime-100);
  --lg-gold-50:  var(--lg-lime-50);

  /* ----- TIPOGRAFIA -----
     wordmark LIGTEC → sans geométrica (Montserrat): solidez e modernidade
     tagline         → serif de transição (Libre Baskerville): credibilidade
     corpo           → Source Sans 3: legibilidade em tela a dia inteiro
     números         → JetBrains Mono: cifras alinhadas (linguagem de livro-razão) */
  --lg-font-display: 'Montserrat', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lg-font-body:    'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lg-font-serif:   'Libre Baskerville', Baskerville, Georgia, 'Times New Roman', serif;
  --lg-font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* ----- FORMAS DE MARCA ----- */
  --lg-radius:    14px;
  --lg-radius-s:  10px;
  --lg-radius-xs: 8px;

  /* chrome escuro: navy do logo, com respiração azul e um toque de limão */
  --lg-chrome-bg:
    radial-gradient(120% 60% at 20% 0%, rgba(74, 123, 176, .26), transparent 62%),
    radial-gradient(80% 40% at 100% 8%, rgba(162, 196, 66, .10), transparent 70%),
    linear-gradient(180deg, var(--lg-navy-900) 0%, var(--lg-navy-800) 46%, var(--lg-navy-950) 100%);
  --lg-chrome-line: rgba(162, 196, 66, .28);
  --lg-chrome-hair: rgba(255, 255, 255, .08);
  --lg-chrome-ink:  #dbe6f4;
  --lg-chrome-mut:  #9db0c9;

  /* conteúdo claro: cinzas com tinta navy (nunca neutros puros) */
  --lg-canvas:      #edf1f6;
  --lg-surface:     #ffffff;
  --lg-surface-2:   #f5f8fb;
  --lg-hairline:    #dde5ef;
  --lg-hairline-2:  #e9eff7;

  /* gradientes de acento */
  --lg-grad-royal: linear-gradient(135deg, var(--lg-navy-500), var(--lg-navy-700));
  --lg-grad-flame: linear-gradient(135deg, var(--lg-lime-400), var(--lg-lime-600));
  --lg-grad-lime:  linear-gradient(135deg, var(--lg-lime-400), var(--lg-lime-600));
  --lg-grad-gold:  linear-gradient(135deg, var(--lg-lime-300), var(--lg-lime-600));
  --lg-grad-night: linear-gradient(160deg, var(--lg-navy-700) 0%, var(--lg-navy-900) 55%, var(--lg-night-900) 100%);

  --lg-shadow:   0 1px 2px rgba(6, 12, 22, .05), 0 6px 22px -12px rgba(6, 12, 22, .20);
  --lg-shadow-h: 0 2px 6px rgba(6, 12, 22, .07), 0 16px 36px -14px rgba(6, 12, 22, .30);
}

/* ============================================================
   SOBREVOLTA O TEMA COMERCIAL (bundle/app.css)
   O bundle resolve quase tudo por estas variáveis — reescrevê-las
   aqui reapresenta o tema inteiro na marca sem editar o bundle.
   ============================================================ */
:root {
  --blue:        var(--lg-royal-800);
  --black:       var(--lg-ink-800);
  --dark-gray:   var(--lg-ink-500);
  --gray:        var(--lg-ink-50);
  --light-gray:  var(--lg-surface-2);
  /* ⚠️ O bundle usa --bor-blue como FUNDO do .menu-accordion e como
     border-bottom do header (antes era branco = invisível). Royal forte aqui
     nasceria como uma linha azul viva sob a topbar escura. */
  --bor-blue:    var(--lg-royal-900);
  --bor-gray:    var(--lg-hairline);
  --bor-form:    var(--lg-hairline);
  --bor-card:    var(--lg-hairline);
  /* --blue-pastel é FUNDO de .badge-blue/.alert-blue: precisa ser claro. */
  --blue-pastel: var(--lg-royal-200);
  --green:       var(--lg-success);
  --green-pastel:#7fd9b3;
  --red:         var(--lg-danger);
  --red-pastel:  #dd8079;
  --yellow:      var(--lg-gold-300);
}

/* O bundle crava 'Source Sans Pro' em html/body, em TABLE e nos campos do
   .form-wrap. Essa fonte não é mais carregada — sem isto, tabelas e inputs
   cairiam no sans-serif genérico do navegador. */
html,
body,
table,
.form-wrap .group input[type="email"],
.form-wrap .group input[type="password"],
.form-wrap .group select,
.form-wrap .group textarea {
  font-family: var(--lg-font-body);
}

/* ============================================================
   LOGO DA MARCA  →  <x-brand.logo>
   Arte oficial em raster, verde + navy SOBRE BRANCO. Em chrome
   escuro o próprio <img> faz de placa: arredondar + respiro +
   sombra, senão parece um retângulo colado sobre o navy.
   ============================================================ */
/* .brand-logo {
  display: block;
  width: auto;
  height: 34px;
  background: #fff;
  box-sizing: content-box;
  padding: 3px 9px;
  border-radius: 10px;
  box-shadow: 0 8px 22px -16px rgba(5, 12, 29, .9);
} */

/* quando o logo divide a linha com texto (instalação, erro) */
.brand-plate { display: inline-flex; align-items: center; }

/* tamanhos (a arte é quadrada: altura define a leitura do símbolo) */
.brand-logo--sm { height: 38px; }
.brand-logo--md { height: 46px; }
.brand-logo--lg { height: 56px; }
.brand-logo--xl { height: 104px; padding: 6px 10px; border-radius: 16px; }