/* ============================================================
   PRUMO — Design System v1 — tokens globais
   Estética: prancheta técnica. Hairlines, papel, tipografia
   editorial. Nada de gradientes, glassmorphism ou radius inflado.
   Temas por perfil: .theme-arq | .theme-eng | .theme-obra
   ============================================================ */

:root {
  /* Escala tipográfica */
  --f-display: "Fraunces", Georgia, serif;
  --f-ui: "Inter", -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px;
  --fs-lg: 17px; --fs-xl: 24px; --fs-2xl: 34px; --fs-3xl: 46px;

  --r: 3px;               /* radius contido, arquitetônico */
  --border-w: 1px;        /* espessura dos traços estruturais (card/botão/campo/divisórias) */
  --fw-ui: 400;           /* peso base do texto de interface (não-display) */
  --side-w: 216px;
  --pad: 28px;

  /* Semânticos (iguais nos 3 temas) — ajustados p/ WCAG AA em texto 10px */
  --ok: #3F6B4D; --ok-bg: #EAF2ED;      /* 5,5:1 sobre ok-bg */
  --warn: #8A6414; --warn-bg: #F7EFDC;  /* 4,6:1 sobre warn-bg */
  --bad: #AE3E2B; --bad-bg: #F7E7E3;    /* 5,0:1 sobre bad-bg */
}

/* ---------- TEMA: ARQUITETURA (default) — papel quente, terracota, serif presente ---------- */
.theme-arq {
  --paper: #FAF7F1;         /* fundo geral: papel manteiga */
  --surface: #FFFFFF;
  --surface-2: #F4EFE6;
  --ink: #211E19;
  --ink-2: #6E6659;
  --ink-3: #766D5C;         /* 4,9:1 sobre paper — AA p/ rótulos pequenos */
  --line: #E4DDCE;          /* hairline */
  --line-strong: #C9BFAC;
  --accent: #A9502F;        /* terracota — 5,1:1 sobre paper */
  --accent-soft: #F3E4DD;
  --accent-ink: #FFFFFF;
  --grid-dot: #E9E2D3;
  --display-weight: 500;
}

/* ---------- TEMA: ENGENHARIA — papel frio, azul aço, precisão de "painel de instrumento":
   sem serifada nos títulos (troca --f-display por --f-ui) e cantos retos (--r: 0). ---------- */
.theme-eng {
  --paper: #F5F7F8;
  --surface: #FFFFFF;
  --surface-2: #EDF1F3;
  --ink: #1A222A;
  --ink-2: #5C6B77;
  --ink-3: #61707A;         /* 4,8:1 sobre paper */
  --line: #DCE3E8;
  --line-strong: #B8C4CC;
  --accent: #2B5C86;        /* azul aço / blueprint */
  --accent-soft: #E2EBF2;
  --accent-ink: #FFFFFF;
  --grid-dot: #E2E9ED;
  --display-weight: 450;
  --f-display: var(--f-ui); /* títulos em Inter, não Fraunces — "painel de instrumento" */
  --r: 0px;                  /* cantos retos, precisão de desenho técnico */
}

/* ---------- TEMA: CONSTRUÇÃO — grafite, âmbar de sinalização, legibilidade de campo/tablet:
   tudo um pouco maior, peso mais forte, traços estruturais mais grossos. ---------- */
.theme-obra {
  --paper: #F7F6F4;
  --surface: #FFFFFF;
  --surface-2: #EFEDE9;
  --ink: #22211E;
  --ink-2: #6B685F;
  --ink-3: #6F6B60;         /* 4,9:1 sobre paper */
  --line: #E2DFD8;
  --line-strong: #C5C1B6;
  --accent: #9A6A15;        /* âmbar queimado */
  --accent-soft: #F2E8D4;
  --accent-ink: #FFFFFF;
  --grid-dot: #E8E5DE;
  --display-weight: 600;
  --fw-ui: 500;
  --border-w: 2px;
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px;
  --fs-lg: 18px; --fs-xl: 25px; --fs-2xl: 36px; --fs-3xl: 47px;
}

/* ============ BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 100%; }
body {
  font-family: var(--f-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Navegação por teclado — anel de foco visível em qualquer interativo */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r);
}

/* Papel milimetrado sutil (textura de prancheta) */
.blueprint-bg {
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ============ TIPOGRAFIA DE PÁGINA ============ */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; gap: 16px; }
h1.page-title {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -.01em;
}
/* FocusOnNavigate (App.razor) foca este h1 em toda navegação pra leitor de tela — mantém o
   foco funcional, só esconde o anel visual, que confundia quem vê a tela achando que é
   estilo do layout (h1 não é clicável, não deveria parecer). */
h1.page-title:focus-visible {
  outline: none;
}
.page-sub { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 6px; max-width: 60ch; }
.kicker {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px; display: block;
}
h2.sec {
  font-family: var(--f-display); font-weight: var(--display-weight);
  font-size: var(--fs-xl); margin: 34px 0 14px;
}
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ============ GRID UTILITÁRIO ============ */
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g23 { grid-template-columns: 2fr 1fr; }
.g32 { grid-template-columns: 1fr 2fr; }
@media (max-width: 1000px) { .g2,.g3,.g4,.g23,.g32 { grid-template-columns: 1fr; } }

/* Print-friendly (shell + ações não impressas). !important necessário: layout.css/topbar.css
   carregam depois de global.css e setam display sem media query nenhuma — mesma especificidade,
   ordem de carga venceria e a regra de print nunca aplicaria sem isso. */
@media print {
  .side, .topbar-actions, .theme-pick { display: none !important; }
  .main { margin: 0 !important; }
  /* Genérica — qualquer tela que queira esconder algo específico do print (filtros, ações de
     linha) sem afetar a regra global acima marca o elemento com essa classe. */
  .print-hide { display: none !important; }
}