/* ==========================================================================
   GO SHAPE — FITNESS INTELLIGENT AI
   Guia Oficial de Cores, Tipografia e Design System
   Paleta: #0056D6 (Azul) | #FF8C00 (Laranja) | #333333 (Grafite) | #F2F2F2 (Cinza)
   Tipografia: Open Sans
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  /* 1. PALETA DE CORES OFICIAL */
  --goshape-blue: #0056D6;           /* Azul Principal: Confiança, tecnologia, desempenho */
  --goshape-blue-light: #00A3FF;     /* Azul Destaque/Ciano */
  --goshape-blue-dark: #0035A0;      /* Azul Profundo */
  --goshape-blue-glow: rgba(0, 86, 214, 0.35);

  --goshape-orange: #FF8C00;         /* Laranja Energia: Motivação, resultados, movimento */
  --goshape-orange-light: #FFA800;   /* Laranja Iluminado */
  --goshape-orange-dark: #E64A00;    /* Laranja Intenso */
  --goshape-orange-glow: rgba(255, 140, 0, 0.35);

  --goshape-graphite: #333333;       /* Grafite: Equilíbrio, profissionalismo, sofisticação */
  --goshape-graphite-dark: #1F242D;  /* Grafite Escuro */
  
  --goshape-gray-light: #F2F2F2;     /* Cinza Suporte: Fundos e elementos neutros */
  --goshape-gray-border: #E5E7EB;    /* Borda neutra clara */
  
  --goshape-bg-dark: #090A0F;        /* Fundo Master Dark */
  --goshape-card-dark: #101422;      /* Card Dark Mode */
  --goshape-border-dark: #1E273E;    /* Borda Dark Mode */
  
  --goshape-text-light: #FFFFFF;
  --goshape-text-muted: #94A3B8;

  /* 2. TIPOGRAFIA OFICIAL */
  --font-primary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* 3. GRADIENTES DA MARCA */
  --gradient-brand-blue: linear-gradient(135deg, #0035A0 0%, #0056D6 50%, #00A3FF 100%);
  --gradient-brand-orange: linear-gradient(135deg, #FF8C00 0%, #FFA800 100%);
  --gradient-diagonal-duo: linear-gradient(135deg, #0056D6 0%, #00A3FF 60%, #FF8C00 100%);
  --gradient-card-dark: linear-gradient(180deg, #12182B 0%, #0A0E1A 100%);

  /* 4. SOMBRAS & PROFUNDIDADE */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 86, 214, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 86, 214, 0.18);
  --shadow-glow-blue: 0 0 24px rgba(0, 86, 214, 0.45);
  --shadow-glow-orange: 0 0 24px rgba(255, 140, 0, 0.45);

  /* 5. RAIOS DE BORDA */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

/* ==========================================================================
   TIPOGRAFIA & HIERARQUIA
   ========================================================================== */
body {
  font-family: var(--font-primary);
  color: var(--goshape-graphite);
  background-color: var(--goshape-bg-dark);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0;
}

.font-light     { font-weight: 300; }
.font-regular   { font-weight: 400; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* ==========================================================================
   UTILITÁRIOS DE MARCA (BRAND UTILITIES)
   ========================================================================== */
.text-goshape-blue    { color: var(--goshape-blue); }
.text-goshape-orange  { color: var(--goshape-orange); }
.text-goshape-graphite{ color: var(--goshape-graphite); }
.text-goshape-muted   { color: var(--goshape-text-muted); }

.bg-goshape-blue      { background-color: var(--goshape-blue); }
.bg-goshape-orange    { background-color: var(--goshape-orange); }
.bg-goshape-graphite  { background-color: var(--goshape-graphite); }
.bg-goshape-dark      { background-color: var(--goshape-bg-dark); }
.bg-goshape-card      { background-color: var(--goshape-card-dark); }

.gradient-blue        { background: var(--gradient-brand-blue); }
.gradient-orange      { background: var(--gradient-brand-orange); }
.gradient-duo         { background: var(--gradient-diagonal-duo); }

.glow-blue            { box-shadow: var(--shadow-glow-blue); }
.glow-orange          { box-shadow: var(--shadow-glow-orange); }

/* ==========================================================================
   COMPONENTES UI DA MARCA
   ========================================================================== */
/* Botão Primário: Azul Confiança e Alta Performance */
.btn-goshape-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gradient-brand-blue);
  color: #FFFFFF;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px var(--goshape-blue-glow);
  transition: all 0.25s ease;
}

.btn-goshape-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 86, 214, 0.5);
  filter: brightness(1.08);
}

/* Botão Secundário: Laranja Energia e Ação */
.btn-goshape-energy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gradient-brand-orange);
  color: #FFFFFF;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px var(--goshape-orange-glow);
  transition: all 0.25s ease;
}

.btn-goshape-energy:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 140, 0, 0.55);
  filter: brightness(1.05);
}

/* Botão Contorno / Outline */
.btn-goshape-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #FFFFFF;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 24px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--goshape-border-dark);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-goshape-outline:hover {
  border-color: var(--goshape-blue);
  background: rgba(0, 86, 214, 0.08);
  color: var(--goshape-blue-light);
}

/* Card Padrão GO SHAPE */
.goshape-card {
  background: var(--goshape-card-dark);
  border: 1px solid var(--goshape-border-dark);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.goshape-card:hover {
  border-color: rgba(0, 86, 214, 0.4);
}

/* Badge de Destaque */
.goshape-badge-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 86, 214, 0.15);
  border: 1px solid rgba(0, 86, 214, 0.35);
  color: var(--goshape-blue-light);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.goshape-badge-energy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 140, 0, 0.15);
  border: 1px solid rgba(255, 140, 0, 0.35);
  color: var(--goshape-orange-light);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}