/**
 * ARCO Calendar v8.2 - Design Tokens
 * Sistema de design modular para Motor de Decisão
 */

:root {
  /* ═══════════════════════════════════════════════════════════════
     CORES ARCO - Identidade Visual
     ═══════════════════════════════════════════════════════════════ */
  --arco-azul: #0B3C5D;
  --arco-azul-light: #1a5a8a;
  --arco-azul-dark: #072a42;
  --arco-laranja: #F28C28;
  --arco-laranja-light: #f5a555;
  --arco-laranja-dark: #d97a1f;
  
  /* ═══════════════════════════════════════════════════════════════
     CORES DE IMPACTO (Motor de Decisão)
     ═══════════════════════════════════════════════════════════════ */
  /* Impacto 4 - Crítico */
  --impacto-4-bg: #FEE2E2;
  --impacto-4-border: #DC2626;
  --impacto-4-text: #991B1B;
  --impacto-4-badge: #DC2626;
  --impacto-4-pulse: rgba(220, 38, 38, 0.4);
  
  /* Impacto 3 - Alto */
  --impacto-3-bg: #FEF3C7;
  --impacto-3-border: #F59E0B;
  --impacto-3-text: #92400E;
  --impacto-3-badge: #F59E0B;
  
  /* Impacto 2 - Médio */
  --impacto-2-bg: #DBEAFE;
  --impacto-2-border: #3B82F6;
  --impacto-2-text: #1E40AF;
  --impacto-2-badge: #3B82F6;
  
  /* Impacto 1 - Baixo */
  --impacto-1-bg: #F3F4F6;
  --impacto-1-border: #9CA3AF;
  --impacto-1-text: #4B5563;
  --impacto-1-badge: #9CA3AF;
  
  /* ═══════════════════════════════════════════════════════════════
     CORES DE FASES TEMPORAIS
     ═══════════════════════════════════════════════════════════════ */
  --fase-planejamento: #E0E7FF;
  --fase-planejamento-text: #3730A3;
  --fase-preparacao: #FEF3C7;
  --fase-preparacao-text: #92400E;
  --fase-ideal: #D1FAE5;
  --fase-ideal-text: #065F46;
  --fase-lastcall: #FEE2E2;
  --fase-lastcall-text: #991B1B;
  --fase-evento: #F3E8FF;
  --fase-evento-text: #6B21A8;
  --fase-passado: #F3F4F6;
  --fase-passado-text: #6B7280;
  
  /* ═══════════════════════════════════════════════════════════════
     SUPERFÍCIES E BACKGROUNDS
     ═══════════════════════════════════════════════════════════════ */
  --surface-primary: #FFFFFF;
  --surface-secondary: #F9FAFB;
  --surface-tertiary: #F3F4F6;
  --surface-overlay: rgba(0, 0, 0, 0.5);
  --surface-modal: #FFFFFF;
  
  /* ═══════════════════════════════════════════════════════════════
     TEXTO
     ═══════════════════════════════════════════════════════════════ */
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-tertiary: #9CA3AF;
  --text-inverse: #FFFFFF;
  --text-link: #2563EB;
  --text-success: #059669;
  --text-warning: #D97706;
  --text-error: #DC2626;
  
  /* ═══════════════════════════════════════════════════════════════
     ESPAÇAMENTOS
     ═══════════════════════════════════════════════════════════════ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  
  /* ═══════════════════════════════════════════════════════════════
     TIPOGRAFIA
     ═══════════════════════════════════════════════════════════════ */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ═══════════════════════════════════════════════════════════════
     BORDAS E RAIOS
     ═══════════════════════════════════════════════════════════════ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  
  /* ═══════════════════════════════════════════════════════════════
     SOMBRAS
     ═══════════════════════════════════════════════════════════════ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-critical: 0 0 0 4px var(--impacto-4-pulse);
  
  /* ═══════════════════════════════════════════════════════════════
     TRANSIÇÕES
     ═══════════════════════════════════════════════════════════════ */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  
  /* ═══════════════════════════════════════════════════════════════
     TOUCH TARGETS (Mobile-first)
     ═══════════════════════════════════════════════════════════════ */
  --touch-min: 44px;
  --touch-comfortable: 48px;
  
  /* ═══════════════════════════════════════════════════════════════
     Z-INDEX LAYERS
     ═══════════════════════════════════════════════════════════════ */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-nivel-1: 600;
  --z-toast: 700;
  
  /* ═══════════════════════════════════════════════════════════════
     MARCAS ARCO (Cores de identificação)
     ═══════════════════════════════════════════════════════════════ */
  --marca-cantagallo: #8B4513;
  --marca-primegrill: #2F4F4F;
  --marca-montenovo: #556B2F;
  --marca-artmill: #4A4A4A;
  --marca-admmetais: #708090;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMAÇÕES GLOBAIS
   ═══════════════════════════════════════════════════════════════ */
@keyframes pulse-critical {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--impacto-4-pulse);
  }
  50% {
    box-shadow: 0 0 0 8px transparent;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════════
   MEDIA QUERIES BREAKPOINTS (referência)
   - Mobile: max-width: 375px (iPhone SE)
   - Mobile Large: max-width: 428px
   - Tablet: max-width: 768px
   - Desktop: min-width: 769px
   ═══════════════════════════════════════════════════════════════ */