/* Fontes do APP (prototipo aprovado): DM Serif Display (display) + Outfit (sans).
   Karla/Bebas mantidas como fallback caso algum modulo antigo ainda referencie. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Outfit:wght@300;400;500;600;700;800&family=Karla:wght@300;400;500;600;700&family=Bebas+Neue&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"] {
  color-scheme: light; /* achado 31/ago: sem isto, select/date/scrollbar nativos ficam
    sempre no chrome claro do navegador, mesmo com [data-theme="dark"] ativo — o toggle
    manual muda a CSS da página mas o browser só reage a prefers-color-scheme sozinho. */

  /* --- 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"] {
  color-scheme: dark;
  --efp-bg: #0F1115;
  --efp-surface: #1C1E22;
  --efp-border: #2A2D33;

  --efp-text: #F0F2F5;
  /* #6E7480 dava 3,56:1 sobre a superficie e 4,02:1 sobre o fundo — abaixo dos 4,5:1
     de AA, e este e o token dos ROTULOS, que rodam em 10px e 12px. #7F8591 e o tom mais
     proximo do original que passa nos dois fundos (4,50 e 5,10): a hierarquia visual
     continua a mesma, o texto secundario so deixa de ser ilegivel. */
  --efp-text-muted: #7F8591;

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

  /* Achado #4 (Baixo, Rodada 86, 15/08/2026): --efp-ciano-escuro nunca era definida em lugar
     nenhum do projeto — todo `var(--efp-ciano-escuro, #006D7A)` (perfil, notificacoes,
     compartilhar, home, chat, progresso etc) caia sempre no fallback fixo #006D7A, inclusive
     no escuro, onde ele da so ~2,8:1 contra --efp-surface. #4DD8E8 e o mesmo ciano da marca,
     clareado o suficiente pra passar de 9:1 contra --efp-surface e --efp-bg no escuro — a
     definicao aqui corrige de uma vez os tres lugares que a usam (nao muda o claro, que
     continua no fallback #006D7A). */
  --efp-ciano-escuro: #4DD8E8;

  /* Achado #5 (Baixo, Rodada 86, 15/08/2026): .perf-vit-cheia ("Agenda cheia") em perfil.css
     usava #B45309 cru, ~3,3:1 contra --efp-surface no escuro. Mesmo padrao do token acima:
     --efp-ambar-alerta so muda no escuro, o claro fica igual (fallback #B45309). */
  --efp-ambar-alerta: #FFB74D;

  /* 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]) {
    color-scheme: dark;
    --efp-bg: #0F1115;
    --efp-surface: #1C1E22;
    --efp-border: #2A2D33;
    --efp-text: #F0F2F5;
    /* #6E7480 dava 3,56:1 sobre a superficie e 4,02:1 sobre o fundo — abaixo dos 4,5:1
     de AA, e este e o token dos ROTULOS, que rodam em 10px e 12px. #7F8591 e o tom mais
     proximo do original que passa nos dois fundos (4,50 e 5,10): a hierarquia visual
     continua a mesma, o texto secundario so deixa de ser ilegivel. */
  --efp-text-muted: #7F8591;
    --efp-dot-off: #2A2D33;
    /* Achados #4/#5 (Baixo, Rodada 86, 15/08/2026): mesma definicao do bloco [data-theme="dark"]
       acima, pro escuro por preferencia de sistema (sem escolha explicita salva). */
    --efp-ciano-escuro: #4DD8E8;
    --efp-ambar-alerta: #FFB74D;
    --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 (do prototipo aprovado) --- */
  --efp-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --efp-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Karla', sans-serif;
  --efp-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;
  /* Aliases curtos (uso interno em novos modulos sem prefixo) */
  --serif: var(--efp-font-display);
  --sans: var(--efp-font-sans);

  --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);
*/