/* ============================================
   BASE STYLES
   Variables, resets, and global typography
   ============================================ */

:root {
  /* ========== SPACING ========== */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --gap: var(--space-lg);
  
  /* ========== COLORS - ROLES ========== */
  --color-analista: #2563eb;
  --color-analista-hover: #1d4ed8;
  --color-programador: #16a34a;
  --color-programador-hover: #15803d;
  --color-qa: #f59e0b;
  --color-qa-hover: #d97706;
  
  /* ========== COLORS - UI ========== */
  --color-bg-primary: #eef2f5;
  --color-bg-column: #f4f6f8;
  --color-bg-card: #fff;
  --color-accent: #2b8aef;
  --color-accent-hover: #1e7cd6;
  --color-text-primary: #111;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  
  /* ========== COLORS - STATES ========== */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;
  
  /* ========== COLORS - SEMANTIC ========== */
  --color-wip-normal: rgba(0, 0, 0, 0.04);
  --color-wip-limit-bg: #fef3c7;
  --color-wip-limit-text: #d97706;
  --color-wip-limit-border: #fbbf24;
  
  /* ========== BORDER RADIUS ========== */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  
  /* ========== SHADOWS ========== */
  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 4px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 8px rgba(43, 138, 239, 0.12);
  --shadow-lg: 0 4px 12px rgba(139, 92, 246, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
  
  /* ========== TRANSITIONS ========== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ========== LEGACY (mantido para compatibilidade) ========== */
  --col-bg: var(--color-bg-column);
  --card-bg: var(--color-bg-card);
  --accent: var(--color-accent);
}

html, body {
  height: 100%;
  margin: 0;
  font-family: Inter, Segoe UI, Helvetica, Arial, sans-serif;
  background: var(--color-bg-primary);
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Mobile: allow body to scroll */
@media (max-width: 768px) {
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }
}

h1 {
  margin: 0 0 var(--space-md) 0;
  font-size: 20px;
}

/* ============================================
   GAME FOOTER
   ============================================ */

.game-footer{
  background:#2c3e50;
  color:#ecf0f1;
  padding:16px 24px;
  margin-top:auto;
  border-top:3px solid #34495e;
}

.footer-content{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.footer-info{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
}

.footer-version{
  font-weight:600;
  color:#3498db;
}

.footer-separator{
  color:#7f8c8d;
}

.footer-author{
  color:#ecf0f1;
}

.footer-date{
  font-size:13px;
  color:#95a5a6;
}

.footer-linkedin{
  color:#fff;
  text-decoration:underline;
  transition:color 0.2s ease;
}

.footer-linkedin:hover{
  color:#3498db;
}

@media (max-width:600px){
  .footer-content{
    flex-direction:column;
    text-align:center;
  }
  
  .footer-info{
    flex-direction:column;
    gap:8px;
  }
  
  .footer-separator{
    display:none;
  }
}