/*
 * ══════════════════════════════════════════════
 *  TOKENS.CSS — Design Tokens (Variáveis CSS)
 * ══════════════════════════════════════════════
 *
 *  Propósito : Fonte única de verdade para TODOS os tokens visuais.
 *              Extraído de assets/design_system.html.
 *  Dependências : Nenhuma.
 *  NÃO COLOCAR AQUI : Regras de estilo, seletores, keyframes.
 */

:root {

    /* ── Brand Colors ─────────────────────────── */
    --color-primary:        #0ea5e9;   /* Sky-500  — botões, links, acentos */
    --color-primary-light:  #38bdf8;   /* Sky-400  — gradientes, glows */
    --color-primary-deep:   #0284c7;   /* Sky-700  — gradientes profundos */
    --color-brand-deep:     #082f49;   /* Sky-950  — acentos escuros */

    /* ── Surface Colors ───────────────────────── */
    --color-obsidian:       #09090b;   /* Fundo mais profundo */
    --color-surface:        #0a0a0a;   /* Background padrão de cards/seções */
    --color-panel:          #111111;   /* Cards, modais, painéis elevados */
    --color-border:         #222222;   /* Bordas padrão */
    --color-black:          #000000;   /* Fundo absoluto */
    --color-white:          #ffffff;   /* Texto principal, ícones */

    /* ── Feedback Colors ──────────────────────── */
    --color-error:          #ef4444;   /* Destrutivo / Erro */
    --color-success:        #10b981;   /* Sucesso / Validação */
    --color-warning:        #f59e0b;   /* Aviso / Pendente */

    /* ── Typography ───────────────────────────── */
    --font-heading:  'Space Grotesk', sans-serif;
    --font-body:     'Inter', sans-serif;
    --font-mono:     'JetBrains Mono', monospace;

    /* ── Spacing (base 4px) ───────────────────── */
    --spacing-xs:   0.25rem;   /* 4px  */
    --spacing-sm:   0.5rem;    /* 8px  */
    --spacing-md:   1rem;      /* 16px */
    --spacing-lg:   1.5rem;    /* 24px */
    --spacing-xl:   2rem;      /* 32px */
    --spacing-2xl:  3rem;      /* 48px */
    --spacing-3xl:  4rem;      /* 64px */

    /* ── Border Radius ────────────────────────── */
    --radius-sm:    0.5rem;    /* 8px  */
    --radius-md:    0.75rem;   /* 12px */
    --radius-lg:    1.25rem;   /* 20px */
    --radius-xl:    1.5rem;    /* 24px */
    --radius-full:  9999px;    /* Pílula */

    /* ── Transitions ──────────────────────────── */
    --ease-smooth:      cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast:    0.2s;
    --duration-normal:  0.3s;
    --duration-slow:    0.5s;
}