@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Karla:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   PALETA OFICIAL — Educação Física Pro (EFP)
   "Titanium + Aço Azul + Laranja Protagonista + Ciano nos Detalhes"
   Aprovada em 2026-05-18

   Base sólida (titanium + aço azul) + laranja protagonista
   (CTAs, ações, tags, trends) + ciano só em detalhes técnicos
   (linhas, glows, gradient da barra de progresso, valores
   destacados dentro do card primário).
   ============================================================ */

/* ============================================================
   MODO CLARO (default)
   ============================================================ */
:root,
[data-theme="light"] {

  /* --- Cores base (fixas em ambos os modos) --- */
  --efp-titanium: #1C1E22;          /* cards primários, avatar, ícones escuros */
  --efp-aco-azul: #0F2C5C;          /* gradient + nome do aluno em claro */
  --efp-laranja: #FF5722;           /* PROTAGONISTA — CTAs, ações */
  --efp-laranja-claro: #FF6D3B;     /* fim do gradient laranja */
  --efp-laranja-suave: #FF8A65;     /* labels e variações claras de laranja */
  --efp-ciano: #00E5FF;             /* detalhes técnicos: linhas, glows */
  --efp-branco: #FFFFFF;
  --efp-preto: #0F1115;

  /* --- Light mode: fundos e superfícies --- */
  --efp-bg: #F4F5F7;                /* canvas geral */
  --efp-surface: #FFFFFF;           /* cards secundários, inputs */
  --efp-border: #DDE0E5;            /* bordas suaves */

  /* --- Light mode: tipografia --- */
  --efp-text: #0F1115;              /* texto principal */
  --efp-text-muted: #5A6068;        /* labels, secundário */
  --efp-text-on-primary: #FFFFFF;   /* sobre card primário (titanium/aço) */
  --efp-text-on-accent: #FFFFFF;    /* sobre botão laranja */

  /* --- Light mode: dots/progresso desligado --- */
  --efp-dot-off: #DDE0E5;

  /* --- Light mode: shadows --- */
  --efp-shadow-sm: 0 2px 6px rgba(15, 17, 21, 0.05);
  --efp-shadow-md: 0 4px 16px rgba(15, 17, 21, 0.08);
  --efp-shadow-lg: 0 8px 32px rgba(15, 17, 21, 0.12);

  /* --- Sombras coloridas (sempre laranja/ciano, independente do modo) --- */
  --efp-glow-laranja: 0 6px 24px rgba(255, 87, 34, 0.5);
  --efp-glow-laranja-sm: 0 2px 8px rgba(255, 87, 34, 0.35);
  --efp-glow-ciano: 0 0 12px rgba(0, 229, 255, 0.5);
  --efp-glow-ciano-sm: 0 0 8px rgba(0, 229, 255, 0.4);

  /* --- Gradients principais (idem) --- */
  --efp-gradient-primary: linear-gradient(135deg, #1C1E22 0%, #0F2C5C 100%);
  --efp-gradient-laranja: linear-gradient(135deg, #FF5722 0%, #FF6D3B 100%);
  --efp-gradient-progresso: linear-gradient(90deg, #FF5722 0%, #FF8A65 60%, #00E5FF 100%);
}

/* ============================================================
   MODO ESCURO
   ============================================================ */
[data-theme="dark"] {
  --efp-bg: #0F1115;
  --efp-surface: #1C1E22;
  --efp-border: #2A2D33;

  --efp-text: #F0F2F5;
  --efp-text-muted: #6E7480;

  --efp-dot-off: #2A2D33;

  /* sombras mais fortes no escuro */
  --efp-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --efp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --efp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Respeita preferência do sistema se nenhum tema for setado */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --efp-bg: #0F1115;
    --efp-surface: #1C1E22;
    --efp-border: #2A2D33;
    --efp-text: #F0F2F5;
    --efp-text-muted: #6E7480;
    --efp-dot-off: #2A2D33;
    --efp-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
    --efp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --efp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  }
}

/* ============================================================
   TOKENS NÃO-COR (geometria + tipografia)
   ============================================================ */
:root {
  /* --- Raio de borda --- */
  --efp-radius-sm: 6px;
  --efp-radius-md: 10px;
  --efp-radius-lg: 14px;
  --efp-radius-xl: 24px;
  --efp-radius-pill: 99px;

  /* --- Espaçamento (padrão 4px) --- */
  --efp-space-1: 4px;
  --efp-space-2: 8px;
  --efp-space-3: 12px;
  --efp-space-4: 16px;
  --efp-space-5: 20px;
  --efp-space-6: 24px;
  --efp-space-8: 32px;

  /* --- Tipografia --- */
  --efp-font-display: 'Bebas Neue', 'Archivo Black', Impact, sans-serif;
  --efp-font-sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --efp-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;

  --efp-text-xs: 10px;
  --efp-text-sm: 12px;
  --efp-text-base: 14px;
  --efp-text-md: 16px;
  --efp-text-lg: 18px;
  --efp-text-xl: 22px;
  --efp-text-2xl: 28px;

  --efp-weight-regular: 400;
  --efp-weight-medium: 500;
  --efp-weight-semibold: 600;
  --efp-weight-bold: 700;
}

/* ============================================================
   Reset / base
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--efp-font-sans);
  background: var(--efp-bg);
  color: var(--efp-text);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

/* ============================================================
   Componentes utilitários (compartilhados entre módulos)
   ============================================================ */

/* Card primário com gradient titanium → aço azul + glow ciano sutil */
.efp-card-primary {
  background: var(--efp-gradient-primary);
  color: var(--efp-text-on-primary);
  padding: var(--efp-space-5);
  border-radius: var(--efp-radius-lg);
  position: relative;
  overflow: hidden;
}
.efp-card-primary::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, var(--efp-ciano) 0%, transparent 70%);
  opacity: 0.18;
}
/* faixa lateral laranja no card primário */
.efp-card-primary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--efp-gradient-laranja);
  box-shadow: 0 0 12px rgba(255, 87, 34, 0.5);
}

