/* ==========================================================================
   RHUSKY GENESIS DESIGN SYSTEM // DESIGN TOKENS
   Paleta e dimensões canônicas da plataforma (Evangelion NERV Dark Aesthetic)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=Orbitron:wght@600;700;800;900&display=swap');

:root {
  /* Tema é escuro de ponta a ponta: sem isto o browser pinta scrollbar,
     select e date picker nativos em branco. */
  color-scheme: dark;

  /* --- Layout & Dimensões Globais --- */
  --header-height: 58px;
  /* 1200px sobrava meia tela em monitor grande e espremia tabela de 8 colunas
     em 1080p. A largura util e' o que da a sensacao de respiro; espacamento
     sozinho nao resolve. */
  --container-max: 1680px;
  --side-width: 236px;
  --side-width-min: 60px;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* --- Espaçamentos Semânticos --- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* --- Cores de Superfície & Camadas (Profundidade Cyberpunk) --- */
  --surface-void: #06080a;               /* Fundo absoluto do canvas */
  --surface-app: #080b0f;                /* Fundo da aplicação */
  --surface-card: #0c1015;               /* Painéis, cartões e blocos */
  --surface-card-subtle: #0f141b;        /* Variação sutil de cartão */
  --surface-elevated: #13181f;           /* Modais, inputs, dropdowns */
  --surface-elevated-hover: #19202a;     /* Hover de botões e listas */

  /* --- Linhas e Bordas --- */
  --border-hair: rgba(148, 163, 184, 0.12);
  --border-subtle: rgba(148, 163, 184, 0.20);
  --border-strong: rgba(148, 163, 184, 0.35);
  --border-crimson: rgba(225, 29, 72, 0.45);
  --border-emerald: rgba(0, 255, 157, 0.45);

  /* --- Cores Semânticas & Neon Accents --- */
  --color-crimson: #e11d48;
  --color-crimson-bright: #fb7185;
  --color-crimson-dark: #881337;
  --color-crimson-glow: rgba(225, 29, 72, 0.35);

  --color-emerald: #00ff9d;
  --color-emerald-bright: #34d399;
  --color-emerald-dark: #064e3b;
  --color-emerald-glow: rgba(0, 255, 157, 0.35);

  --color-amber: #f59e0b;
  --color-amber-dim: rgba(245, 158, 11, 0.14);
  --color-cyan: #38bdf8;
  --color-cyan-glow: rgba(56, 189, 248, 0.35);

  --color-danger: #ef4444;
  --color-danger-dim: rgba(239, 68, 68, 0.14);

  /* --- Tipografia & Textos --- */
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Orbitron', 'JetBrains Mono', monospace;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-faint: #475569;

  /* --- Sombras & Efeitos --- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  --shadow-modal: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 35px -10px rgba(225, 29, 72, 0.25);
  --backdrop-blur: blur(12px);
}