/* ============================================================
   UNITDK · Design Tokens
   Universidade Corporativa Tradetek
   ------------------------------------------------------------
   Versão: 1.0
   Tema: Corporate Tech (escuro)
   Fontes: Inter (Google Fonts) + JetBrains Mono (Google Fonts)
   ------------------------------------------------------------
   Como usar no Chamilo:
   1. Copie este arquivo para: main/css/themes/unitdk/tokens.css
   2. No template base do tema (default.tpl ou layout.tpl), inclua:
      <link rel="stylesheet" href="{{ themes_dir }}unitdk/tokens.css">
   3. Inclua as fontes do Google Fonts no <head>:
      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ─────────────────────────────────────────────────────────
     FUNDOS · do mais profundo ao elevado
     ───────────────────────────────────────────────────────── */
  --tdk-bg:           #0B0D10;   /* fundo principal da página */
  --tdk-bg-2:         #0E1116;   /* faixas alternadas / áreas neutras */
  --tdk-surface:      #161A22;   /* cards, painéis, header */
  --tdk-surface-2:    #1D232E;   /* hover de card / surface elevado */
  --tdk-surface-3:    #252C39;   /* dropdown, popover, linha de tabela hover */

  /* ─────────────────────────────────────────────────────────
     BORDAS · divisórias
     ───────────────────────────────────────────────────────── */
  --tdk-border:       #2A313D;
  --tdk-border-hi:    #3A4150;   /* foco / hover de borda */

  /* ─────────────────────────────────────────────────────────
     TEXTO · hierarquia
     ───────────────────────────────────────────────────────── */
  --tdk-text:         #E8ECF2;   /* texto principal */
  --tdk-text-2:       #A9B2C0;   /* secundário / labels */
  /* Era #6B7686: abaixo de 4,5:1 nos cartões (3,8) e no hover (3,4), e o usuário
     achou ilegível. #8492A7 dá 5,5:1 no cartão e segue abaixo do texto-2. */
  --tdk-text-3:       #8492A7;   /* metadados / apagado */

  /* ─────────────────────────────────────────────────────────
     ACENTOS · identidade Tradetek
     ───────────────────────────────────────────────────────── */
  /* Sky Blue — PRIMÁRIO. Use em: CTAs, "em curso", progresso, links, trilhas */
  --tdk-accent:       #5AB5FF;
  --tdk-accent-hov:   #3D9DEF;
  --tdk-accent-soft:  rgba(90, 181, 255, 0.10);  /* bg de pills/badges */

  /* Tradetek Blue — info secundária. Use em: trilhas alternativas, info badges */
  --tdk-blue:         #3E9BFF;
  --tdk-blue-hov:     #2D6FE0;

  /* Blue soft — links em texto corrido (mais legível em fundo escuro) */
  --tdk-blue-soft:    #7AB8FF;

  /* Mint — SUCESSO/CONCLUÍDO (não primário). Use em: ✓ aprovado, certificado, "em dia" */
  --tdk-success:      #6FE3C0;
  --tdk-success-soft: rgba(111, 227, 192, 0.10);

  /* Gold — conquistas raras. Use em: certificados premium, destaques editoriais */
  --tdk-gold:         #F2B81E;
  --tdk-gold-soft:    rgba(242, 184, 30, 0.10);

  /* ─────────────────────────────────────────────────────────
     ESTADOS
     ───────────────────────────────────────────────────────── */
  --tdk-warn:         #F5C26B;   /* atenção · obrigatório · prazo */
  --tdk-warn-soft:    rgba(245, 194, 107, 0.10);
  --tdk-danger:       #EF6B6B;   /* erro · atraso · risco */
  --tdk-danger-soft:  rgba(239, 107, 107, 0.10);
  --tdk-ok:           var(--tdk-success);  /* alias semântico */

  /* Texto sobre botão de acento (sempre escuro, pra contraste) */
  --tdk-on-accent:    #0B0D10;

  /* ─────────────────────────────────────────────────────────
     CORES POR ÁREA (trilhas/categorias)
     ───────────────────────────────────────────────────────── */
  --tdk-area-eng:        #5AB5FF;  /* Engenharia */
  --tdk-area-compliance: #3E9BFF;  /* Compliance / Regulatório */
  --tdk-area-produto:    #C7A1FF;  /* Produto / UX */
  --tdk-area-trading:    #F2B81E;  /* Trading / Quant */
  --tdk-area-lead:       #FF9F8E;  /* Liderança */
  --tdk-area-data:       #3E9BFF;  /* Dados (mesmo do compliance) */
  --tdk-area-gente:      #6FD3A8;  /* Gente / RH (ticket 05b: familia de setor) */

  /* ─────────────────────────────────────────────────────────
     TIPOGRAFIA
     ───────────────────────────────────────────────────────── */
  --tdk-font:          'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --tdk-font-display:  'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --tdk-font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala de tamanho */
  --tdk-fs-xs:    11px;   /* labels mono, metadados */
  --tdk-fs-sm:    12.5px; /* texto secundário */
  --tdk-fs-base:  14px;   /* corpo */
  --tdk-fs-md:    16px;   /* destaque inline */
  --tdk-fs-lg:    19px;   /* títulos de card */
  --tdk-fs-xl:    24px;   /* títulos de seção */
  --tdk-fs-2xl:   30px;   /* H1 de página */
  --tdk-fs-3xl:   38px;   /* hero numbers */

  /* Pesos */
  --tdk-fw-normal:  400;
  --tdk-fw-medium:  500;
  --tdk-fw-semi:    600;
  --tdk-fw-bold:    700;

  /* ─────────────────────────────────────────────────────────
     GEOMETRIA · raios, espaçamentos, sombras
     ───────────────────────────────────────────────────────── */
  --tdk-radius-sm:    6px;
  --tdk-radius:       10px;    /* botões, inputs */
  --tdk-radius-md:    12px;    /* cards comuns */
  --tdk-radius-lg:    14px;    /* cards de destaque */
  --tdk-radius-xl:    18px;    /* hero containers */
  --tdk-radius-pill:  999px;   /* badges, pills */

  /* Espaçamentos (escala de 4) */
  --tdk-sp-1:   4px;
  --tdk-sp-2:   8px;
  --tdk-sp-3:   12px;
  --tdk-sp-4:   16px;
  --tdk-sp-5:   20px;
  --tdk-sp-6:   24px;
  --tdk-sp-8:   32px;
  --tdk-sp-10:  40px;
  --tdk-sp-12:  48px;
  --tdk-sp-16:  64px;

  /* Sombras (sutis, evitar drop-shadows fortes no tema escuro) */
  --tdk-shadow-sm:   0 1px 2px rgba(0,0,0,0.20);
  --tdk-shadow:      0 4px 12px rgba(0,0,0,0.25);
  --tdk-shadow-lg:   0 12px 40px rgba(0,0,0,0.35);
  --tdk-shadow-glow: 0 0 24px rgba(90, 181, 255, 0.25);  /* glow azul em hover */

  /* Transitions */
  --tdk-trans-fast:   0.12s ease;
  --tdk-trans:        0.18s ease;
  --tdk-trans-slow:   0.28s ease;
}

