/* =====================================================================
   ERP L'Espace — fundação de estilos (tokens, reset e utilitários)
   ---------------------------------------------------------------------
   ORIGEM     design-system/tokens/ — export do Claude Design
   ACEITE     13/08/2026, em revisão dupla, após 3 rodadas de correção
   GERADO EM  13/08/2026, concatenando os 8 arquivos na ordem declarada
              em design-system/styles.css:
              fonts.css · colors.css · typography.css · spacing.css · borders.css · elevation.css · density.css · base.css

   NORMATIVO  identidade.md e principios.md. Este arquivo é EXPRESSÃO
              deles: em qualquer divergência, valem os .md.

   PAPEL      fonte de estilos do incremento 1.5 (Painel). O kit React do
              Design é especificação visual — gabarito de conferência —,
              não código a portar.

   DERIVADO   não editar à mão. A cada export aceito, regerar a partir de
              design-system/tokens/. Entre exports, vale o repositório.

   FONTES     o bloco @font-face abaixo assume os arquivos servidos em
              ../fonts/ em relação a este CSS (layout Django habitual:
              static/css/tokens.css + static/fonts/). É o ÚNICO trecho
              deste arquivo que carrega suposição de caminho — ajustar
              o prefixo ao montar o static do 1.5. Os binários canônicos
              estão em design-system/assets/fonts/, cada um com sua
              licença OFL ao lado.
   ===================================================================== */


