/* =============================================================================
   SGAU — Tokens e base
   Fonte única de variáveis. Tema v4: grafite/branco, sem acento colorido.

   Hierarquia de CSS:
     site.css (tokens) → design-system.css (componentes)
     → CSS de área (auth, home, admin…) → dark-theme-overrides (Bootstrap)

   Código novo: usar só tokens semânticos (--bg, --surface-*, --text-*,
   --brand, --border-*, --r-*, --glass-*, --green/--amber/--blue/--red).
   Aliases legados (--bg-primary, --btn-primary…) existem só por compat.
   ============================================================================= */

/* ─── Tema claro ─── */
:root {
  /* Superfícies */
  --bg: #FFFFFF;
  --surface-1: #FFFFFF;
  --surface-2: #F6F6F5;
  --surface-3: #EEEEEC;

  /* Texto */
  --text-1: #0B0B0A;
  --text-2: #6E6E6B;
  --text-3: #9B9B97;
  --text-inv: #FFFFFF;

  /* Bordas */
  --border-1: #E8E8E5;
  --border-2: #D6D6D2;
  --border-3: #D6D6D2;

  /* Acento (grafite — sem cor de marca) */
  --brand: #0B0B0A;
  --brand-light: #242422;
  --brand-dark: #0B0B0A;
  --brand-dim: rgba(11, 11, 10, 0.045);
  --brand-mid: rgba(11, 11, 10, 0.10);
  --brand-wash: rgba(11, 11, 10, 0.03);
  --btn-on-primary: #FFFFFF;

  /* Status (cor só no ponto/texto; fundos usam vidro) */
  --green: #3D7A5A;
  --green-dim: rgba(61, 122, 90, 0.08);
  --green-mid: rgba(61, 122, 90, 0.20);
  --amber: #8A6A24;
  --amber-dim: rgba(138, 106, 36, 0.08);
  --amber-mid: rgba(138, 106, 36, 0.20);
  --blue: #4A6280;
  --blue-dim: rgba(74, 98, 128, 0.08);
  --blue-mid: rgba(74, 98, 128, 0.20);
  --red: #A34848;
  --red-dim: rgba(163, 72, 72, 0.08);
  --red-mid: rgba(163, 72, 72, 0.20);

  /* Cores de camada no mapa (alinhadas ao UMap / fontes oficiais) */
  --map-l-sigef: #ee9900;
  --map-l-sigef-reg: #10b981;
  --map-l-car: #FFFF00;
  --map-l-snci: #FFFFFF;
  --map-l-pa: #FF0000;
  --map-l-sel: #00FFFF;
  --map-l-search: #FFD700;
  --map-l-measure: #E8C84A;

  /* Vidro fosco */
  --glass-1: rgba(255, 255, 255, 0.62);
  --glass-2: rgba(255, 255, 255, 0.75);
  --glass-3: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(11, 11, 10, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --blur-1: saturate(180%) blur(8px);
  --blur-2: saturate(180%) blur(16px);
  --blur-3: saturate(190%) blur(28px);
  --scrim: rgba(11, 11, 10, 0.28);

  /* Tipografia */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Raios */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(11, 11, 10, 0.05), 0 10px 30px -14px rgba(11, 11, 10, 0.14);
  --shadow-md: 0 1px 2px rgba(11, 11, 10, 0.05), 0 10px 30px -14px rgba(11, 11, 10, 0.14);
  --shadow-lg: 0 1px 3px rgba(11, 11, 10, 0.06), 0 24px 60px -20px rgba(11, 11, 10, 0.28);
  --shadow-card: var(--shadow-sm);
  --shadow-focus: 0 0 0 3px var(--brand-dim);

  /* Espaçamento / controle */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 40px;
  --control-h: 32px;
  --input-h: 32px;
  --pad: 16px;
  --gap: 12px;

  /* Curvas */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Aliases legados (não usar em código novo) ── */
  --bg-primary: var(--bg);
  --bg-secondary: var(--surface-2);
  --bg-tertiary: var(--surface-3);
  --bg-quaternary: var(--surface-3);
  --bg-surface: var(--surface-1);
  --bg-elevated: var(--surface-3);
  --bg-elevated2: var(--surface-3);
  --bg-overlay: var(--surface-3);

  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  --text-tertiary: var(--text-3);
  --text-muted: var(--text-3);
  --text-disabled: var(--text-3);

  --btn-primary: var(--brand);
  --btn-primary-hover: var(--brand-light);
  --btn-secondary: var(--surface-2);
  --btn-secondary-hover: var(--surface-3);
  --btn-accent: var(--brand);
  --btn-accent-hover: var(--brand-light);
  --btn-accent-muted: var(--text-2);

  --border-color: var(--border-1);
  --border-light: var(--border-1);
  --border-medium: var(--border-2);
  --border-focus: var(--border-2);
  --border-thin: 0.5px;
  --border-normal: 1px;
  --border-thick: 2px;

  --radius-xs: 4px;
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --radius-2xl: var(--r-xl);
  --radius-full: var(--r-pill);

  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-lg);
  --spacing-lg: var(--space-xl);
  --spacing-xl: 32px;
  --spacing-2xl: var(--space-2xl);

  --font-size-title-large: 13px;
  --font-size-title-medium: 12px;
  --font-size-title-small: 11px;
  --font-size-body: 12px;
  --font-size-label: 10px;
  --font-size-caption: 9px;

  --input-height: var(--input-h);
  --button-height: var(--control-h);
  --icon-size-small: 16px;
  --icon-size-medium: 20px;
  --icon-size-large: 24px;

  --shadow-xs: var(--shadow-sm);
  --shadow-color: var(--shadow-md);

  --accent-gold: var(--brand);
  --accent-orange: var(--brand-light);
  --accent-gradient: none;
}