/* ============================================================
   ESTILOS BASE
   ============================================================ */

html, body {
  background: var(--tdk-bg);
  color: var(--tdk-text);
  font-family: var(--tdk-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   COMPONENTES UTILITÁRIOS
   ------------------------------------------------------------
   Aplique essas classes diretamente nos elementos gerados pelo
   Chamilo, ou use como referência para customizar o tema.
   ============================================================ */

/* ─── Botões ─────────────────────────────────────────────── */
.tdk-btn {
  font-family: var(--tdk-font);
  font-weight: var(--tdk-fw-semi);
  font-size: 13px;
  padding: var(--tdk-sp-3) var(--tdk-sp-5);
  border-radius: var(--tdk-radius);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--tdk-trans), transform var(--tdk-trans);
  text-decoration: none;
}
.tdk-btn:hover { transform: translateY(-1px); }

.tdk-btn-primary {
  background: var(--tdk-accent);
  color: var(--tdk-on-accent);
}
.tdk-btn-primary:hover { background: var(--tdk-accent-hov); }

.tdk-btn-secondary {
  background: transparent;
  color: var(--tdk-text);
  border: 1px solid var(--tdk-border-hi);
}
.tdk-btn-secondary:hover { background: var(--tdk-surface-2); }

.tdk-btn-ghost {
  background: var(--tdk-surface);
  color: var(--tdk-text-2);
  border: 1px solid var(--tdk-border);
}
.tdk-btn-ghost:hover { background: var(--tdk-surface-2); color: var(--tdk-text); }

/* ─── Inputs ─────────────────────────────────────────────── */
.tdk-input {
  width: 100%;
  padding: var(--tdk-sp-3) var(--tdk-sp-4);
  border-radius: var(--tdk-radius);
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  color: var(--tdk-text);
  font-size: var(--tdk-fs-base);
  font-family: var(--tdk-font);
  outline: none;
  transition: border-color var(--tdk-trans);
}
.tdk-input:focus { border-color: var(--tdk-accent); }
.tdk-input::placeholder { color: var(--tdk-text-3); }

.tdk-label {
  display: block;
  font-family: var(--tdk-font-mono);
  font-size: 10px;
  color: var(--tdk-text-2);
  letter-spacing: 0.1em;
  margin-bottom: var(--tdk-sp-2);
  text-transform: uppercase;
}

/* ─── Cards ──────────────────────────────────────────────── */
.tdk-card {
  background: var(--tdk-surface);
  border: 1px solid var(--tdk-border);
  border-radius: var(--tdk-radius-md);
  padding: var(--tdk-sp-5);
}
.tdk-card-elevated {
  background: linear-gradient(135deg, var(--tdk-surface) 0%, var(--tdk-bg-2) 100%);
  border-color: var(--tdk-border-hi);
}

/* ─── Pills / Badges ─────────────────────────────────────── */
.tdk-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--tdk-sp-2);
  padding: 2px var(--tdk-sp-2);
  border-radius: var(--tdk-radius-pill);
  font-size: 11px;
  font-weight: var(--tdk-fw-medium);
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.06);
  color: var(--tdk-text-2);
}
.tdk-pill-accent  { background: var(--tdk-accent-soft);  color: var(--tdk-accent); }
.tdk-pill-success { background: var(--tdk-success-soft); color: var(--tdk-success); }
.tdk-pill-warn    { background: var(--tdk-warn-soft);    color: var(--tdk-warn); }
.tdk-pill-danger  { background: var(--tdk-danger-soft);  color: var(--tdk-danger); }
.tdk-pill-gold    { background: var(--tdk-gold-soft);    color: var(--tdk-gold); }

