/* ============================================================================
   krypta-tokens.css — DESIGN TOKENS KRYPTA
   ============================================================================
   ARQUIVO 1 DE 7 — sempre o PRIMEIRO a ser carregado.

   Aqui vivem TODAS as cores, tipografias, sombras e gradientes do padrão
   KRYPTA. Nenhum outro arquivo do kit escreve cor "na mão": todos consomem
   as variáveis definidas aqui.

   REGRA DE OURO
   -------------
   Se você precisa de uma cor nova em qualquer sistema da empresa, ela
   nasce AQUI como variável. Nunca hard-code #hex dentro de um componente.

   TEMA
   ----
   O <html> recebe data-theme="light" (padrão) ou data-theme="dark".
   O anti-flicker (krypta-theme.js) aplica isso ANTES do primeiro paint.

   ORDEM DE CARGA RECOMENDADA
   --------------------------
     1. bootstrap.min.css        (CDN)
     2. font-awesome             (CDN)
     3. flatpickr.min.css        (CDN)
     4. Google Fonts             (Inter / Space Grotesk / JetBrains Mono)
     5. krypta-tokens.css        <-- este arquivo
     6. krypta-core.css
     7. krypta-layout.css
     8. krypta-filtros.css
     9. krypta-subtabs.css
    10. krypta-cards.css
    11. krypta-acessos.css
   (ou simplesmente krypta.css, que importa todos na ordem certa)
   ============================================================================ */

/* ============================================================================
   1. TEMA LIGHT (PADRÃO)
   ============================================================================ */