/* ─── Tema escuro ─── */
[data-theme="dark"] {
  --bg: #0A0A0A;
  --surface-1: #101010;
  --surface-2: #161616;
  --surface-3: #1E1E1E;

  --text-1: #F2F2F0;
  --text-2: #8F8F8C;
  --text-3: #63635F;
  --text-inv: #0A0A0A;

  --border-1: #1D1D1D;
  --border-2: #2E2E2E;
  --border-3: #2E2E2E;

  --brand: #F2F2F0;
  --brand-light: #FFFFFF;
  --brand-dark: #F2F2F0;
  --brand-dim: rgba(242, 242, 240, 0.06);
  --brand-mid: rgba(242, 242, 240, 0.14);
  --brand-wash: rgba(242, 242, 240, 0.04);
  --btn-on-primary: #0A0A0A;

  --green: #6FBF93;
  --green-dim: rgba(111, 191, 147, 0.10);
  --green-mid: rgba(111, 191, 147, 0.22);
  --amber: #C9A45C;
  --amber-dim: rgba(201, 164, 92, 0.10);
  --amber-mid: rgba(201, 164, 92, 0.22);
  --blue: #84A3C4;
  --blue-dim: rgba(132, 163, 196, 0.10);
  --blue-mid: rgba(132, 163, 196, 0.22);
  --red: #C97070;
  --red-dim: rgba(201, 112, 112, 0.10);
  --red-mid: rgba(201, 112, 112, 0.22);

  --glass-1: rgba(255, 255, 255, 0.055);
  --glass-2: rgba(16, 16, 16, 0.72);
  --glass-3: rgba(22, 22, 22, 0.82);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.14);
  --scrim: rgba(0, 0, 0, 0.62);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 36px -18px rgba(0, 0, 0, 0.8);
  --shadow-md: var(--shadow-sm);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.6), 0 32px 70px -24px rgba(0, 0, 0, 0.9);
  --shadow-card: var(--shadow-sm);
  --shadow-focus: 0 0 0 3px var(--brand-dim);
}

/* ─── Base ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
  background-color: var(--bg);
  color: var(--text-1);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

body {
  margin: 0;
  margin-bottom: 60px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.006em;
  background-color: var(--bg);
  color: var(--text-1);
}

::selection {
  background: var(--brand-mid);
  color: var(--text-1);
}

:focus-visible {
  outline: 1.5px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-1);
  font-family: var(--font);
  line-height: 1.2;
  margin-top: 0;
}

h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-xl);
}

h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--space-sm);
}

h5 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

h6 {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

p {
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: var(--space-xl);
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}

a:hover {
  color: var(--brand-light);
}

a.btn:hover,
a.btn:focus,
.btn:hover,
.btn:focus {
  text-decoration: none;
}

[data-theme="dark"] a {
  color: var(--text-2);
}

[data-theme="dark"] a:hover {
  color: var(--text-1);
}

.text-muted {
  color: var(--text-3) !important;
}

.text-secondary {
  color: var(--text-2) !important;
}

.text-tertiary {
  color: var(--text-3) !important;
}

code {
  font-family: var(--mono);
  background-color: var(--surface-3);
  color: var(--text-1);
  padding: 0.125rem 0.25rem;
  border-radius: var(--r-sm);
  font-size: 0.875em;
}

pre {
  font-family: var(--mono);
  background-color: var(--surface-3);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: var(--space-xl);
  overflow-x: auto;
  margin-bottom: var(--space-xl);
}

pre code {
  background: transparent;
  padding: 0;
}

/* ─── Theme toggle (flutuante legado) ─── */
.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background-color: var(--brand);
  border: 1px solid var(--border-2);
  color: var(--btn-on-primary);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background 0.16s var(--ease), transform 0.16s var(--ease-out);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background-color: var(--brand-light);
  transform: scale(1.06);
}

.theme-toggle:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.theme-toggle .sun-icon {
  display: flex;
}

.theme-toggle .moon-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle .sun-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: flex;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 768px) {
  .theme-toggle {
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: var(--r-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}