/* ─── Progress ───────────────────────────────────────────── */
.tdk-bar {
  width: 100%;
  height: 6px;
  border-radius: var(--tdk-radius-pill);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.tdk-bar > .tdk-bar-fill {
  height: 100%;
  background: var(--tdk-accent);
  border-radius: var(--tdk-radius-pill);
  transition: width var(--tdk-trans-slow);
}

/* ─── Labels mono ────────────────────────────────────────── */
.tdk-mono-label {
  font-family: var(--tdk-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tdk-text-3);
}
.tdk-mono-label--accent { color: var(--tdk-accent); }

/* ─── Headings ───────────────────────────────────────────── */
.tdk-h1 { font-size: var(--tdk-fs-2xl); font-weight: var(--tdk-fw-semi); letter-spacing: -0.025em; line-height: 1.15; margin: 0; }
.tdk-h2 { font-size: var(--tdk-fs-xl);  font-weight: var(--tdk-fw-semi); letter-spacing: -0.02em;  line-height: 1.2;  margin: 0; }
.tdk-h3 { font-size: var(--tdk-fs-lg);  font-weight: var(--tdk-fw-semi); letter-spacing: -0.015em; line-height: 1.25; margin: 0; }

/* ─── Layout · sidebar fixa ──────────────────────────────── */
.tdk-shell {
  display: flex;
  min-height: 100vh;
  background: var(--tdk-bg);
}
.tdk-sidebar {
  flex: 0 0 240px;
  background: var(--tdk-bg-2);
  border-right: 1px solid var(--tdk-border);
  /* Fixa a sidebar (100vh, sticky) — a rolagem interna vive no
     .tdk-sidebar-scroll (só logo+trilha+nav rolam); o rodapé
     (Mensagens/Perfil/usuário) fica sempre colado embaixo. Padding
     removido daqui e movido pros filhos scroll/footer, pra que a barra
     de rolagem interna não corte o respiro lateral. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.tdk-nav-item {
  display: flex;
  align-items: center;
  gap: var(--tdk-sp-3);
  padding: var(--tdk-sp-2) var(--tdk-sp-3);
  border-radius: 7px;
  color: var(--tdk-text-2);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tdk-trans);
}
.tdk-nav-item:hover  { background: var(--tdk-surface); color: var(--tdk-text); }
.tdk-nav-item.active { background: var(--tdk-surface); color: var(--tdk-text); border: 1px solid var(--tdk-border); font-weight: var(--tdk-fw-medium); }