/* =============================================================
   IDENTIDADE VISUAL MDEV — TOKENS
   -------------------------------------------------------------
   Copie este arquivo para o outro projeto e inclua logo no <head>:

       <link rel="stylesheet" href="identidade/tokens.css">
       <link rel="stylesheet" href="identidade/base.css">
       <link rel="stylesheet" href="identidade/componentes.css">

   Todos os valores foram extraidos do TMS Salis em producao.
   Trocar a marca e so mudar a secao "1. MARCA" mais abaixo.
   ============================================================= */

:root {
  /* ---------------------------------------------------------
     1. MARCA
     O dourado #D4A843 e a cor institucional (documentos fiscais,
     proposta, assinatura). O ciano #38BDF8 e a cor de acao
     (botao principal, link, foco).
     --------------------------------------------------------- */
  --brand-gold:        #D4A843;
  --brand-gold-hover:  #E5B854;
  --brand-gold-rgb:    212, 168, 67;

  --brand-primary:        #38BDF8;
  --brand-primary-hover:  #0EA5E9;
  --brand-primary-rgb:    56, 189, 248;
  --brand-primary-pill:   #1C3345;

  --brand-accent:      #F59E0B;
  --brand-accent-pill: #332719;

  /* ---------------------------------------------------------
     2. FUNDOS (tema escuro, o padrao do sistema)
     A hierarquia vai do fundo mais profundo ao mais elevado:
     body -> surface -> elevated -> input
     --------------------------------------------------------- */
  --bg-body:            #0E131A;
  --bg-surface:         #18202C;
  --bg-surface-elevated:#202B3B;
  --bg-sidebar:         #111722;
  --bg-topbar:          #0F1622;
  --bg-input:           #0B1017;
  --input-bg:           #121822;

  --bg-sidebar-hover:      rgba(255, 255, 255, 0.05);
  --bg-table-hover:       #182332;
  --bg-table-stripe:      #111823;
  --table-row-hover:      #1E2838;

  /* ---------------------------------------------------------
     3. TEXTO
     --------------------------------------------------------- */
  --text-primary:   #F8FAFC;   /* titulos, numeros grandes */
  --text-main:      #E2E8F0;   /* texto corrente */
  --text-rgb:       226, 232, 240;
  --text-secondary: #94A3B8;   /* legendas, sub-rotulos */
  --text-muted:     #64748B;   /* placeholders, desabilitado */

  /* ---------------------------------------------------------
     4. ESTADOS
     Cores de feedback. Sempre acompanhadas do fundo e da borda
     em alpha baixo — nunca texto solto sobre fundo solido.
     --------------------------------------------------------- */
  --success:      #34D399;
  --success-rgb:  52, 211, 153;
  --success-hover:#45DDA5;
  --success-bg:   #162E28;

  --danger:       #F87171;
  --danger-rgb:   248, 113, 113;
  --danger-hover: #FA8A8A;
  --danger-bg:    #351C1C;

  --warning:      #FBBF24;
  --warning-rgb:  251, 191, 36;
  --warning-bg:   #332719;

  --info:         #38BDF8;
  --info-bg:      #1C3345;

  /* badges de status, com fundo e borda proprios */
  --status-success:      #10B981;
  --status-success-bg:   rgba(16, 185, 129, 0.12);
  --status-success-border: rgba(16, 185, 129, 0.3);

  --status-danger:       #EF4444;
  --status-danger-bg:    rgba(239, 68, 68, 0.12);
  --status-danger-border: rgba(239, 68, 68, 0.3);

  --status-warning:      #F59E0B;
  --status-warning-bg:   rgba(245, 158, 11, 0.12);
  --status-warning-border: rgba(245, 158, 11, 0.3);

  --status-info:         #38BDF8;
  --status-info-bg:      rgba(56, 189, 248, 0.12);
  --status-info-border:  rgba(56, 189, 248, 0.3);

  --status-purple:       #C084FC;
  --status-purple-bg:    rgba(192, 132, 252, 0.12);
  --partial:             #C4B5FD;
  --partial-bg:          #2A2440;
  --status-orange:       #FB923C;

  /* ---------------------------------------------------------
     5. BORDAS E RAIO
     O padrao e raio grande: 12px no padrao, 16px nos cards.
     E o que da o aspecto "app" em vez de "formulario".
     --------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;   /* padrao: botao, input, badge */
  --radius-lg:   16px;   /* card, painel */
  --radius-xl:   18px;
  --radius-full: 9999px; /* pill, avatar, badge */

  --border-color:        rgba(var(--text-rgb), 0.10);
  --border-color-strong: rgba(var(--text-rgb), 0.18);

  /* ---------------------------------------------------------
     6. SOMBRA
     Em tema escuro a sombra substitui a borda como separacao.
     A "glow" e reservada para acao principal e para o dourado.
     --------------------------------------------------------- */
  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:       0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:       0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-card:     0 4px 20px -2px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 16px 36px -4px rgba(0, 0, 0, 0.5);
  --shadow-glow-cyan: 0 0 16px rgba(56, 189, 248, 0.18);
  --shadow-glow-gold: 0 0 16px rgba(212, 168, 67, 0.18);

  /* ---------------------------------------------------------
     7. TIPOGRAFIA
     IBM Plex Sans no texto, IBM Plex Mono em numero, chave e
     qualquer dado que precisa ser lido coluna a coluna.
     --------------------------------------------------------- */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  24px;

  /* ---------------------------------------------------------
     8. MEDIDAS DE LAYOUT
     --------------------------------------------------------- */
  --sidebar-width:            250px;
  --sidebar-width-collapsed:  64px;
  --topbar-height:            64px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ---------------------------------------------------------
     Cores dos grupos do menu
     ---------------------------------------------------------
     Cada grupo tem a sua cor, aplicada ao icone dos itens. Serve para
     localizar a secao de relance: o olho acha "Pessoal" pelo verde antes
     de ler o titulo. */
  --grupo-geral:          #94A3B8;
  --grupo-cadastros:      #60A5FA;
  --grupo-contabilidade:  #38BDF8;
  --grupo-pessoal:        #34D399;
  --grupo-relatorios:     #A78BFA;
  --grupo-analise:        #FBBF24;
  --grupo-fiscal:         #FB7185;
  --grupo-administracao:  #C084FC;
}