@import 'theme.css';

/* ==========================================================================
   Design System - Conversão Semântica para Tema Claro Equilibrado
   Prof. Dr. Euler Cardoso - Plataforma Web & Portal do Aluno
   ========================================================================== */

[data-theme="light"] {
  /* 1. Cores de Fundo & Superfícies */
  --bg-main: #F8FAFC;         /* Slate 50 - Base limpa e sem reflexo excessivo */
  --bg-primary: #F8FAFC;
  --bg-secondary: #F1F5F9;    /* Slate 100 */
  --bg-sidebar: #FFFFFF;      /* Branco Puro */
  --bg-card: #FFFFFF;         /* Branco Puro - Destaque com elevação e profundidade */
  --bg-card-alt: #F8FAFC;     /* Slate 50 */
  --bg-card-hover: #F1F5F9;   /* Slate 100 */

  /* 2. Bordas & Divisores */
  --border-card: #E2E8F0;     /* Slate 200 - Delimitação sutil de blocos e cards */
  --border-subtle: #F1F5F9;   /* Slate 100 */
  --border-color: #E2E8F0;    /* Slate 200 */
  --border-glow: rgba(229, 181, 43, 0.4);

  /* 3. Tipografia & Contrastes (WCAG AA/AAA) */
  --text-white: #0F172A;      /* Slate 900 - Contraste 17.5:1 (WCAG AAA) */
  --text-light: #0F172A;      /* Slate 900 */
  --text-main: #0F172A;       /* Slate 900 */
  --text-primary: #0F172A;
  --text-muted: #475569;      /* Slate 600 - Contraste 6.7:1 (WCAG AAA/AA) */
  --text-secondary: #475569;
  --text-dim: #64748B;

  /* 4. Ação Primária & Destaques da Marca */
  --brand-accent: #E5B52B;
  --brand-accent-hover: #D49E1E;
  --brand-accent-bright: #92400E; /* Amber 800 */
  --brand-accent-subtle: rgba(229, 181, 43, 0.12);

  --brand-teal: #0D9488;      /* Emerald Teal */
  --brand-teal-hover: #0F766E;
  --brand-teal-light: #CCFBF1;
  --brand-teal-bright: #0F766E;
  --primary-accent: #0D9488;
  --primary-accent-hover: #0F766E;
  --highlight-mint: #0F766E;
  --highlight-mint-bg: #CCFBF1;

  /* 5. Inputs & Formulários */
  --input-bg: #FFFFFF;
  --input-border: #CBD5E1;    /* Slate 300 */
  --input-text: #0F172A;

  /* 6. Sombras & Profundidade para Superfícies Claras */
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-teal: 0 6px 20px -3px rgba(13, 148, 136, 0.25);
}

/* Transições Estruturais Globais */
*, *::before, *::after {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Ajustes Específicos para Elementos no Modo Claro */
[data-theme="light"] body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

[data-theme="light"] .main-wrapper {
  background-color: #F8FAFC !important;
}

[data-theme="light"] .sidebar {
  background-color: #FFFFFF !important;
  border-right-color: #E2E8F0 !important;
  box-shadow: 2px 0 16px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .top-header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: #E2E8F0 !important;
}

[data-theme="light"] .target-race-banner,
[data-theme="light"] .action-panel-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px rgba(229, 181, 43, 0.2) !important;
}

[data-theme="light"] .badge-status-pill.unlocked {
  background: #FEF3C7 !important;
  border-color: #FDE68A !important;
  color: #92400E !important;
}

[data-theme="light"] .badge-status-pill.locked {
  background: #F1F5F9 !important;
  color: #94A3B8 !important;
}

[data-theme="light"] .badge-card.unlocked .badge-icon-box {
  background: #FEF3C7 !important;
  border-color: #E5B52B !important;
  color: #B45309 !important;
}