/* Card secundário (superfície branca no claro, titanium no escuro) */
.efp-card {
  background: var(--efp-surface);
  border: 1px solid var(--efp-border);
  padding: var(--efp-space-4);
  border-radius: var(--efp-radius-lg);
}

/* Tag laranja com pulse opcional */
.efp-tag-laranja {
  display: inline-flex;
  align-items: center;
  gap: var(--efp-space-2);
  padding: 5px 12px;
  border-radius: var(--efp-radius-pill);
  font-size: var(--efp-text-xs);
  font-weight: var(--efp-weight-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--efp-gradient-laranja);
  color: var(--efp-text-on-accent);
  box-shadow: var(--efp-glow-laranja-sm);
}

/* Trend/pill (variação positiva, ex: "+12%") */
.efp-trend {
  font-size: var(--efp-text-sm);
  color: var(--efp-laranja);
  font-weight: var(--efp-weight-bold);
  background: rgba(255, 87, 34, 0.1);
  padding: 4px 10px;
  border-radius: var(--efp-radius-pill);
}

/* Botão CTA principal — laranja com glow + highlight ciano no topo */
.efp-btn-primary {
  padding: 16px 20px;
  border: 0;
  border-radius: var(--efp-radius-md);
  font-weight: var(--efp-weight-bold);
  font-size: var(--efp-text-base);
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--efp-gradient-laranja);
  color: var(--efp-text-on-accent);
  box-shadow: var(--efp-glow-laranja), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  font-family: inherit;
}
.efp-btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 30%, var(--efp-ciano) 50%, transparent 70%);
  opacity: 0.5;
}

/* Botão secundário — titanium */
.efp-btn-secondary {
  padding: 14px 20px;
  border: 0;
  border-radius: var(--efp-radius-md);
  font-weight: var(--efp-weight-bold);
  font-size: var(--efp-text-base);
  cursor: pointer;
  background: var(--efp-titanium);
  color: var(--efp-text-on-primary);
  font-family: inherit;
}

/* Botão ghost */
.efp-btn-ghost {
  padding: 14px 20px;
  border: 1.5px solid var(--efp-laranja);
  border-radius: var(--efp-radius-md);
  font-weight: var(--efp-weight-bold);
  font-size: var(--efp-text-base);
  cursor: pointer;
  background: transparent;
  color: var(--efp-laranja);
  font-family: inherit;
}

/* Linha decorativa ciano (ex: sob header) */
.efp-line-ciano {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--efp-ciano) 50%, transparent 100%);
  opacity: 0.5;
}

/* Avatar com ring ciano sutil */
.efp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--efp-titanium);
  color: var(--efp-laranja);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--efp-weight-bold);
  font-size: var(--efp-text-md);
  position: relative;
}
.efp-avatar::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--efp-ciano);
  opacity: 0.5;
}

/* Barra de progresso com gradient laranja → ciano */
.efp-progress-bar {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--efp-dot-off);
}
.efp-progress-fill {
  height: 100%;
  background: var(--efp-gradient-progresso);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(255, 87, 34, 0.5);
}

/* ============================================================
   Helpers de tema (script vai usar)
   ============================================================ */
/*
   JS pra trocar tema:
     document.documentElement.setAttribute('data-theme', 'dark');  // ativa escuro
     document.documentElement.setAttribute('data-theme', 'light'); // ativa claro
     document.documentElement.removeAttribute('data-theme');       // segue sistema

   Persistir escolha do usuário:
     localStorage.setItem('efp_theme', 'dark');
     const saved = localStorage.getItem('efp_theme');
     if (saved) document.documentElement.setAttribute('data-theme', saved);
*/