/* ==== fonts.css =========================================================== */
/* Fontes da identidade L'Espace. Arquivos originais entregues pelo proprietário. */
@font-face{font-family:"Panoragraf";src:url("../fonts/Panoragraf-Light.c8a30691cb1b.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Panoragraf";src:url("../fonts/Panoragraf-Regular.5c42f623ff7e.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Light.fcc40ae9a542.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Regular.093ee89be9ed.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* Inter — SIL OFL. Uso restrito a VALORES NUMÉRICOS (--font-numeric): é ela que faz
   'tnum' surtir efeito real, feature que a Poppins não possui. Texto, rótulos e títulos
   seguem Poppins; documentos de marca seguem Panoragraf. */
@font-face{font-family:"Inter";src:url("../fonts/Inter-VariableFont_opsz,wght.0a77e23a8fdb.ttf") format("truetype-variations");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Italic-VariableFont_opsz,wght.6dce17792107.ttf") format("truetype-variations");font-weight:300 700;font-style:italic;font-display:swap}

/* ==== colors.css ========================================================== */
/* Paleta L'Espace — hex oficiais, nunca aproximar.
   Estrutura e destaque: apenas a primária. Neutros dominam.
   Areia e sálvia são acentos de apoio; terracota é reservada ao negativo. */
:root{
  /* Primária */
  --primary:#505B5E;--primary-light:#6E7D80;--primary-dark:#383F41;
  /* Off-white */
  --offwhite:#E7E7DB;--offwhite-light:#F4F4EF;--offwhite-dark:#A4A499;
  /* Areia */
  --sand:#BDA990;--sand-light:#D6C7B8;--sand-dark:#806759;
  /* Verde-sálvia */
  --sage:#8D9E7F;--sage-light:#AEBCAA;--sage-dark:#5E6858;
  /* Terracota */
  --terracotta:#683221;--terracotta-light:#8F6258;--terracotta-dark:#462117;
  /* Neutros absolutos */
  --white:#FFFFFF;--gray:#B3B3B3;

  /* ---- Aliases semânticos: superfícies ---- */
  --surface-app:#F4F4EF;         /* fundo da aplicação */
  --surface-card:#FFFFFF;        /* card padrão */
  --surface-sunken:#E7E7DB;      /* faixas, cabeçalhos de tabela, zebra forte */
  --surface-nav:#383F41;         /* navegação lateral fixa */
  --surface-nav-active:#505B5E;
  --surface-row-alt:rgba(231,231,219,.45); /* zebra de tabela densa */
  --surface-hover:rgba(80,91,94,.06);
  --surface-selected:rgba(80,91,94,.10);

  /* ---- Texto ---- */
  --text-strong:#383F41;         /* títulos, números protagonistas */
  --text-body:#505B5E;           /* texto e dado neutro */
  --text-muted:#A4A499;          /* rótulos, comparações discretas */
  --text-disabled:#B3B3B3;
  --text-on-dark:#FFFFFF;
  --text-on-dark-muted:rgba(255,255,255,.62);

  /* ---- Semântica de dados (regra rígida) ---- */
  --data-negative:#683221;       /* + sempre entre parênteses: (1.234,56) */
  --data-negative-soft:#8F6258;
  --data-positive:#5E6858;
  --data-neutral:#505B5E;
  --data-projected:#A4A499;      /* tendência / a realizar */
  --data-assumption:#806759;     /* premissa (areia escura) */

  /* ---- Gráficos: linhas e barras sóbrias, máx. 4 séries ---- */
  --chart-1:#505B5E;--chart-2:#8D9E7F;--chart-3:#BDA990;--chart-4:#A4A499;
  --chart-grid:rgba(80,91,94,.12);--chart-axis:#A4A499;

  /* ---- Foco e seleção ---- */
  --focus-ring:0 0 0 2px rgba(80,91,94,.35);
  --selection-bg:rgba(189,169,144,.35);
}

/* ==== typography.css ====================================================== */
/* Tipografia da UI: uma única família — Poppins.
   Títulos de tela e de seção: Poppins Light em CAIXA ALTA com tracking generoso.
   Panoragraf NÃO entra nas telas do sistema: fica reservada a documentos de marca
   (capas de PDF, relatório de investidor, memória de cálculo). */
:root{
  --font-ui:"Poppins",system-ui,"Segoe UI",sans-serif;
  /* Títulos da UI */
  --font-title:"Poppins",system-ui,"Segoe UI",sans-serif;
  /* Documentos de marca apenas — nunca em tela de sistema */
  --font-display:"Panoragraf","Poppins",system-ui,sans-serif;
  /* Apenas valores numéricos — nunca texto, rótulo ou título */
  --font-numeric:"Inter","Poppins",system-ui,sans-serif;

  --weight-light:300;--weight-regular:400;

  /* Escala — ERP denso: corpo pequeno, número grande */
  --text-kpi:34px;         /* número protagonista da faixa de KPIs */
  --text-kpi-sm:26px;
  --text-display:32px;     /* capas, títulos de documento */
  --text-title:22px;       /* título de tela */
  --text-section:15px;     /* título de card */
  --text-size-body:13px;   /* UI e texto corrente */
  --text-table:12.5px;     /* célula de tabela densa */
  --text-small:11.5px;     /* apoio, comparação de período */
  --text-micro:10.5px;     /* rótulo caixa alta */

  --leading-tight:1.15;--leading-snug:1.35;--leading-normal:1.55;

  --tracking-title:.14em; /* título de tela, caixa alta */
  --tracking-title-sm:.10em; /* título de card, caixa alta */
  --tracking-display:.01em;  /* Panoragraf, documentos de marca */
  --tracking-label:.09em;  /* rótulos caixa alta */
  --tracking-tight:-.01em; /* números grandes */

  /* Algarismos tabulares — obrigatório em qualquer coluna de dinheiro */
  --numeric-tabular:"tnum" 1,"lnum" 1; /* @kind font */
}
.lx-tabular,[data-tabular]{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:var(--numeric-tabular)}
.lx-label{font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);font-weight:var(--weight-regular)}
.lx-display{font-family:var(--font-display);font-weight:var(--weight-light);letter-spacing:var(--tracking-display)}
.lx-title{font-family:var(--font-title);font-weight:var(--weight-light);text-transform:uppercase;letter-spacing:var(--tracking-title)}

/* ==== spacing.css ========================================================= */
/* O respiro vive na estrutura; a densidade vive dentro das tabelas. */
:root{
  --space-0:0;--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;
  --space-5:12px;--space-6:16px;--space-7:20px;--space-8:24px;
  --space-9:32px;--space-10:40px;--space-11:56px;--space-12:72px;

  /* Estrutura (generosa) */
  --page-padding-x:32px;--page-padding-y:24px;
  --block-gap:24px;          /* entre cards/blocos */
  --card-padding:20px;
  --card-padding-tight:16px;

  /* Densidade (apertada, só dentro de tabelas) */
  --cell-padding-y:5px;--cell-padding-x:10px;
  --row-height:28px;
  --indent-step:16px;        /* um nível de hierarquia do DRE */

  /* Cromo fixo */
  --nav-width:216px;--nav-width-collapsed:56px;
  --topbar-height:56px;
  --kpi-strip-gap:16px;
}

/* ==== borders.css ========================================================= */
/* Fronteira suave: borda sutil OU sombra leve — nunca as duas. */
:root{
  --radius-xs:2px;--radius-sm:3px;--radius-md:5px;--radius-lg:8px;--radius-pill:999px;
  --border-color:rgba(80,91,94,.14);
  --border-color-strong:rgba(80,91,94,.24);
  --border-color-on-dark:rgba(255,255,255,.12);
  --border:1px solid var(--border-color);
  --border-strong:1px solid var(--border-color-strong);
  --border-width:1px;
}

/* ==== elevation.css ======================================================= */
/* Sombras derivadas da primária escura — nunca preto puro.
   Um card usa borda OU sombra. */
:root{
  --shadow-card:0 1px 2px rgba(56,63,65,.05),0 2px 10px rgba(56,63,65,.04);
  --shadow-raised:0 2px 6px rgba(56,63,65,.07),0 8px 24px rgba(56,63,65,.06);
  --shadow-popover:0 6px 28px rgba(56,63,65,.14);
  --shadow-sticky-col:6px 0 8px -6px rgba(56,63,65,.12); /* primeira coluna congelada */
  --shadow-none:none;

  /* Animação: discreta, sem bounce. */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --duration-instant:80ms; /* @kind other */ --duration-fast:140ms; /* @kind other */ --duration-slow:240ms; /* @kind other */
  --transition-ui:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);
}

/* ==== density.css ========================================================= */
/* Três linguagens sobre a mesma identidade.
   Mesma paleta, mesma tipografia, mesmos componentes: muda densidade e acabamento.
   Aplique no elemento raiz da tela: <div data-density="densa"> */
[data-density="densa"]{
  --row-height:26px;--cell-padding-y:4px;--cell-padding-x:8px;
  --text-table:12px;--card-padding:16px;--block-gap:16px;
  --page-padding-x:24px;--page-padding-y:18px;
}
[data-density="produtiva"]{
  --row-height:30px;--cell-padding-y:6px;--cell-padding-x:10px;
  --text-table:12.5px;--card-padding:16px;--block-gap:16px;
  --page-padding-x:20px;--page-padding-y:16px;
}
[data-density="polida"]{
  --row-height:38px;--cell-padding-y:10px;--cell-padding-x:14px;
  --text-table:13px;--card-padding:28px;--block-gap:32px;
  --page-padding-x:48px;--page-padding-y:36px;
}

/* ==== base.css ============================================================ */
/* Reset mínimo e defaults do sistema. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--surface-app);color:var(--text-body);font-family:var(--font-ui);font-weight:var(--weight-regular);font-size:var(--text-size-body);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-title);font-weight:var(--weight-light);color:var(--text-strong);text-transform:uppercase;letter-spacing:var(--tracking-title);margin:0;line-height:var(--leading-tight)}
h2,h3,h4{letter-spacing:var(--tracking-title-sm)}
h1{font-size:var(--text-title)}h2{font-size:var(--text-section)}h3{font-size:var(--text-size-body)}
p{margin:0 0 var(--space-5)}
a{color:var(--primary);text-decoration:none;border-bottom:1px solid rgba(80,91,94,.28);transition:var(--transition-ui)}
a:hover{color:var(--primary-dark);border-bottom-color:var(--primary-dark)}
a:active{color:var(--primary-dark)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
::selection{background:var(--selection-bg)}
table{border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:var(--numeric-tabular)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}