:root,
html[data-theme="light"] {
    /* --- Superfícies --- */
    --krypta-bg-page:        #FFFFFF;   /* fundo da página */
    --krypta-bg-card:        #F8FAFC;   /* fundo de card / painel */
    --krypta-bg-elevated:    #F1F5F9;   /* card-header, seg control, chips */
    --krypta-bg-overlay:     rgba(255,255,255,0.85);

    /* --- Bordas --- */
    --krypta-border:         rgba(15,23,42,0.08);   /* divisórias suaves */
    --krypta-border-strong:  rgba(15,23,42,0.16);   /* bordas de input */

    /* --- CORES DE MARCA --- */
    --krypta-cyan:           #00B8E6;   /* primária — ações, links, foco */
    --krypta-violet:         #9333EA;   /* secundária — títulos de gráfico */
    --krypta-blue:           #1D4ED8;   /* série de dado principal */
    --krypta-magenta:        #DB2777;   /* destaque / 4ª série */
    --krypta-neon:           #06B6D4;   /* apoio */

    /* --- Texto --- */
    --krypta-text-primary:   #0F172A;   /* corpo, números */
    --krypta-text-secondary: #334155;   /* labels de tabela */
    --krypta-text-muted:     #475569;   /* texto secundário */
    --krypta-text-faded:     #64748B;   /* placeholders, rodapé */

    /* --- Semânticas --- */
    --krypta-success:        #16A34A;
    --krypta-warning:        #D97706;
    --krypta-danger:         #DC2626;
    --krypta-info:           #00B8E6;

    /* --- Sombras --- */
    --krypta-shadow-soft:    0 4px 16px rgba(15,23,42,0.06);
    --krypta-shadow-medium:  0 8px 24px rgba(15,23,42,0.08);
    --krypta-shadow-glow-cyan:   0 0 20px rgba(0,184,230,0.18);
    --krypta-shadow-glow-violet: 0 0 20px rgba(147,51,234,0.18);
    /* alias legado — alguns componentes antigos pedem --krypta-shadow-light */
    --krypta-shadow-light:   0 4px 16px rgba(15,23,42,0.06);

    --krypta-grid-line:      rgba(0,184,230,0.05);

    /* --- Sidebar (SEMPRE escura, nos dois temas) --- */
    --krypta-sidebar-bg:          #0F172A;
    --krypta-sidebar-bg-2:        #1E293B;
    --krypta-sidebar-text:        #CBD5E1;
    --krypta-sidebar-text-active: #FFFFFF;
    --krypta-sidebar-active-bg:   linear-gradient(135deg, #00B8E6 0%, #9333EA 100%);

    /* --- Gradientes de marca --- */
    --krypta-gradient-brand:   linear-gradient(135deg, #00B8E6 0%, #9333EA 100%);
    --krypta-gradient-blue:    linear-gradient(135deg, #1D4ED8 0%, #00B8E6 100%);
    --krypta-gradient-magenta: linear-gradient(135deg, #DB2777 0%, #9333EA 100%);
}

/* ============================================================================
   2. TEMA DARK
   ============================================================================ */
html[data-theme="dark"] {
    --krypta-bg-page:        #030712;
    --krypta-bg-card:        #111827;
    --krypta-bg-elevated:    #1A2233;
    --krypta-bg-overlay:     rgba(3,7,18,0.78);

    --krypta-border:         rgba(255,255,255,0.08);
    --krypta-border-strong:  rgba(255,255,255,0.16);

    --krypta-cyan:           #00D1FF;
    --krypta-violet:         #A855F7;
    --krypta-blue:           #2563EB;
    --krypta-magenta:        #EC4899;
    --krypta-neon:           #7CF7FF;

    --krypta-text-primary:   #FFFFFF;
    --krypta-text-secondary: #CBD5E1;
    --krypta-text-muted:     #94A3B8;
    --krypta-text-faded:     #64748B;

    --krypta-success:        #22C55E;
    --krypta-warning:        #F59E0B;
    --krypta-danger:         #EF4444;
    --krypta-info:           #00D1FF;

    --krypta-shadow-soft:    0 8px 32px rgba(0,0,0,0.4);
    --krypta-shadow-medium:  0 12px 40px rgba(0,0,0,0.5);
    --krypta-shadow-glow-cyan:   0 0 24px rgba(0,209,255,0.25);
    --krypta-shadow-glow-violet: 0 0 24px rgba(168,85,247,0.25);
    --krypta-shadow-light:   0 8px 32px rgba(0,0,0,0.4);

    --krypta-grid-line:      rgba(0,209,255,0.03);

    --krypta-sidebar-bg:          #030712;
    --krypta-sidebar-bg-2:        #111827;
    --krypta-sidebar-text:        #94A3B8;
    --krypta-sidebar-text-active: #FFFFFF;
    --krypta-sidebar-active-bg:   linear-gradient(135deg, #00D1FF 0%, #A855F7 100%);

    --krypta-gradient-brand:   linear-gradient(135deg, #00D1FF 0%, #A855F7 100%);
    --krypta-gradient-blue:    linear-gradient(135deg, #2563EB 0%, #00D1FF 100%);
    --krypta-gradient-magenta: linear-gradient(135deg, #EC4899 0%, #A855F7 100%);
}

/* ============================================================================
   3. TIPOGRAFIA + MÉTRICAS DE LAYOUT
   ============================================================================
   3 famílias, cada uma com um papel fixo:
     Inter          -> corpo de texto, botões, inputs
     Space Grotesk  -> títulos (h1..h6), números grandes de KPI
     JetBrains Mono -> LABELS técnicos: cabeçalho de tabela, label de filtro,
                       label de KPI, rodapé, chips de status
   ============================================================================ */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
    --krypta-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --krypta-font-display: 'Space Grotesk', 'Inter', sans-serif;
    --krypta-font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;

    /* Raios de borda — escala fechada, não invente valores fora dela */
    --krypta-radius-sm:  6px;    /* badge, chip pequeno */
    --krypta-radius-md:  8px;    /* input, select, botão de filtro */
    --krypta-radius-lg:  10px;   /* botão padrão, dropdown, acordeão */
    --krypta-radius-xl:  12px;   /* card */
    --krypta-radius-2xl: 14px;   /* modal */
    --krypta-radius-pill: 999px; /* pílula, chip, switch */

    /* Alturas de controle — filtro tem 32px FIXO. Não mude. */
    --krypta-control-h:  32px;
    --krypta-sidebar-width: 220px;

    /* ---- Aliases semânticos ----
       Mantidos para permitir migração gradual de sistemas legados que já
       usavam --sistema-*. Em projeto NOVO, use direto os --krypta-*. */
    --sistema-primary:     var(--krypta-cyan);
    --sistema-bg:          var(--krypta-bg-page);
    --sistema-card-bg:     var(--krypta-bg-card);
    --sistema-border:      var(--krypta-border);
    --sistema-text:        var(--krypta-text-primary);
    --sistema-text-muted:  var(--krypta-text-muted);
    --sistema-font-body:    var(--krypta-font-body);
    --sistema-font-display: var(--krypta-font-display);
    --sistema-font-mono:    var(--krypta-font-mono);
}

/* Sincroniza os controles nativos do browser (scrollbar, date picker) */
html { color-scheme: light; transition: color-scheme 0.3s ease; }
html[data-theme="dark"] { color-scheme: dark; }