[data-theme="light"] .stat-card {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .post-compact-card,
[data-theme="light"] .workout-item-card,
[data-theme="light"] .tenis-card,
[data-theme="light"] .video-card,
[data-theme="light"] .calc-box-card,
[data-theme="light"] .zone-card,
[data-theme="light"] .form-card,
[data-theme="light"] .summary-card,
[data-theme="light"] .filter-section-bar {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .post-compact-card:hover,
[data-theme="light"] .workout-item-card:hover,
[data-theme="light"] .tenis-card:hover,
[data-theme="light"] .video-card:hover,
[data-theme="light"] .zone-card:hover {
  background-color: #FFFFFF !important;
  border-color: var(--brand-accent) !important;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .zone-grid-details,
[data-theme="light"] .summary-card,
[data-theme="light"] .card-group-box,
[data-theme="light"] .file-upload-dropzone {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .video-category-tag {
  background: #CCFBF1 !important;
  border-color: #99F6E4 !important;
  color: #0F766E !important;
}

[data-theme="light"] .category-tab-btn,
[data-theme="light"] .btn-preset {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}

[data-theme="light"] .category-tab-btn:hover,
[data-theme="light"] .btn-preset:hover {
  background: #FEF3C7 !important;
  border-color: #E5B52B !important;
  color: #92400E !important;
}

[data-theme="light"] .category-tab-btn.active {
  background: #E5B52B !important;
  border-color: #E5B52B !important;
  color: #0B0F10 !important;
}

[data-theme="light"] .tab-count {
  background: rgba(15, 23, 42, 0.1) !important;
  color: inherit !important;
}

[data-theme="light"] .borg-selector-wrap,
[data-theme="light"] .pace-live-preview {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* Botão de Alternância de Tema */
.theme-toggle-btn {
  background: rgba(226, 232, 240, 0.1);
  border: 1px solid var(--border-card);
  color: var(--text-muted);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition);
}

.theme-toggle-btn:hover {
  color: var(--brand-accent);
  border-color: var(--brand-accent);
  background: var(--brand-accent-subtle);
  transform: translateY(-1px);
}

[data-theme="light"] .theme-toggle-btn {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #0F172A;
}

[data-theme="light"] .theme-toggle-btn:hover {
  background: #FEF3C7;
  color: #B45309;
  border-color: #E5B52B;
}

[data-theme="light"] .sidebar-theme-toggle {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}

[data-theme="light"] .sidebar-theme-toggle:hover {
  background: #FEF3C7 !important;
  color: #0F172A !important;
  border-color: #E5B52B !important;
}

/* ==========================================================================
   Public Site Components Overrides for Light Mode
   ========================================================================== */
[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .header-topbar {
  background: #F1F5F9 !important;
  border-bottom: 1px solid #E2E8F0 !important;
  color: #64748B !important;
}

[data-theme="light"] .header-topbar a,
[data-theme="light"] .topbar-info-item span {
  color: #475569 !important;
}

[data-theme="light"] .nav-link {
  color: #334155 !important;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
  color: #B45309 !important;
}

[data-theme="light"] .service-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .blog-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .contact-card,
[data-theme="light"] .timeline-card,
[data-theme="light"] .stat-box,
[data-theme="light"] .plan-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .service-card:hover,
[data-theme="light"] .testimonial-card:hover,
[data-theme="light"] .blog-card:hover,
[data-theme="light"] .plan-card:hover {
  background-color: #FFFFFF !important;
  border-color: var(--brand-accent) !important;
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.1) !important;
}

[data-theme="light"] .site-footer {
  background-color: #F1F5F9 !important;
  border-top: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}

[data-theme="light"] .footer-col h4,
[data-theme="light"] .footer-col h3 {
  color: #0F172A !important;
}

[data-theme="light"] .footer-links a {
  color: #64748B !important;
}

[data-theme="light"] .footer-links a:hover {
  color: #B45309 !important;
}

[data-theme="light"] .footer-bottom {
  border-top-color: #E2E8F0 !important;
  color: #94A3B8 !important;
}

/* Badges & Pills - Light Theme */
[data-theme="light"] .hero-badge,
[data-theme="light"] .hero-content .pill-badge,
[data-theme="light"] .page-hero .pill-badge,
[data-theme="light"] .pill-badge {
  background: #FEF3C7 !important;
  border: 1px solid rgba(217, 119, 6, 0.4) !important;
  color: #B45309 !important;
}

[data-theme="light"] .hero-badge i,
[data-theme="light"] .hero-content .pill-badge i,
[data-theme="light"] .page-hero .pill-badge i,
[data-theme="light"] .pill-badge i {
  color: #B45309 !important;
}

/* ==========================================================================
   Hero & Banner Sections - Light Mode Overrides
   ========================================================================== */

/* 1. Hero Principal da Home (index.php) */
[data-theme="light"] .hero-section {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.94) 0%, rgba(241, 245, 249, 0.90) 100%),
              url('../img/hero-bg-slide.webp') center/cover no-repeat !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .hero-content h1 {
  color: #0F172A !important;
}

[data-theme="light"] .hero-content h1 .text-teal {
  color: #B45309 !important; /* Dourado/âmbar escurecido para excelente contraste e acessibilidade */
}

[data-theme="light"] .hero-content p,
[data-theme="light"] .hero-description {
  color: #475569 !important;
}

[data-theme="light"] .hero-buttons .btn-outline {
  background: #FFFFFF !important;
  border: 1.5px solid var(--brand-accent) !important;
  color: #92400E !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .hero-buttons .btn-outline:hover {
  background: #FEF3C7 !important;
  border-color: var(--brand-accent) !important;
  color: #78350F !important;
  transform: translateY(-2px);
}

[data-theme="light"] .hero-image-wrapper {
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.16) !important;
  border: 2px solid var(--brand-accent) !important;
}

/* 2. Hero Padrão de Páginas Internas (.page-hero) */
[data-theme="light"] .page-hero {
  background: linear-gradient(180deg, #F1F5F9 0%, #FFFFFF 100%) !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .page-hero::before {
  background: radial-gradient(circle, rgba(229, 181, 43, 0.1) 0%, rgba(241, 245, 249, 0) 70%) !important;
}

[data-theme="light"] .page-hero h1 {
  color: #0F172A !important;
}

[data-theme="light"] .page-hero p {
  color: #475569 !important;
}

/* 3. Seção de Diagrama de Benefícios (index.php) */
[data-theme="light"] .benefits-diagram-section {
  background-color: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .benefits-subtitle {
  color: #B45309 !important;
}

[data-theme="light"] .benefits-main-title {
  color: #0F172A !important;
}

[data-theme="light"] .benefit-item-title {
  color: #0F172A !important;
}

[data-theme="light"] .benefit-item-desc {
  color: #475569 !important;
}

[data-theme="light"] .benefit-big-number {
  color: #B45309 !important;
}

[data-theme="light"] .benefits-connectors-svg polyline {
  stroke: rgba(15, 23, 42, 0.22) !important;
}

[data-theme="light"] .benefits-oval-frame {
  border-color: #E2E8F0 !important;
  box-shadow: 0 0 0 2px rgba(229, 181, 43, 0.5), 0 20px 45px rgba(15, 23, 42, 0.12) !important;
}

/* 4. Blocos CTA e Chamadas para Ação */
[data-theme="light"] .home-cta-section {
  background: radial-gradient(circle at 50% 30%, rgba(229, 181, 43, 0.1) 0%, transparent 60%),
              linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%) !important;
  border-top-color: #E2E8F0 !important;
}

[data-theme="light"] .home-cta-section h2 {
  color: #0F172A !important;
}

[data-theme="light"] .home-cta-section p {
  color: #475569 !important;
}

[data-theme="light"] .about-cta-card {
  background: radial-gradient(circle at 50% 30%, rgba(229, 181, 43, 0.1) 0%, transparent 70%),
              linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border-color: rgba(229, 181, 43, 0.5) !important;
}

[data-theme="light"] .about-cta-card h2,
[data-theme="light"] .about-cta-card h3 {
  color: #0F172A !important;
}

[data-theme="light"] .about-cta-card p {
  color: #475569 !important;
}

/* 5. Hero de Detalhe de Corrida (corrida.php) */
[data-theme="light"] .race-detail-hero {
  background: radial-gradient(circle at 50% 0%, rgba(229, 181, 43, 0.08) 0%, #F8FAFC 75%), #F8FAFC !important;
  border-bottom-color: #E2E8F0 !important;
}

[data-theme="light"] .race-detail-hero h1 {
  color: #0F172A !important;
}

[data-theme="light"] .race-breadcrumb {
  color: #64748B !important;
}

/* 6. Navegação Mobile no Tema Claro */
@media (max-width: 991px) {
  [data-theme="light"] .main-nav {
    background: #FFFFFF !important;
    border-top-color: #E2E8F0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    -webkit-filter: none !important;
  }
  [data-theme="light"] .main-nav .nav-link {
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
  }
  [data-theme="light"] .main-nav .nav-link:hover,
  [data-theme="light"] .main-nav .nav-link.active {
    background: #FEF3C7 !important;
    border-color: var(--brand-accent) !important;
    color: #92400E !important;
  }
}

[data-theme="light"] .nav-link-corridas {
  background: rgba(229, 181, 43, 0.15) !important;
  border-color: rgba(229, 181, 43, 0.5) !important;
  color: #B45309 !important;
}

[data-theme="light"] .nav-link-corridas:hover {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border-color: #E5B52B !important;
}

[data-theme="light"] .nav-link-corridas.active {
  background: linear-gradient(135deg, #E5B52B, #D49E1E) !important;
  color: #0B0F10 !important;
}