/* 
  APPLE UTILITARIAN DARK MODE OVERRIDE 
  Força o visual luxuoso, minimalista e escuro em cima das classes do Piloto Brooklyn.
*/

:root {
  --bg-main: #3F312B;
  --bg-panel: #352924;
  --bg-card: #2E231F;
  --border-light: rgba(255,255,255,0.1);
  --text-main: #ffffff;
  --text-dim: #888888;
  --accent: #2c2c2c;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}

body {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  font-family: var(--font-sans) !important;
}

/* Sidebar / Topbar Override */
.topbar {
  background-color: var(--bg-panel) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.topbar .brand {
  color: var(--text-main) !important;
}

.topbar nav button {
  color: var(--text-dim) !important;
  font-family: var(--font-sans) !important;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
}

.topbar nav button:hover, .topbar nav button.active {
  color: var(--text-main) !important;
  border-bottom: 2px solid var(--text-main) !important;
}

/* Typography Overrides */
h1, h2, h3, h4, p {
  font-family: var(--font-sans) !important;
}

.section-heading h1 {
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -0.5px !important;
}

/* Cards & Stages */
.feature-card, .side-card, .catalog-item {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.feature-card h2, .feature-card h3 {
  color: var(--text-main) !important;
}

.media-stage {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
}

/* Buttons */
button {
  border-radius: 4px !important;
  font-family: var(--font-sans) !important;
}

button.primary {
  background-color: var(--text-main) !important;
  color: var(--bg-main) !important;
  border: none !important;
  font-weight: 500 !important;
}

/* Inputs & Forms */
input, select, textarea {
  background-color: var(--bg-panel) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 4px !important;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}