/**
 * Focofy Factory - Compatibilidade de Tokens
 * 
 * Mapeia tokens antigos para os novos tokens dinâmicos
 * Garante retrocompatibilidade com CSS existente
 * 
 * @package FocofyFactory
 * @version 1.1.0
 */

:root {
  /* ============================================
     MAPEAMENTO DE COMPATIBILIDADE
     ============================================
     
     Tokens antigos (--color-*, --surface-*, etc)
     → Mapeados para novos tokens (--focofy-*)
  */
  
  /* Cores antigas → novas */
  --color-primary: var(--color-accent);
  --color-primary-hover: var(--color-accent-hover);
  --color-secondary: var(--color-accent-2);
  --color-dark: var(--color-surface-dark);
  --color-light: var(--color-surface-1);
  --color-success: var(--color-success);
  --color-error: var(--color-danger);
  
  /* Surfaces antigas → novas */
  --surface-primary: var(--color-surface-2);
  --surface-secondary: color-mix(in srgb, white 8%, transparent);
  --surface-tertiary: color-mix(in srgb, white 12%, transparent);
  --surface-hover: color-mix(in srgb, white 16%, transparent);
  
  /* Borders antigos → novos */
  --border-subtle: color-mix(in srgb, white 6%, transparent);
  --border-default: var(--color-border-subtle);
  --border-strong: color-mix(in srgb, white 20%, transparent);
  
  /* Neutros para botões */
  --focofy-neutral: var(--color-surface-1);
  --focofy-accent: var(--btn-secondary-bg);
  
  /* Backgrounds */
  --focofy-bg: var(--color-surface-dark);
  
  /* Container e espaçamentos */
  --focofy-container: var(--container);
  --focofy-gutter: var(--pad-x);
  
  /* Efeitos */
  --focofy-radius: var(--radius-md);
  --focofy-shadow: var(--shadow-md);
  
  /* ============================================
     TOKENS DE LAYOUT (mantidos)
     ============================================ */
  
  /* Grid responsivo */
  --features-cols: 3;
  --benefits-cols: 3;
  --gap-lg: var(--space-6);
  
  /* Header */
  --header-h: 80px;
  --header-h-compact: 64px;
  --header-h-desktop: 90px;
  --header-h-desktop-compact: 70px;
  --header-bg: color-mix(in srgb, var(--color-surface-dark) 95%, transparent);
  --header-bg-compact: color-mix(in srgb, var(--color-surface-dark) 98%, transparent);
  --header-border: color-mix(in srgb, white 8%, transparent);
  --header-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
  
  /* Hero */
  --hero-overlay: 0.6;
  --hero-video-opacity: 0.4;
  --hero-video-overlay: 0.7;
  --hero-video-fit: cover;
  --hero-video-poster: none;
  --hero-bg-mobile: var(--color-surface-dark);
  
  /* Icons */
  --icon-size: 48px;
  --icon-box: 64px;
  
  /* Typography helpers */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  
  /* Mobile padding */
  --m-pad: 20px;
  --pad-x-sm: 16px;
  
  /* Marquee */
  --marquee-card-w: 280px;
  --marquee-card-h: 180px;
  
  /* ============================================
     MEDIA QUERIES - Ajustes Responsivos
     ============================================ */
}

@media (max-width: 1024px) {
  :root {
    --features-cols: 2;
    --benefits-cols: 2;
  }
}

@media (max-width: 768px) {
  :root {
    --features-cols: 1;
    --benefits-cols: 1;
    --header-h: 64px;
    --header-h-compact: 56px;
    --icon-size: 40px;
    --icon-box: 56px;
  }
}