/* ============================================================
   CERVAM Energia — Indicadores DEC e FEC
   tokens.css — variaveis de design (unica fonte de verdade)
   Consumido por todos os arquivos em screens/.
   ============================================================ */

:root {
  /* ---------- Superficies ---------- */
  --surface-page:            #eef1f7;
  --surface-card:            #ffffff;
  --surface-muted:           #f7f9fd; /* fundo de campo de formulario */
  --surface-zebra:           #fbfcfe; /* linha alternada de tabela */
  --surface-accent-soft:     #f4f7fe; /* bloco com acento regulatorio */
  --surface-clean-soft:      #f4faf6; /* bloco com acento sem expurgo */
  --surface-quote:           #e9eef8; /* card de compromisso (painel publico) */
  --surface-sidebar:         #101b57;
  --surface-sidebar-hover:   #1b2a6b;
  --surface-sidebar-active:  #22306e;
  --surface-sidebar-border:  #22306e;

  /* ---------- Bordas ---------- */
  --border-subtle:       #e7ebf5;
  --border-default:      #d8deec;
  --border-input:        #ccd4e6;
  --border-input-clean:  #c3ddcd; /* campo do grupo sem expurgo */
  --border-dashed:       #b9c2e6;

  /* ---------- Texto ---------- */
  --text-primary:         #101b57; /* titulos e numeros */
  --text-body:            #1b2340; /* paragrafo */
  --text-secondary:       #5b6484; /* label, apoio */
  --text-muted:           #9aa3bd; /* placeholder, valor ausente */
  --text-on-dark:         #ffffff;
  --text-on-dark-muted:   #aeb8dd;
  --text-on-dark-faint:   #6b78ae;

  /* ---------- Acentos ---------- */
  --accent-regulatorio:        #1d3fa8; /* indicadores COM expurgo */
  --accent-regulatorio-strong: #101b57;
  --accent-sem-expurgo:        #196b3a; /* indicadores SEM expurgo */
  --accent-sem-expurgo-dark:   #17603a;
  --accent-sem-expurgo-hover:  #14803f;
  --accent-mint:               #8fe0b0; /* destaque sobre fundo navy */

  /* ---------- Estados ---------- */
  --state-error:            #c02020;
  --state-error-text:       #a81b1b;
  --state-error-surface:    #fdecec;
  --state-error-border:     #f2c9c9;
  --state-success:          #196b3a;
  --state-success-text:     #14603a;
  --state-success-surface:  #e8f5ed;
  --state-success-border:   #c3ddcd;
  --state-warning:          #d9a018;
  --state-disabled-bg:      #e7ebf5;
  --state-disabled-text:    #9aa3bd;
  --state-neutral-mark:     #b6bdd2; /* "atende?" sem resposta */

  /* ---------- Tipografia ---------- */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-sans:    "Barlow", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-3xs:  10.5px; /* eixo de grafico */
  --fs-2xs:  11.5px; /* badge, eyebrow */
  --fs-xs:   12.5px; /* label de campo */
  --fs-sm:   13.5px; /* apoio, celula de tabela */
  --fs-base: 14.5px; /* corpo padrao da UI */
  --fs-md:   15.5px; /* paragrafo do painel publico */
  --fs-lg:   17px;
  --fs-xl:   19px;
  --fs-2xl:  22px;   /* numero grande de formulario */
  --fs-3xl:  26px;   /* titulo de secao (admin) */
  --fs-4xl:  30px;   /* numero do card publico */
  --fs-5xl:  42px;   /* linha 1 do titulo publico */
  --fs-6xl:  52px;
  --fs-7xl:  60px;   /* "DEC E FEC" */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.45;
  --lh-loose: 1.55;

  --ls-tight:  .01em;
  --ls-wide:   .04em;
  --ls-wider:  .06em;
  --ls-widest: .16em; /* eyebrow em caixa alta */

  /* ---------- Espacamento (escala 2px) ---------- */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  18px;
  --space-9:  20px;
  --space-10: 22px;
  --space-11: 26px;
  --space-12: 30px;
  --space-13: 36px;
  --space-14: 48px;
  --space-15: 56px;

  /* ---------- Raios ---------- */
  --radius-xs:   7px;
  --radius-sm:   8px;
  --radius-md:   9px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-3xl:  16px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-topbar: 0 1px 3px rgba(16, 27, 87, .05);
  --shadow-card:   0 1px 2px rgba(16, 27, 87, .06);
  --shadow-raised: 0 18px 44px rgba(16, 27, 87, .10);
  --shadow-panel:  0 20px 60px rgba(16, 27, 87, .16);
  --shadow-toast:  0 10px 30px rgba(16, 27, 87, .28);

  /* ---------- Layout ---------- */
  --sidebar-width:      238px;
  --admin-gutter:       30px;
  --public-canvas-width:1520px; /* largura de desenho do painel publico */

  /* ---------- Breakpoints (referencia; CSS nao le var() em @media) ----------
     Use os valores literais nas media queries. */
  --bp-sm:  640px;
  --bp-md:  900px;
  --bp-lg:  1180px;
  --bp-xl:  1440px;
}