/*
  Obra Target — Design Tokens
  Paleta de engenharia/canteiro de obras: azul "projeto" (blueprint/aço estrutural),
  laranja de segurança (colete/sinalização), cinza concreto. Sobrescreve as variáveis
  CSS nativas do Bootstrap 5.3 (--bs-*) em vez de recompilar o Sass — todo componente
  Bootstrap (botões, badges, links, bordas) herda a paleta automaticamente.
*/

:root {
  /* ---- paleta nomeada ---------------------------------------------- */
  --ot-ink: #14202b;          /* texto principal — tinta de prancheta */
  --ot-steel-900: #12374f;    /* azul aço escuro — hover/pressed */
  --ot-steel-700: #1b4f72;    /* azul aço — cor primária */
  --ot-steel-300: #6f93ab;    /* azul aço claro — ícones inativos, hairlines em dark rail */
  --ot-safety-600: #cf5f00;   /* laranja de segurança escuro — texto sobre claro */
  --ot-safety-500: #e8720c;   /* laranja de segurança — accent/assinatura */
  --ot-concrete-50: #f5f4f1;  /* fundo de página — concreto claro, não branco puro */
  --ot-concrete-100: #e9e7e1; /* bordas, divisores */
  --ot-concrete-200: #d8d5cc; /* bordas mais fortes, hairlines de tabela */
  --ot-slate-600: #5b6b76;    /* texto secundário — aço intemperizado */
  --ot-slate-400: #8b98a1;    /* texto terciário, placeholders */
  --ot-success: #2e7d46;
  --ot-warning: #c98a00;
  --ot-danger: #b3261e;
  --ot-info: #2f6f8f;

  /* ---- superfície escura elevada (banners/alertas sobre página clara) ---
     Achado ao padronizar: existiam 3 tons de "texto claro sobre fundo escuro"
     quase idênticos (#eef2f4 no sidebar, #d7dee2 no link de nav, mesmo
     #eef2f4 repetido no banner de bloqueio) e um fundo (#1c2b38) só um pouco
     diferente de --ot-ink, todos direto em hex — unificados em dois tokens. */
  --ot-navy-900: #1c2b38;  /* fundo de superfície escura elevada (ex.: banner de obra travada) */
  --ot-mist-200: #eef2f4;  /* texto/ícone claro sobre --ot-ink ou --ot-navy-900 */

  /* ---- status de fluxo (usado pela barra lateral / rail) ------------ */
  --ot-status-draft: var(--ot-slate-400);
  --ot-status-pending: var(--ot-safety-500);
  --ot-status-approved: var(--ot-success);
  --ot-status-rejected: var(--ot-danger);
  --ot-status-locked: var(--ot-steel-900);

  /* ---- tipografia ---------------------------------------------------*/
  --ot-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ot-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ot-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- escala de tamanho de fonte -------------------------------------
     Achado ao padronizar: ~40 valores de font-size em app.css, quase todos
     diferentes por centésimos de rem sem nenhum motivo (0.74/0.76/0.78/0.8,
     0.82/0.85/0.86 etc.) — nunca foi uma escala, só cresceu ad-hoc rodada a
     rodada. Consolidado em 9 degraus nomeados; todo componente novo deve
     escolher um destes, nunca escrever um rem solto. Ver ui-patterns.html,
     seção "Tipografia e cores". */
  --ot-fs-2xs: 0.68rem;    /* rótulo micro (grupo de nav, unidade de métrica) */
  --ot-fs-xs: 0.72rem;     /* eyebrow, cabeçalho de tabela, rótulo em caixa alta */
  --ot-fs-sm: 0.78rem;     /* texto secundário/meta — o "pequeno" padrão do projeto */
  --ot-fs-sm-alt: 0.82rem; /* secundário com mais peso (toast, meta de card) */
  --ot-fs-base: 0.9rem;    /* texto de UI padrão — rótulo de formulário, item de nav */
  --ot-fs-md: 1rem;        /* leitura normal — ícone em tamanho natural, texto corrido */
  --ot-fs-lg: 1.05rem;     /* subtítulo — cabeçalho de painel, marca, título de tela */
  --ot-fs-xl: 1.15rem;     /* ícone/destaque um degrau acima (alertas, toasts) */
  --ot-fs-display: 2rem;   /* número grande — métrica de dashboard, assinatura desenhada */

  /* ---- Bootstrap overrides (5.3 CSS-variable theming) --------------- */
  --bs-body-font-family: var(--ot-font-body);
  --bs-body-bg: var(--ot-concrete-50);
  --bs-body-color: var(--ot-ink);
  --bs-border-color: var(--ot-concrete-100);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.35rem;
  --bs-border-radius-lg: 0.75rem;

  --bs-primary: var(--ot-steel-700);
  --bs-primary-rgb: 27, 79, 114;
  --bs-primary-text-emphasis: var(--ot-steel-900);
  --bs-primary-bg-subtle: #e4edf3;
  --bs-primary-border-subtle: #bcd2e0;

  --bs-secondary: var(--ot-slate-600);
  --bs-secondary-rgb: 91, 107, 118;

  --bs-success: var(--ot-success);
  --bs-success-rgb: 46, 125, 70;
  --bs-success-bg-subtle: #e5f2e8;
  --bs-success-border-subtle: #bfe0c8;

  --bs-warning: var(--ot-warning);
  --bs-warning-rgb: 201, 138, 0;
  --bs-warning-bg-subtle: #fbeed1;
  --bs-warning-border-subtle: #f0d69f;

  --bs-danger: var(--ot-danger);
  --bs-danger-rgb: 179, 38, 30;
  --bs-danger-bg-subtle: #f8e0de;
  --bs-danger-border-subtle: #edb8b3;

  --bs-info: var(--ot-info);
  --bs-info-rgb: 47, 111, 143;
  --bs-info-bg-subtle: #e2eef2;

  --bs-light: var(--ot-concrete-50);
  --bs-light-rgb: 245, 244, 241;
  --bs-dark: var(--ot-ink);
  --bs-dark-rgb: 20, 32, 43;

  --bs-link-color: var(--ot-steel-700);
  --bs-link-color-rgb: 27, 79, 114;
  --bs-link-hover-color: var(--ot-steel-900);
  --bs-link-hover-color-rgb: 18, 55, 79;

  --bs-focus-ring-color: rgba(232, 114, 12, 0.45);
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ot-font-body);
  color: var(--ot-ink);
}

h1, h2, h3, h4, h5, h6,
.ot-display {
  font-family: var(--ot-font-display);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ot-ink);
}

.ot-mono {
  font-family: var(--ot-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Foco de teclado visível (piso de acessibilidade) — só onde o elemento NÃO já tem um
   foco nativo decente. `.form-control`/`.form-select` ficam de fora de propósito: o
   Bootstrap já dá anel + brilho na cor da marca (--bs-primary) nesses campos; duplicar
   com este contorno laranja por cima só empilha dois efeitos brigando (achado real,
   ver captura de tela do formulário de perfil). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ot-safety-500);
  outline-offset: 2px;
}

/* Campos de formulário: substitui o azul genérico do Bootstrap pelo laranja de
   assinatura do projeto — um único anel de foco, não dois empilhados. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--ot-safety-500);
  box-shadow: 0 0 0 0.25rem rgba(232, 114, 12, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}