/**
 * Theme1 - Design System Variables v3.0
 * Sistema de nomenclatura BEM com tokens semânticos
 * 
 * Este arquivo define todas as variáveis CSS customizáveis do tema.
 * Os valores padrão aqui podem ser sobrescritos por /theme/colors.css
 * gerado dinamicamente pelo painel administrativo.
 * 
 * @version 3.0
 * @date 2026-01-13
 */

:root {
  /* ============================================
     TOKENS DE SPACING
     ============================================ */
  --theme1-spacing-xs: 0.25rem;   /* 4px */
  --theme1-spacing-sm: 0.5rem;    /* 8px */
  --theme1-spacing-md: 1rem;      /* 16px */
  --theme1-spacing-lg: 1.5rem;    /* 24px */
  --theme1-spacing-xl: 2rem;      /* 32px */
  --theme1-spacing-xxl: 3rem;     /* 48px */

  /* ============================================
     TOKENS DE BORDER RADIUS
     ============================================ */
  --theme1-border-radius-sm: 4px;
  --theme1-border-radius-md: 6px;
  --theme1-border-radius-lg: 8px;
  --theme1-border-radius-xl: 12px;

  /* ============================================
     NAVEGAÇÃO PRINCIPAL
     ============================================ */
  --theme1-nav-bg-color: #ffffff;
  --theme1-nav-text-color: #5e7279;
  --theme1-nav-active-color: #e04622;
  --theme1-nav-hover-text-color: #ffffff;
  --theme1-nav-hover-bg-color: #e04622;
  --theme1-nav-border-color: rgba(94, 114, 121, 0.1);

  /* Retrocompatibilidade */
  --color-menu-bg: var(--theme1-nav-bg-color);
  --color-menu-text: var(--theme1-nav-text-color);
  --color-menu-active: var(--theme1-nav-active-color);
  --color-menu-hover: var(--theme1-nav-hover-text-color);
  --color-menu-hover-bg: var(--theme1-nav-hover-bg-color);

  /* ============================================
     BARRA SUPERIOR / TOPBAR
     ============================================ */
  --theme1-topbar-bg-color: #eaeff3;
  --theme1-topbar-text-color: #e04622;
  --theme1-topbar-link-color: #e04622;
  --theme1-topbar-link-hover-color: #b8361a;

  /* Retrocompatibilidade */
  --color-topo-bg: var(--theme1-topbar-bg-color);
  --color-topo-text: var(--theme1-topbar-text-color);
  --color-topo-link: var(--theme1-topbar-link-color);

  /* ============================================
     SLIDER / CAROUSEL
     ============================================ */
  --theme1-slide-text-primary: rgb(86, 91, 112);
  --theme1-slide-bg-primary: rgb(247, 248, 251);
  --theme1-slide-text-secondary: rgb(255, 255, 255);
  --theme1-slide-bg-secondary: rgb(232, 119, 92);

  /* Retrocompatibilidade */
  --color-slide-text-1: var(--theme1-slide-text-primary);
  --color-slide-bg-1: var(--theme1-slide-bg-primary);
  --color-slide-text-2: var(--theme1-slide-text-secondary);
  --color-slide-bg-2: var(--theme1-slide-bg-secondary);

  /* ============================================
     CONTEÚDO PRINCIPAL
     ============================================ */
  --theme1-body-bg-color: #ffffff;
  --theme1-body-text-color: #333333;
  --theme1-content-bg-color: #f8f9fa;
  --theme1-aside-title-color: #2e353e;

  /* Retrocompatibilidade */
  --color-body-bg: var(--theme1-body-bg-color);
  --color-body-text: var(--theme1-body-text-color);
  --color-aside-title: var(--theme1-aside-title-color);

  /* ============================================
     SISTEMA DE BOTÕES
     ============================================ */
  --theme1-btn-primary-bg: #e77055;
  --theme1-btn-primary-text: #ffffff;
  --theme1-btn-primary-hover-bg: #E05A3D;
  --theme1-btn-primary-hover-text: #ffffff;
  --theme1-btn-secondary-bg: #6c757d;
  --theme1-btn-secondary-text: #ffffff;
  --theme1-btn-border-radius: var(--theme1-border-radius-md);
  --theme1-btn-padding: var(--theme1-spacing-sm) var(--theme1-spacing-lg);

  /* Retrocompatibilidade */
  --color-btn-bg: var(--theme1-btn-primary-bg);
  --color-btn-text: var(--theme1-btn-primary-text);
  --color-btn-hover-bg: var(--theme1-btn-primary-hover-bg);

  /* ============================================
     RODAPÉ
     ============================================ */
  --theme1-footer-bg-color: #E9EFF2;
  --theme1-footer-text-color: #777777;
  --theme1-footer-link-color: #777777;
  --theme1-footer-link-hover-color: var(--theme1-nav-active-color);
  --theme1-footer-bottom-bg-color: #d4e6f1;

  /* Retrocompatibilidade */
  --color-footer-bg: var(--theme1-footer-bg-color);
  --color-footer-text: var(--theme1-footer-text-color);
  --color-footer-link: var(--theme1-footer-link-color);

  /* ============================================
     WIDGETS / COMPONENTES
     ============================================ */
  --theme1-widget-bg-color: #2c3e50;
  --theme1-widget-text-color: #ffffff;
  --theme1-widget-link-color: #60a5fa;
  --theme1-widget-border-color: rgba(255, 255, 255, 0.1);
  --theme1-widget-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --theme1-widget-border-radius: var(--theme1-border-radius-lg);
  --theme1-widget-padding: var(--theme1-spacing-lg);

  /* Retrocompatibilidade */
  --color-widget-bg: var(--theme1-widget-bg-color);
  --color-widget-text: var(--theme1-widget-text-color);
  --color-widget-link: var(--theme1-widget-link-color);

  /* ============================================
     COTAÇÕES E CÂMBIO
     ============================================ */
  --theme1-currency-bg-color: var(--theme1-widget-bg-color);
  --theme1-currency-text-color: var(--theme1-widget-text-color);
  --theme1-currency-link-color: var(--theme1-widget-link-color);
  --theme1-currency-highlight-color: #ffee6b;

  /* Retrocompatibilidade */
  --color-cambio-bg: var(--theme1-currency-bg-color);
  --color-cambio-text: var(--theme1-currency-text-color);
  --color-cotacao-bg: var(--theme1-currency-bg-color);
  --color-cotacao-text: var(--theme1-currency-text-color);
  --color-cotacao-link: var(--theme1-currency-link-color);

  /* ============================================
     CALENDÁRIO
     ============================================ */
  --theme1-calendar-bg-color: #ffffff;
  --theme1-calendar-header-bg-color: #f5f5f5;
  --theme1-calendar-header-text-color: #666666;
  --theme1-calendar-event-bg-color: #ffee6b;
  --theme1-calendar-event-text-color: #000000;
  --theme1-calendar-today-bg-color: #008ade;
  --theme1-calendar-today-text-color: #ffffff;
  --theme1-calendar-text-color: #2e353e;
  --theme1-calendar-link-color: #f672a4;

  /* Retrocompatibilidade */
  --color-calendar-bg: var(--theme1-calendar-bg-color);
  --color-calendar-head-bg: var(--theme1-calendar-header-bg-color);
  --color-calendar-head-text: var(--theme1-calendar-header-text-color);
  --color-calendar-event-bg: var(--theme1-calendar-event-bg-color);
  --color-calendar-event-text: var(--theme1-calendar-event-text-color);
  --color-calendar-today-bg: var(--theme1-calendar-today-bg-color);
  --color-calendar-today-text: var(--theme1-calendar-today-text-color);
  --color-calendario-bg: var(--theme1-calendar-bg-color);
  --color-calendario-text: var(--theme1-calendar-text-color);
  --color-calendario-link: var(--theme1-calendar-link-color);

  /* ============================================
     REDES SOCIAIS
     ============================================ */
  --theme1-social-icon-color: #000000;
  --theme1-social-bg-color: #ffffff;
  --theme1-social-hover-color: var(--theme1-nav-active-color);

  /* Retrocompatibilidade */
  --color-social-icon: var(--theme1-social-icon-color);
  --color-social-bg: var(--theme1-social-bg-color);

  /* ============================================
     SISTEMA DE CORES PRIMÁRIAS
     ============================================ */
  --theme1-primary-color: var(--theme1-nav-active-color);
  --theme1-secondary-color: var(--theme1-nav-text-color);
  --theme1-success-color: #28a745;
  --theme1-warning-color: #ffc107;
  --theme1-danger-color: #dc3545;
  --theme1-info-color: #17a2b8;

  /* Aliases globais para retrocompatibilidade */
  --color-primary: var(--theme1-primary-color);
  --color-body-link: var(--theme1-primary-color);

  /* ============================================
     VARIAÇÕES DE CORES AUTOMÁTICAS
     ============================================ */
  --theme1-primary-light: color-mix(in srgb, var(--theme1-primary-color) 80%, white);
  --theme1-primary-dark: color-mix(in srgb, var(--theme1-primary-color) 80%, black);
  --theme1-primary-alpha-10: color-mix(in srgb, var(--theme1-primary-color) 10%, transparent);
  --theme1-primary-alpha-20: color-mix(in srgb, var(--theme1-primary-color) 20%, transparent);
  --theme1-primary-alpha-30: color-mix(in srgb, var(--theme1-primary-color) 30%, transparent);

  /* Retrocompatibilidade */
  --color-primary-light: var(--theme1-primary-light);
  --color-primary-dark: var(--theme1-primary-dark);
  --color-primary-alpha-10: var(--theme1-primary-alpha-10);
  --color-primary-alpha-20: var(--theme1-primary-alpha-20);
}

/* ============================================
   FALLBACKS PARA NAVEGADORES ANTIGOS
   ============================================ */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root {
    --theme1-primary-light: #f5a89d;
    --theme1-primary-dark: #8b2d1e;
    --theme1-primary-alpha-10: rgba(224, 70, 34, 0.1);
    --theme1-primary-alpha-20: rgba(224, 70, 34, 0.2);
    --theme1-primary-alpha-30: rgba(224, 70, 34, 0.3);
    
    /* Retrocompatibilidade */
    --color-primary-light: var(--theme1-primary-light);
    --color-primary-dark: var(--theme1-primary-dark);
    --color-primary-alpha-10: var(--theme1-primary-alpha-10);
    --color-primary-alpha-20: var(--theme1-primary-alpha-20);
  }
}