/* ==========================================================================
   dio/tokens.css — Design tokens do redesign visual (desenvolvedor.io)

   Fonte única de verdade para cor, tipografia, espaçamento, raio e sombra.
   Só variáveis: nenhuma classe é definida aqui.
   Referência visual: canvas do redesign
   https://claude.ai/code/artifact/f77af4c6-390a-492a-be57-a467781fce31
   ========================================================================== */

:root {
    /* --- superfícies -------------------------------------------------- */
    --dio-bg: #0a0d12;            /* fundo base (navy profundo, nunca preto puro) */
    --dio-bg-elev: #10141b;       /* cards, header, painéis */
    --dio-bg-elev-2: #151b24;     /* hover de painel, faixas em destaque */
    --dio-border: #232a35;
    --dio-border-soft: #1a2029;

    /* --- texto -------------------------------------------------------- */
    --dio-text: #f2f5f8;
    --dio-text-dim: #98a6b8;
    --dio-text-faint: #5c6b80;

    /* --- accent (ciano tech) ------------------------------------------ */
    --dio-accent: #3ec3ef;
    --dio-accent-strong: #8adcf5;
    --dio-accent-deep: #0e93b8;
    --dio-blue-deep: #1a4fd6;     /* azul profundo: ponto de partida do gradiente dos botões primários */
    --dio-accent-ink: #04222c;    /* texto escuro sobre superfície accent clara */
    --dio-accent-rgb: 62, 195, 239; /* para rgba() em glows e bordas translúcidas */

    /* --- cor por tecnologia (categorias de curso) ---------------------
       Mesma cor para a mesma stack em toda a plataforma, casada com as cores
       que os cursos de cada categoria já usam no site (ex.: ASP.NET Core roxo,
       Arquitetura azul, Angular vermelho, EF Core ciano, DevOps azul-royal,
       IA violeta). Usada em cor cheia (tile, faixa de topo, dot). */
    --dio-c-dotnet: #9b30e6;    /* .NET / ASP.NET Core: roxo */
    --dio-c-backend: #9b30e6;   /* Back-end: mesmo roxo do .NET */
    --dio-c-frontend: #e0312f;  /* Front-end: vermelho (Angular) */
    --dio-c-arch: #2e90f6;      /* Arquitetura: azul */
    --dio-c-data: #1fb6dc;      /* Acesso a dados: ciano */
    --dio-c-devops: #5083e6;    /* DevOps: azul-royal */
    --dio-c-ia: #7b6ee0;        /* IA: violeta */

    /* --- estados ------------------------------------------------------ */
    --dio-success: #34d399;

    /* --- tipografia --------------------------------------------------- */
    --dio-font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --dio-font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --dio-font-mono: 'IBM Plex Mono', 'Consolas', monospace;

    /* --- forma e ritmo ------------------------------------------------ */
    --dio-radius-sm: 8px;
    --dio-radius: 12px;
    --dio-radius-lg: 16px;
    --dio-radius-xl: 20px;
    --dio-radius-pill: 999px;

    --dio-space-1: 4px;
    --dio-space-2: 8px;
    --dio-space-3: 12px;
    --dio-space-4: 16px;
    --dio-space-5: 24px;
    --dio-space-6: 32px;
    --dio-space-7: 48px;
    --dio-space-8: 64px;
    --dio-space-9: 96px;

    --dio-container: 1170px;      /* largura máxima do .dio-container em ≥1200px (a mesma que o site sempre teve) */
    --dio-header-h: 90px;         /* altura do .header fixo do site (80px quando .scrolled) */

    /* --- movimento ---------------------------------------------------- */
    --dio-ease: cubic-bezier(.2, .7, .2, 1);
    --dio-dur: 220ms;

    /* --- gradiente controlado ------------------------------------------
       Só em: botão primário, texto de destaque e glow de canto em painéis.
       Nunca como fundo de card inteiro. */
    --dio-gradient-primary: linear-gradient(100deg, var(--dio-blue-deep), var(--dio-accent-deep));
    --dio-gradient-text: linear-gradient(135deg, var(--dio-accent), var(--dio-c-data));
}