/**
 * Design Tokens — Nixloc
 * -------------------------------------------------------
 * Como usar em componentes:
 *   background: var(--bg-base);
 *   border: 1px solid var(--border-color);
 *   color: var(--text-secondary);
 *
 * O dark mode é automático via .dark-theme no body.
 */

/* ============================================================
   LIGHT THEME (padrão)
   ============================================================ */
:root {
  /* --- Backgrounds --- */
  --bg-page:       #FAFAFC;   /* fundo geral da página */
  --bg-base:       #ffffff;   /* cards, paineis, formulários */
  --bg-elevated:   #F3F4F6;   /* superfícies sobre o base (toolbar, cabeçalho de card) */
  --bg-hover:      #F0F0F0;   /* estado hover de itens de menu/lista */

  /* --- Borders --- */
  --border-color:  #DBDFE9;   /* borda padrão */
  --border-subtle: #EAEDF3;   /* borda sutil (tabs, divisores) */
  --border-input:  #DBDEE0;   /* borda de inputs */

  /* --- Text --- */
  --text-primary:   #1a1a1a;  /* texto principal */
  --text-secondary: #757D8C;  /* texto secundário, labels */
  --text-muted:     #B9BABB;  /* texto desabilitado, placeholders */
  --text-inverse:   #ffffff;  /* texto sobre fundos escuros */

  /* --- Brand --- */
  --color-brand:       #577696;  /* cor principal do sistema */
  --color-brand-hover: #4680A5;  /* hover da cor brand */
  --color-brand-dark:  #2C4C6C;  /* brand mais escuro */
  --color-brand-light: #a5bed6;  /* brand mais claro */

  /* --- Semantic --- */
  --color-success: #38A169;
  --color-warning: #FFC107;
  --color-danger:  #FF5454;
  --color-info:    #91d5ff;

  /* --- Forms --- */
  --input-bg:          #ffffff;
  --input-border:      #e5e4e8;
  --input-color:       #1a1a1a;
  --input-disabled-bg: #fbfbfc;
  --input-focus-shadow: 0 0 0 0;

  /* --- Shadows --- */
  --shadow-sm:  0px 10px 20px -6px rgba(0, 0, 0, 0.03);
  --shadow-md:  0px 10px 20px -6px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0px 4px 20px 0px rgba(52, 73, 94, 0.2);
}

/* ============================================================
   DARK THEME
   ============================================================ */
.dark-theme {
  /* --- Backgrounds --- */
  --bg-page:       #1C2128;   /* fundo geral da página */
  --bg-base:       #22272E;   /* cards, paineis, formulários */
  --bg-elevated:   #2D333B;   /* superfícies elevadas (sidebar, hover) */
  --bg-hover:      #2D333B;   /* estado hover */

  /* --- Borders --- */
  --border-color:  #444C56;   /* borda padrão */
  --border-subtle: #444C56;   /* borda sutil */
  --border-input:  #444C56;   /* borda de inputs */

  /* --- Text --- */
  --text-primary:   #ffffff;  /* texto principal */
  --text-secondary: #adbac7;  /* texto secundário */
  --text-muted:     #545d68;  /* texto desabilitado */
  --text-inverse:   #1a1a1a;  /* texto sobre fundos claros */

  /* --- Brand (mantida igual ao light) --- */
  --color-brand:       #577696;
  --color-brand-hover: #4680A5;
  --color-brand-dark:  #2C4C6C;
  --color-brand-light: #a5bed6;

  /* --- Semantic (mantida igual ao light) --- */
  --color-success: #38A169;
  --color-warning: #FFC107;
  --color-danger:  #FF5454;
  --color-info:    #91d5ff;

  /* --- Forms --- */
  --input-bg:          #22272E;
  --input-border:      #444C56;
  --input-color:       #ffffff;
  --input-disabled-bg: #2D333B;
  --input-focus-shadow: 0 0 0 0;

  /* --- Shadows --- */
  --shadow-sm: 0px 10px 20px -6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0px 10px 20px -6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0px 4px 20px 0px rgba(0, 0, 0, 0.4);
}