/* San Francisco Pro Fonts (SF Pro) - Regular Typography */

@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Regular'), local('SF Pro Display'), local('SF-Pro-Display-Regular'),
       url('/static/fonts/SF-Pro-Display-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Text';
  src: local('SF Pro Text Regular'), local('SF Pro Text'), local('SF-Pro-Text-Regular'),
       url('/static/fonts/SF-Pro-Text-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro';
  src: local('SF Pro Regular'), local('SF Pro'), local('SF-Pro-Regular'),
       url('/static/fonts/SF-Pro.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--font-sans);

  /* 70-20-10 Color System Tokens */
  /* 70% Cinza Atual (Superfícies & Fundos Escuros) */
  --bg: #100e13;
  --panel: rgba(23, 20, 27, 0.88);
  --panel-solid: #16131a;
  --surface: #1d1923;
  --surface-hover: #241f2c;
  --border-subtle: rgba(255, 255, 255, 0.08);

  /* 20% Branco (Contraste, Bordas, Tipografia e Acentos) */
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.70);
  --text-muted: rgba(255, 255, 255, 0.45);
  --text-faint: rgba(255, 255, 255, 0.28);
  --text: var(--text-primary);
  --muted: var(--text-muted);

  /* 10% Vermelho Atual (Ações, Destaques Críticos e CTAs) */
  --red: #f13e58;
  --red-dark: #ce2847;
  --red-glow: rgba(241, 62, 88, 0.22);
  --red-soft: rgba(241, 62, 88, 0.14);
}

/* Forçar peso Regular (400) em todo o sistema */
*, *::before, *::after,
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
strong, b, th, td, label, dt, dd,
.btn, .badge, .status {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
}

/* Regra de Ouro: NUNCA adicionar cor ao texto.
   Apenas trabalhar com opacidade, tom e sobretom (Branco em tons/sobretons). */
body, p, span, li, a, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, strong, b, em, label, small, td, th {
  color: var(--text-primary);
}

/* Hierarquia visual através de tons e sobretons brancos */
h1, h2, h3, h4, strong, b, .text-destaque {
  color: var(--text-primary) !important;
}

p, .text-secondary, .hero-lead, .lead, .subtitle {
  color: var(--text-secondary) !important;
}

.muted, small, label, .small, .hint, .text-muted, .breadcrumb span, figcaption {
  color: var(--text-muted) !important;
}

/* Ênfases (em): sem cor avermelhada/rosa, sempre branco nítido com destaque por brilho/tom */
em {
  font-style: normal !important;
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}

/* Badges, tags e etiquetas: fundo suave, texto neutro */
.badge, .eyebrow, .studio-kicker, .tag, .stat small, .format-tag, .photo-status, .wallet-pill, .status {
  color: var(--text-secondary) !important;
}

.badge strong, .eyebrow strong, .wallet-pill strong, .stat strong {
  color: var(--text-primary) !important;
}

/* Nav & abas ativas */
.nav button.active, .tabs button.active {
  color: #ffffff !important;
}

.nav button, .tabs button {
  color: var(--text-secondary) !important;
}

/* Botões */
.btn {
  color: var(--text-primary) !important;
}
.btn.primary {
  color: #ffffff !important;
}
.btn.subtle, .text-button {
  color: var(--text-secondary) !important;
}
.btn.subtle:hover, .text-button:hover {
  color: var(--text-primary) !important;
}

/* Links */
a {
  color: inherit;
}
a:hover {
  color: var(--text-primary) !important;
}

/* Citações e valores */
.quote-bar strong, .quote-bar span, .module-card-price, .plan .amount, .plan-credits, .tool-info small, .tool-info strong {
  color: var(--text-primary) !important;
}