/* ============================================================================
   LeoGym · tokens de identidade
   Base: spec de marca v1.0 · 09/09/2026
   ----------------------------------------------------------------------------
   Este arquivo é o contrato visual do produto e entra ANTES da primeira tela,
   para a identidade nascer junto e não ser aplicada depois.

   A spec é normativa sobre qualquer imagem gerada: quando o mockup e o
   hexadecimal discordarem, vale o hexadecimal daqui.
   ============================================================================ */

:root {
  /* --- marca ------------------------------------------------------------- */
  --lg-brand-primary: #FFD400;   /* marca, ação principal, seleção */
  --lg-brand-hover:   #E6BF00;   /* amarelo ao passar o cursor */

  /* --- área de trabalho (tema claro, padrão do painel) -------------------- */
  --lg-bg:            #F5F5F2;
  --lg-surface:       #FFFFFF;
  --lg-surface-2:     #FAFAF8;
  --lg-border:        #D4D4D8;
  --lg-border-soft:   #E4E4E7;
  --lg-text:          #18181B;
  --lg-text-2:        #52525B;
  --lg-text-3:        #71717A;

  /* --- menu lateral -------------------------------------------------------
     Preto nos dois temas. É assinatura de marca, não consequência do tema. */
  --lg-nav-bg:        #0B0B0D;
  --lg-nav-surface:   #18181B;
  --lg-nav-border:    #27272A;
  --lg-nav-text:      #F5F5F2;
  --lg-nav-text-2:    #A1A1AA;

  /* --- estados (spec: definidos sobre fundo claro) ------------------------ */
  --lg-success:       #166534;  --lg-success-bg: #DCFCE7;
  --lg-error:         #B91C1C;  --lg-error-bg:   #FEE2E2;
  --lg-info:          #1D4ED8;  --lg-info-bg:    #DBEAFE;
  /* B7 · A spec não tinha par de warning, e o cartão que existe para alertar
     saía pintado com a cor de sucesso. 7,09:1 sobre superfície clara. */
  --lg-warning:       #92400E;  --lg-warning-bg: #FEF3C7;
  --lg-neutral-bg:    #F4F4F5;

  /* M26 · O anel de foco não pode ser o amarelo da marca: 1,31:1 contra a
     página e cor idêntica ao botão, então lia como halo em vez de foco. */
  --lg-focus:         #0B0B0D;

  /* --- rampa de calor -----------------------------------------------------
     Mono-hue amarelo. Usada no mapa de frequência por hora e dia. */
  --lg-heat-0: #E7E7E3;
  --lg-heat-1: #FFF6D6;
  --lg-heat-2: #FFE894;
  --lg-heat-3: #FFD94D;
  --lg-heat-4: #FFD400;
  --lg-heat-5: #E6BF00;
  /* M25 · Tinta do número dentro da célula, com corte no nível 3. No tema
     escuro os níveis baixos ficam escuros e o #18181B literal sumia:
     36 das 71 células abaixo de 4,5:1, e o mapa passava a informar só por cor. */
  --lg-heat-ink-baixo: #0B0B0D;
  --lg-heat-ink-alto:  #0B0B0D;

  /* --- tipografia --------------------------------------------------------- */
  /* As variáveis vêm do next/font (layout.tsx). O fallback continua real
     para o caso de a fonte não carregar. */
  --lg-font-display: var(--lg-fonte-display), "Manrope", "Segoe UI", Arial, sans-serif;
  --lg-font-ui:      var(--lg-fonte-ui), "Inter", "Segoe UI", Arial, sans-serif;
  --lg-font-mono:    ui-monospace, "SF Mono", Consolas, monospace;

  --lg-size-body:  16px;   /* corpo padrão */
  --lg-size-table: 14px;   /* dados de tabela */
  --lg-size-meta:  12.5px; /* apoio — nunca informação essencial */

  /* --- forma e espaço -----------------------------------------------------
     Espaçamento sempre em múltiplos de 4px. */
  --lg-space-1: 4px;  --lg-space-2: 8px;  --lg-space-3: 12px;
  --lg-space-4: 16px; --lg-space-5: 20px; --lg-space-6: 24px;
  --lg-space-8: 32px; --lg-space-10: 40px;

  --lg-radius-btn:  10px;  /* spec: 8–12px */
  --lg-radius-card: 14px;  /* spec: 12–16px */
  --lg-radius-pill:  6px;

  --lg-control-h: 44px;    /* spec: 44–48px, alvo de toque confortável */
}

