/* PitSafe — tokens da identidade visual
 * Gerado a partir de brand/tokens.json. Se editar aqui, edite lá também.
 * Uso: @import "brand/tokens.css" antes de qualquer folha de estilo da aplicação.
 */

:root {
  /* ---------- Paleta bruta ---------- */
  --ps-navy-900: #0B1620;
  --ps-navy-800: #132B3D;
  --ps-navy-700: #1D3E56;
  --ps-navy-600: #2A5573;

  --ps-steel-600: #3E5568;
  --ps-steel-500: #5A6E7D;
  --ps-steel-400: #7C8D9A;
  --ps-steel-300: #9AA9B4;
  --ps-steel-200: #C6D0D8;

  --ps-mist-200: #E2E7EB;
  --ps-mist-100: #F1F4F6;
  --ps-mist-50:  #F8FAFB;

  --ps-orange-700: #9A400A;
  --ps-orange-600: #C4530A;
  --ps-orange-500: #F97316;
  --ps-orange-200: #FBC9A0;
  --ps-orange-100: #FEEBDC;

  --ps-white: #FFFFFF;

  /* ---------- Papéis semânticos (use estes na UI, não a paleta bruta) ---------- */
  --ps-brand:           var(--ps-navy-800);
  --ps-brand-strong:    var(--ps-navy-900);
  --ps-accent:          var(--ps-orange-500);
  --ps-accent-hover:    var(--ps-orange-600);
  --ps-accent-subtle:   var(--ps-orange-100);

  --ps-surface-page:    var(--ps-mist-50);
  --ps-surface-card:    var(--ps-white);
  --ps-surface-sunken:  var(--ps-mist-100);
  --ps-surface-inverse: var(--ps-navy-800);

  --ps-text-primary:    var(--ps-navy-800);
  --ps-text-secondary:  var(--ps-steel-500);
  --ps-text-muted:      var(--ps-steel-400);
  --ps-text-inverse:    var(--ps-mist-100);
  --ps-text-on-accent:  var(--ps-white);

  --ps-border:          var(--ps-mist-200);
  --ps-border-strong:   var(--ps-steel-200);
  --ps-focus-ring:      var(--ps-orange-500);

  /* ---------- Feedback ---------- */
  --ps-success-fg: #0E7A4E;  --ps-success-bg: #E4F5EC;  --ps-success-border: #9FD9BE;
  --ps-danger-fg:  #C2342E;  --ps-danger-bg:  #FBEAE9;  --ps-danger-border:  #F0B3B0;
  --ps-warning-fg: #8A5A06;  --ps-warning-bg: #FEF3DC;  --ps-warning-border: #F0CE8C;
  --ps-info-fg:    #175CD3;  --ps-info-bg:    #EAF2FE;  --ps-info-border:    #B4CFF7;

  /* ---------- Status do orçamento ---------- */
  --ps-st-rascunho-fg:    #3E5568;  --ps-st-rascunho-bg:    #EEF1F4;
  --ps-st-enviado-fg:     #175CD3;  --ps-st-enviado-bg:     #EAF2FE;
  --ps-st-aprovado-fg:    #0E7A4E;  --ps-st-aprovado-bg:    #E4F5EC;
  --ps-st-recusado-fg:    #C2342E;  --ps-st-recusado-bg:    #FBEAE9;
  --ps-st-em-execucao-fg: #9A400A;  --ps-st-em-execucao-bg: #FEEBDC;
  --ps-st-concluido-fg:   #132B3D;  --ps-st-concluido-bg:   #E8EDF1;
  --ps-st-cancelado-fg:   #7C8D9A;  --ps-st-cancelado-bg:   #F4F6F7;

  /* ---------- Tipografia ---------- */
  --ps-font-display: Poppins, "Segoe UI", system-ui, sans-serif;
  --ps-font-body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --ps-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --ps-text-xs: 0.75rem;
  --ps-text-sm: 0.875rem;
  --ps-text-base: 1rem;
  --ps-text-lg: 1.125rem;
  --ps-text-xl: 1.375rem;
  --ps-text-2xl: 1.75rem;
  --ps-text-3xl: 2.25rem;

  --ps-leading-tight: 1.2;
  --ps-leading-snug: 1.4;
  --ps-leading-normal: 1.6;

  /* ---------- Espaçamento, raio, sombra ---------- */
  --ps-space-1: 4px;   --ps-space-2: 8px;   --ps-space-3: 12px;  --ps-space-4: 16px;
  --ps-space-5: 24px;  --ps-space-6: 32px;  --ps-space-7: 48px;  --ps-space-8: 64px;

  --ps-radius-sm: 6px;
  --ps-radius-md: 10px;
  --ps-radius-lg: 16px;
  --ps-radius-pill: 999px;

  --ps-shadow-sm: 0 1px 2px rgba(19, 43, 61, 0.06);
  --ps-shadow-md: 0 4px 12px rgba(19, 43, 61, 0.08);
  --ps-shadow-lg: 0 12px 32px rgba(19, 43, 61, 0.12);
}

/* ---------- Primitivas mínimas ---------- */

body {
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-base);
  line-height: var(--ps-leading-normal);
  color: var(--ps-text-primary);
  background: var(--ps-surface-page);
}

h1, h2, h3, h4 {
  font-family: var(--ps-font-display);
  font-weight: 600;
  line-height: var(--ps-leading-tight);
  color: var(--ps-text-primary);
}

/* Anel de foco laranja: única situação em que o acento aparece sem ser CTA. */
:focus-visible {
  outline: 2px solid var(--ps-focus-ring);
  outline-offset: 2px;
}

/* Tabelas de itens de orçamento: números alinhados. */
.ps-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Etiqueta de status. Combine com .ps-status--<status>. */
.ps-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ps-space-2);
  padding: 2px var(--ps-space-3);
  border-radius: var(--ps-radius-pill);
  font-size: var(--ps-text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.ps-status--rascunho    { color: var(--ps-st-rascunho-fg);    background: var(--ps-st-rascunho-bg); }
.ps-status--enviado     { color: var(--ps-st-enviado-fg);     background: var(--ps-st-enviado-bg); }
.ps-status--aprovado    { color: var(--ps-st-aprovado-fg);    background: var(--ps-st-aprovado-bg); }
.ps-status--recusado    { color: var(--ps-st-recusado-fg);    background: var(--ps-st-recusado-bg); }
.ps-status--em-execucao { color: var(--ps-st-em-execucao-fg); background: var(--ps-st-em-execucao-bg); }
.ps-status--concluido   { color: var(--ps-st-concluido-fg);   background: var(--ps-st-concluido-bg); }
.ps-status--cancelado   { color: var(--ps-st-cancelado-fg);   background: var(--ps-st-cancelado-bg); }