/* TRAMO — design tokens (brand do TMS). Importe uma vez no root da app. */
:root {
  /* Marca */
  --tramo-ink: #242B33;        /* grafite: texto principal, wordmark, sidebar */
  --tramo-ink-600: #4F5860;
  --tramo-ink-500: #6E7883;    /* texto secundário */
  --tramo-accent: #0E7C86;     /* ciano: ação primária, nós do símbolo (fundo claro) */
  --tramo-accent-hover: #0B6670;
  --tramo-accent-light: #3FB8C2; /* ciano claro: nós do símbolo em fundo escuro, estados ativos no dark */
  --tramo-accent-50: #E6F4F5;

  /* Neutros */
  --tramo-surface: #F6F7F8;    /* fundo de página */
  --tramo-surface-card: #FFFFFF;
  --tramo-surface-sunken: #ECEEF1;
  --tramo-border: #DCE0E5;
  --tramo-border-strong: #C2C8D0;
  --tramo-text: #14181D;
  --tramo-text-inverse: #FFFFFF;

  /* Semânticas (status operacional) */
  --tramo-success: #1E7F4F;
  --tramo-warning: #B97709;
  --tramo-danger: #C03221;
  --tramo-info: #0E7C86;

  /* Categoricas: diferenciam CATEGORIA (modalidade, vinculo, papel, tipo) num marcador -- ponto
     ou borda --, nunca no texto e nunca como status. Longe do verde/ambar/vermelho e do ciano. */
  --tramo-cat-1: #2F6BC0;
  --tramo-cat-2: #7A4FB0;
  --tramo-cat-3: #B23A78;
  --tramo-cat-4: #6E7B1F;
  --tramo-cat-5: #8C5A2B;
  --tramo-cat-6: #4A5A8C;

  /* Tipografia */
  --tramo-font-sans: "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tramo-font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Forma */
  --tramo-radius-sm: 4px;   /* botões, inputs */
  --tramo-radius-md: 6px;   /* chips, itens de menu */
  --tramo-radius-lg: 10px;  /* cards, modais */
  --tramo-shadow-sm: 0 1px 2px rgba(36, 43, 51, 0.08);
  --tramo-shadow-md: 0 4px 12px rgba(36, 43, 51, 0.12);
  --tramo-ease: 160ms cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="dark"] {
  --tramo-surface: #14181D;
  --tramo-surface-card: #1C2127;
  --tramo-surface-sunken: #242B33;
  --tramo-border: #39414A;
  --tramo-border-strong: #4F5860;
  --tramo-text: #F3F4F6;
  --tramo-ink-500: #9AA3AE;
  --tramo-accent: #3FB8C2;
  --tramo-accent-hover: #5FC8D0;
  --tramo-accent-50: #163A3E;
  --tramo-cat-1: #6D9BE0;
  --tramo-cat-2: #A585D6;
  --tramo-cat-3: #DA72A8;
  --tramo-cat-4: #A3B04A;
  --tramo-cat-5: #C08A5A;
  --tramo-cat-6: #8494C6;
}