/* =====================================================================
   EcoFila · Design System — ecofila-tokens.css
   Tokens de marca extraídos da apresentação "Visão Técnica".
   Importar ANTES de ecofila-components.css.
   ===================================================================== */

/* Fontes: no site, Montserrat e Inter são carregadas pelo <link> do Google Fonts no index.html
   (a pasta assets/fonts do design system não existe aqui). */

:root {
  /* ---------- Cores de marca ---------- */
  --eco:    #6EA339;   /* verde principal — sucesso, destaque, números de cena */
  --fila:   #233976;   /* azul principal — títulos, botões, cartões de chamada */
  --lima:   #8EB931;   /* verde claro — início do gradiente, foco */
  --oceano: #2F7EAF;   /* azul médio — estado "em curso", progresso, diagnóstico */
  --teal:   #137F8B;   /* apoio (uso raro) */
  --cinza:  #707170;   /* texto secundário, legendas, eyebrows */
  --tinta:  #16213F;   /* texto principal, molduras de ecrã */
  --nevoa:  #F3F6F0;   /* fundo de painéis/tiles (NUNCA fundo de página) */
  --branco: #FFFFFF;   /* fundo de página */

  /* ---------- Cores de estado ---------- */
  --ok:        var(--eco);
  --ok-soft:   #EEF5E6;
  --info:      var(--oceano);
  --info-soft: #E8F1F8;
  --warn:      #D6921C;
  --warn-soft: #FDF4E3;
  --warn-text: #9A6410;
  --crit:      #C4473A;
  --crit-soft: #FBEAE8;
  --off:       #9AA0A6;
  --off-soft:  #F1F2F3;
  --ok-text:   #4C7D22;

  /* ---------- Linhas e sombras (sempre tingidas de azul-tinta) ---------- */
  --line:        rgba(35, 57, 118, .10);
  --line-strong: rgba(35, 57, 118, .18);
  --shadow-sm: 0 1px 2px rgba(22, 33, 63, .05), 0 4px 14px rgba(22, 33, 63, .05);
  --shadow-md: 0 2px 4px rgba(22, 33, 63, .04), 0 14px 38px rgba(22, 33, 63, .08);
  --shadow-lg: 0 4px 10px rgba(22, 33, 63, .04), 0 30px 70px rgba(22, 33, 63, .10);

  /* ---------- Gradiente de marca (única assinatura gráfica) ---------- */
  --brand-grad:   linear-gradient(90deg,  var(--lima), var(--eco) 34%, var(--oceano) 68%, var(--fila));
  --brand-grad-v: linear-gradient(180deg, var(--lima), var(--eco) 34%, var(--oceano) 68%, var(--fila));
  --brand-conic:  conic-gradient(var(--lima), var(--eco), var(--oceano), var(--fila), var(--lima));

  /* ---------- Tipografia ---------- */
  --f-head: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;

  /* Escala (palco 1920×1080) */
  --t-display: 52px;  /* título de cena · Montserrat 800 */
  --t-statement: 44px;/* frase de impacto · Montserrat 800 */
  --t-kpi: 36px;      /* número de KPI · Montserrat 800 */
  --t-lead: 32px;     /* frase de abertura/fecho · Inter 500 */
  --t-caption: 29px;  /* legenda · Inter 500 */
  --t-sub: 26px;      /* subtítulo de cena · Inter 400 */
  --t-panel: 25px;    /* título de painel · Montserrat 800 */
  --t-body: 20px;     /* item de lista · Inter 500 */
  --t-chip: 15px;     /* chip/badge · Montserrat 700 CAPS */
  --t-eyebrow: 13px;  /* eyebrow · Montserrat 700 CAPS */
  --t-mono: 13px;     /* dados técnicos · mono */

  --track-caps: .14em;   /* tracking para MAIÚSCULAS (0.12–0.16em) */
  --track-tight: -.01em; /* tracking para títulos grandes */

  /* ---------- Raios ---------- */
  --r-xs: 8px;   /* tags pequenas */
  --r-sm: 12px;  /* linhas, células, passos */
  --r-md: 16px;  /* pílulas de estado, tags */
  --r-lg: 20px;  /* cartões */
  --r-xl: 22px;  /* fotos de pessoas */
  --r-pill: 999px;

  /* ---------- Espaço / grelha ---------- */
  --stage-w: 1920px;
  --stage-h: 1080px;
  --margin-x: 120px;   /* margem lateral do palco */
  --header-top: 84px;  /* topo do cabeçalho de cena */
  --gap: 20px;

  /* ---------- Movimento ---------- */
  --ease-out:    cubic-bezier(.33, 1, .68, 1);      /* outCubic — entrada padrão */
  --ease-inout:  cubic-bezier(.65, 0, .35, 1);      /* inOutCubic — deslocações, desenho */
  --ease-expo:   cubic-bezier(.16, 1, .3, 1);       /* outExpo — barras/linhas */
  --ease-back:   cubic-bezier(.3, 1.6, .5, 1);      /* outBack — pop de checks/badges */
  --dur-fast: .25s;
  --dur-base: .35s;
  --dur-enter: .8s;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}