/* Identidade Visual VIP: Fundo Preto Profundo, Ouro/Laranja Radiante e Tipografia Arredondada Fredoka/Nunito */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,600;0,700;0,800;0,900;1,800;1,900&display=swap');

:root {
  /* Cores extraídas diretamente da imagem de referência: Preto profundo + Ouro/Laranja VIP + Branco puro */
  --vip-gold: #FFB800;
  --vip-gold-light: #FFD200;
  --vip-orange: #FF7A00;
  --vip-amber: #FFA500;
  --vip-white: #FFFFFF;
  --vip-black: #000000;
  --vip-surface: #0a0a0d;
  --vip-surface-2: #141418;

  /* Mapeamento de compatibilidade: Cian e Roxo agora são Ouro e Laranja VIP */
  --brand-cyan: #FFB800;
  --brand-purple: #FF7A00;
  --brand-gold: #FFB800;
  --brand-gold-glow: #FFA000;
  --brand-white: #FFFFFF;
  --brand-background: #000000;
  --brand-surface: #0a0a0d;
  --brand-surface-2: #141418;

  /* HSL Theme Variables (Tailwind) */
  --background: 0 0% 0%; /* Fundo 100% preto profundo */
  --foreground: 0 0% 100%; /* Branco puro como "VEJA O QUE TEM" */

  --card: 0 0% 4%; /* Cartões pretos profundos */
  --card-foreground: 0 0% 100%;

  --popover: 0 0% 4%;
  --popover-foreground: 0 0% 100%;

  /* Destaque principal: Ouro VIP (#FFB800) */
  --primary: 43.5 100% 50%;
  --primary-foreground: 0 0% 0%;

  /* Destaque secundário: Laranja VIP (#FF7A00) */
  --secondary: 28.7 100% 50%;
  --secondary-foreground: 0 0% 100%;

  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 75%;

  --accent: 43.5 100% 50%;
  --accent-foreground: 0 0% 0%;

  --border: 0 0% 16%;
  --input: 0 0% 16%;
  --ring: 43.5 100% 50%;

  /* Barra lateral */
  --sidebar-background: 0 0% 2%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 43.5 100% 50%;
  --sidebar-primary-foreground: 0 0% 0%;
  --sidebar-accent: 0 0% 8%;
  --sidebar-accent-foreground: 43.5 100% 50%;
  --sidebar-border: 0 0% 14%;
  --sidebar-ring: 43.5 100% 50%;

  /* Gradientes VIP (inspirados em "NO VIP:") */
  --gradient-cyber: linear-gradient(135deg, #FFD200 0%, #FF7A00 100%);
  --gradient-gold: linear-gradient(135deg, #FFD200 0%, #FF7A00 100%);
  --gradient-card: linear-gradient(135deg, #0a0a0d 0%, #16161c 100%);
  --glow-cyan: 0 0 25px rgba(255, 184, 0, 0.4);
  --glow-purple: 0 0 25px rgba(255, 122, 0, 0.4);
  color-scheme: dark;
}

/* =========================================================
   TIPOGRAFIA COMPLETA: FONTE ARREDONDADA E ENCORPADA (DA IMAGEM)
   ========================================================= */
html,
body,
#root,
.font-sans,
input,
button,
select,
textarea,
div,
p,
span,
a,
label {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif !important;
}

body {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Títulos idênticos ao estilo "VEJA O QUE TEM NO VIP:" */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Fredoka', 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

h1 {
  font-size: 2rem;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

.font-bold,
.font-extrabold,
.font-black {
  font-family: 'Fredoka', 'Nunito', sans-serif !important;
  font-weight: 700 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

/* Fundo da aplicação */
#root,
main,
aside,
header,
nav {
  background-color: #000000 !important;
}

/* Efeito de seleção dourado VIP */
::selection {
  background: rgba(255, 184, 0, 0.4);
  color: #FFFFFF;
}

/* =========================================================
   SUBSTITUIÇÃO DE CORES: CIAN E ROXO VIRAM OURO E LARANJA VIP
   ========================================================= */
.text-cyan {
  color: #FFB800 !important;
}

.border-cyan {
  border-color: #FFB800 !important;
}

.border-cyan\/30,
.border-cyan\/40 {
  border-color: rgba(255, 184, 0, 0.35) !important;
}

.bg-cyan\/10 {
  background-color: rgba(255, 184, 0, 0.12) !important;
}

.bg-cyan\/20 {
  background-color: rgba(255, 184, 0, 0.22) !important;
}

.from-cyan,
.from-cyan\/20 {
  --tw-gradient-from: #FFD200 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 210, 0, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-cyan,
.to-cyan\/10 {
  --tw-gradient-to: #FFB800 var(--tw-gradient-to-position) !important;
}

.from-purple,
.from-purple\/20 {
  --tw-gradient-from: #FF8A00 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 138, 0, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-purple,
.to-purple\/20,
.to-purple\/50 {
  --tw-gradient-to: #FF5500 var(--tw-gradient-to-position) !important;
}

.text-purple {
  color: #FF7A00 !important;
}

.border-purple {
  border-color: #FF7A00 !important;
}

.bg-purple {
  background-color: #FF7A00 !important;
}

/* Destaque em texto VIP */
.text-gold,
.text-vip {
  color: #FFB800 !important;
}

/* Badges e ícones em degradê VIP */
.bg-gradient-to-r,
.bg-gradient-to-br {
  border-color: rgba(255, 184, 0, 0.25);
}

/* Botões primários estilizados no degradê ouro/laranja VIP */
button[class*="bg-primary"],
button[class*="from-primary"],
button[class*="from-cyan"] {
  background: linear-gradient(135deg, #FFB800 0%, #FF7A00 100%) !important;
  color: #000000 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 0 15px rgba(255, 184, 0, 0.35) !important;
}