/* ----------------------------------------------------------------------------
   Tema escuro
   ----------------------------------------------------------------------------
   ⚠️ PENDENTE DE APROVAÇÃO DO DONO DA MARCA.
   A spec v1.0 define os estados apenas "sobre fundo claro". Estes são os pares
   escuros propostos, necessários porque o painel precisa funcionar no tema do
   visitante. Conferir contraste antes de publicar.

   Três estados: escolha explícita (data-theme), escolha do sistema
   (prefers-color-scheme), e o padrão sem carimbo — que é o caso mais comum.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-bg:          #0B0B0D;
    --lg-surface:     #18181B;
    --lg-surface-2:   #1F1F23;
    --lg-border:      #3F3F46;
    --lg-border-soft: #2A2A2F;
    --lg-text:        #F5F5F2;
    --lg-text-2:      #A1A1AA;
    --lg-text-3:      #8A8A93;
    --lg-nav-border:  #3F3F46;

    --lg-success: #4ADE80;  --lg-success-bg: #0F2E1C;
    --lg-error:   #F87171;  --lg-error-bg:   #3B1514;
    --lg-info:    #60A5FA;  --lg-info-bg:    #12233F;
    --lg-neutral-bg: #242428;

    --lg-heat-0: #232326;
    --lg-heat-1: #4A3F12;
    --lg-heat-2: #7A6510;
    --lg-heat-3: #B99700;
    --lg-heat-4: #D9B400;
    --lg-heat-5: #FFD400;
    --lg-heat-ink-baixo: #F5F5F2;  /* 9,56:1 sobre #4A3F12 */
    --lg-heat-ink-alto:  #0B0B0D;  /* 7,01:1 sobre #B99700 */
    --lg-focus:          #FFD400;  /* 13,74:1 sobre o fundo escuro */
    --lg-warning:        #FBBF24;  --lg-warning-bg: #33280F;
  }
}

:root[data-theme="dark"] {
  --lg-bg:          #0B0B0D;
  --lg-surface:     #18181B;
  --lg-surface-2:   #1F1F23;
  --lg-border:      #3F3F46;
  --lg-border-soft: #2A2A2F;
  --lg-text:        #F5F5F2;
  --lg-text-2:      #A1A1AA;
  --lg-text-3:      #8A8A93;
  --lg-nav-border:  #3F3F46;

  --lg-success: #4ADE80;  --lg-success-bg: #0F2E1C;
  --lg-error:   #F87171;  --lg-error-bg:   #3B1514;
  --lg-info:    #60A5FA;  --lg-info-bg:    #12233F;
  --lg-neutral-bg: #242428;

  --lg-heat-0: #232326;
  --lg-heat-1: #4A3F12;
  --lg-heat-2: #7A6510;
  --lg-heat-3: #B99700;
  --lg-heat-4: #D9B400;
  --lg-heat-5: #FFD400;
  --lg-heat-ink-baixo: #F5F5F2;  /* 9,56:1 sobre #4A3F12 */
  --lg-heat-ink-alto:  #0B0B0D;  /* 7,01:1 sobre #B99700 */
  --lg-focus:          #FFD400;  /* 13,74:1 sobre o fundo escuro */
  --lg-warning:        #FBBF24;  --lg-warning-bg: #33280F;
}

/* ============================================================================
   REGRAS QUE NÃO SÃO NEGOCIÁVEIS
   ----------------------------------------------------------------------------
   1. Texto sobre amarelo é sempre #0B0B0D. Nunca branco.
   2. Amarelo nunca é texto pequeno sobre branco — não passa em contraste.
   3. Todo estado tem rótulo E ícone, além da cor. Cor não decide sozinha.
   4. Valor financeiro alinha à direita, com font-variant-numeric: tabular-nums.
   5. Foco de teclado sempre visível.
   6. Respeitar prefers-reduced-motion.
   7. Conteúdo largo (tabela, gráfico) rola no próprio container; o corpo da
      página nunca rola na horizontal.
   ============================================================================ */

.lg-focus-visivel:focus-visible,
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--lg-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.lg-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Sobre amarelo, o texto é preto. Regra 1, escrita para não ser esquecida. */
.lg-on-brand {
  background: var(--lg-brand-primary);
  color: #0B0B0D;
}
.lg-on-brand:hover {
  background: var(--lg-brand-hover);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}