/**
 * AceClass — Design System Tokens (Bento Grid & Silicon Valley UI Standard)
 * Baseado no guia de estilo oficial em docs/style_guide.txt
 */

:root {
  /* 1. Cores da Marca */
  --color-primary: #7630ff;
  --color-primary-hover: #6320ee;
  --color-primary-light: rgba(118, 48, 255, 0.08);
  --color-primary-gradient: linear-gradient(135deg, #7630ff 0%, #9d4edd 100%);

  /* 2. Cores de Superfície e Fundo (Canvas) */
  --color-canvas: #F8F9FA;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F3F4F6;
  --color-border: rgba(0, 0, 0, 0.06);
  --color-border-hover: rgba(118, 48, 255, 0.25);

  /* 3. Tipografia e Texto */
  --color-text-main: #1E293B;
  --color-text-muted: #64748B;
  --color-text-subtle: #94A3B8;

  /* 4. Cores Semânticas de Feedback */
  --color-success: #10B981;
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-warning: #F59E0B;
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-danger: #EF4444;
  --color-danger-bg: rgba(239, 68, 68, 0.1);
  --color-info: #3B82F6;
  --color-info-bg: rgba(59, 130, 246, 0.1);

  /* 5. Sombras e Elevação (Bento Grid) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-card: 0px 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0px 8px 24px rgba(118, 48, 255, 0.12);
  --shadow-active: 0px 2px 6px rgba(0, 0, 0, 0.06);

  /* 6. Bordas e Raios */
  --radius-sm: 8px;
  --radius-card: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* 7. Transições e Micro-interações */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* 8. Tipografia */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-numeric: tabular-nums;
}

/* Modo Escuro */
[data-theme="dark"], body.dark-mode {
  --color-canvas: #0F172A;
  --color-surface: #1E293B;
  --color-surface-hover: #334155;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(168, 85, 247, 0.35);
  
  --color-text-main: #F8FAFC;
  --color-text-muted: #94A3B8;
  --color-text-subtle: #64748B;
  
  --shadow-card: 0px 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0px 8px 28px rgba(118, 48, 255, 0.25);
}

/* Utilitários Bento Grid */
.bento-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.bento-card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-hover);
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}