/*
 * DS SIMEC — Design Tokens (fonte única)
 * Base: Bootstrap 3 (legado do SIMEC) conforme Figma "Sistema SIMEC Obras".
 *
 * Como consumir fora deste projeto:
 *   <link rel="stylesheet" href="https://<url-publicada>/tokens.css">
 *   ou: @import "https://<url-publicada>/tokens.css";
 *
 * Fonte Inter (obrigatória para quem consome os tokens — a família declarada
 * em --simec-font-family é "Inter"; sem o link abaixo os textos caem no
 * fallback "Helvetica Neue"/Arial). Coloque no <head> da página ou, em
 * TanStack Start, na opção head() da rota raiz:
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
 *
 * Este arquivo é copiado para public/tokens.css (npm run sync:tokens) e um teste
 * garante que as duas cópias são idênticas.
 *
 * Origem dos valores:
 *   [figma] valor lido diretamente do arquivo do Figma
 *   [bs3]   valor padrão do Bootstrap 3 — o Figma não traz esse estado
 */

:root {
  /* ── Base colors - Cores base ─────────────────────────────────────────── */
  --simec-text: #333333; /* [figma] */
  --simec-text-muted: #777777; /* [figma] */
  --simec-text-inverse: #ffffff; /* [figma] */
  --simec-link: #2e6db4; /* [figma] */
  --simec-tab-text: #2e6db4; /* [figma] */
  --simec-text-danger: #d9534f; /* [figma] */
  --simec-text-halted: #e67e22; /* [figma] status "Paralisada" */
  --simec-bg: #ffffff; /* [figma] */
  --simec-bg-surface: #f5f5f5; /* [figma] */
  --simec-bg-hover: #eeeeee; /* [figma] */
  --simec-border: #cccccc; /* [figma] */
  --simec-border-light: #dddddd; /* [figma] */
  --simec-border-focus: #66afe9; /* [figma] */

  /* ── Buttons - Botões (Bootstrap 3: bg / border / hover) ────────── */
  --simec-primary: #2e6db4; /* [figma] */
  --simec-primary-border: #295f9f; /* [figma] */
  --simec-primary-hover: #24558b; /* [figma] */
  --simec-success: #5cb85c; /* [figma] */
  --simec-success-border: #4cae4c; /* [figma] */
  --simec-success-hover: #47a447; /* [figma] */
  --simec-danger: #d9534f; /* [figma] */
  --simec-danger-border: #d43f3a; /* [figma] */
  --simec-danger-hover: #d2322d; /* [figma] */
  --simec-warning: #f0ad4e; /* [figma] */
  --simec-warning-border: #ed9c28; /* [figma] */
  --simec-warning-hover: #ec971f; /* [bs3] */
  --simec-info: #5bc0de; /* [figma] */
  --simec-info-border: #39b3d7; /* [figma] */
  --simec-info-hover: #31b0d5; /* [bs3] */
  --simec-neutral-hover: #ebebeb; /* [figma] botão padrão (branco) em hover */

  /* ── Alerts - Alertas (text: figma / bg and border: bs3) ────────── */
  --simec-alert-success-text: #468847; /* [figma] */
  --simec-alert-success-bg: #dff0d8; /* [bs3] */
  --simec-alert-success-border: #d6e9c6; /* [bs3] */
  --simec-alert-warning-text: #c09853; /* [figma] */
  --simec-alert-warning-bg: #fcf8e3; /* [bs3] */
  --simec-alert-warning-border: #fbeed5; /* [bs3] */
  --simec-alert-danger-text: #b94a48; /* [figma] */
  --simec-alert-danger-bg: #f2dede; /* [bs3] */
  --simec-alert-danger-border: #eed3d7; /* [bs3] */
  --simec-alert-info-text: #3a87ad; /* [bs3] */
  --simec-alert-info-bg: #d9edf7; /* [bs3] */
  --simec-alert-info-border: #bce8f1; /* [bs3] */
  --simec-alert-simec: #e30613; /* [figma] faixa vermelha de aviso */

  /* ── Field states - Estados de campo (has-success / has-warning / has-error) ── */
  --simec-field-success: #3c763d; /* [bs3] */
  --simec-field-warning: #8a6d3b; /* [bs3] */
  --simec-field-error: #a94442; /* [bs3] */
  --simec-field-disabled: #eeeeee; /* [figma] */

  /* ── Table - Tabela legada SIMEC ────────────────────────────────── */
  --simec-table-header: #e6e6e6; /* [figma] */
  --simec-table-label: #dfdfdf; /* [figma] */
  --simec-table-border: #c0c0c0; /* [figma] */
  --simec-table-striped: #f9f9f9; /* [figma] */

  /* ── Page layout - Estrutura da página SIMEC ──────────────────────────── */
  --simec-environment-bar: #0f8f0f; /* [figma] */
  --simec-footer: #000000; /* [figma] */
  --simec-footer-stripe: #5eaf2e; /* [figma] */

  /* ── Status icons - Ícones de situação ─────────────────────────────────── */
  --simec-icon-success: #3c9a3c; /* [figma] */
  --simec-icon-help: #f5c518; /* [figma] */
  --simec-icon-error: #d9534f; /* [figma] */

  /* ── Typography - Tipografia ─────────────────────────────────────────── */
  --simec-font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --simec-font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
  --simec-font-size-sm: 12px; /* [figma] */
  --simec-font-size-base: 14px; /* [bs3] */
  --simec-font-size-md: 16px; /* [figma] título de cartão e do cabeçalho */
  --simec-font-size-lg: 18px; /* [bs3] */
  --simec-font-size-xl: 28px; /* [figma] título da página */
  --simec-font-weight-normal: 400; /* [bs3] */
  --simec-font-weight-bold: 700; /* [bs3] */
  --simec-line-height: 1.428571429; /* [bs3] */
  --simec-line-height-text: 1.5; /* Análise Obras 2.0: blocos de texto descritivos */

  /* ── Spacing - Espaçamentos ───────────────────────────────────────── */
  --simec-space-xs: 4px; /* [figma] */
  --simec-space-sm: 6px; /* [figma] */
  --simec-space-md: 10px; /* [figma] */
  --simec-space-lg: 12px; /* [figma] */
  --simec-space-xl: 15px; /* [figma] */

  /* ── Control heights - Alturas de controles ───────────────────────────────── */
  --simec-button-height-xs: 22px; /* [figma] */
  --simec-button-height-sm: 30px; /* [figma] */
  --simec-button-height: 34px; /* [figma] */
  --simec-button-height-lg: 46px; /* [figma] */
  --simec-input-height-sm: 30px; /* [figma] */
  --simec-input-height: 34px; /* [figma] */
  --simec-input-height-lg: 45px; /* [figma] */
  --simec-table-header-height: 38px; /* [figma] */
  --simec-table-condensed-height: 32px; /* [figma] */

  /* ── Navigation menu - Menu de navegação ──────────────────────────────────── */
  --simec-nav-text-hover: #23527c; /* [bs3] link:hover do Bootstrap 3 */
  --simec-nav-bg-active: #24558b; /* [figma] fundo/primario-ativo (igual ao primário hover) */
  --simec-nav-text-active: #ffffff; /* [figma] texto/inverso */
  --simec-nav-text-disabled: #999999; /* [figma] texto/desabilitado */
  --simec-nav-touch-target: 48px; /* [figma] altura mínima do item no mobile */
  --simec-nav-item-height: 30px; /* [figma] altura do item no desktop (≥ 768px) */
  --simec-nav-indent-sub1: 16px; /* [figma] recuo do submenu1 */
  --simec-nav-indent-sub2: 20px; /* [figma] recuo adicional do submenu2 */

  /* ── Radius and modal - Bordas e modais ────────────────────────────────────── */
  --simec-radius-sm: 3px; /* [bs3] */
  --simec-radius: 4px; /* [bs3] */
  --simec-radius-lg: 6px; /* [bs3] */
  --simec-modal-width: 600px; /* [figma] Modal BS3 */
  --simec-modal-width-lg: 900px; /* [figma] Modal SIMEC (extensão BS3) */

  /* ── Elevation - Elevação e sombras ───────────────────────────────────────── */
  --simec-shadow-inset: inset 0 1px 1px rgba(0, 0, 0, 0.075); /* [bs3] campos de texto */
  --simec-shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.05); /* [bs3] cartões e painéis */
  --simec-shadow-md: 0 6px 12px rgba(0, 0, 0, 0.175); /* [bs3] menus suspensos */
  --simec-shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.5); /* [bs3] modal */

  /* ── Motion - Movimento e transições ──────────────────────────────────────── */
  --simec-duration-fast: 150ms; /* [bs3] hover, foco e cor */
  --simec-duration-normal: 300ms; /* [bs3] abrir e fechar menus e painéis */
  --simec-easing: ease-in-out; /* [bs3] */

  /* ── Grid and breakpoints - Grade e pontos de quebra ──────────────────────── */
  --simec-breakpoint-sm: 768px; /* [bs3] tablet */
  --simec-breakpoint-md: 992px; /* [bs3] notebook */
  --simec-breakpoint-lg: 1200px; /* [bs3] desktop */
  --simec-container-sm: 750px; /* [bs3] largura do container em sm */
  --simec-container-md: 970px; /* [bs3] largura do container em md */
  --simec-container-lg: 1170px; /* [bs3] largura do container em lg */
  --simec-grid-columns: 12; /* [bs3] */
  --simec-grid-gutter: 30px; /* [bs3] 15px de cada lado da coluna */
}