/**
 * Theme 2 (Porto) - CSS Custom Properties (Variables)
 *
 * v3.0 (token-based): vars semânticas derivadas de tokens de paleta.
 * Veja default/css/variables.css para documentação completa do modelo.
 *
 * @version 3.0
 * @date 2026-04-25
 */

:root {
  /* ============================================
     PALETTE TOKENS (sobrescritos por colors.css dinâmico)
     ============================================ */
  --color-palette-primary: #e04622;
  --color-palette-dark:    #b8361a;
  --color-palette-darker:  #7f1d1d;
  --color-palette-light:   #f87171;
  --color-palette-lighter: #fecaca;

  /* ============================================
     NEUTRAL TOKENS
     ============================================ */
  --color-neutral-white: #ffffff;
  --color-neutral-light: #f8fafc;
  --color-neutral-gray:  #64748b;
  --color-neutral-dark:  #1e293b;
  --color-neutral-black: #0f172a;

  /* ============================================
     ALIASES DE PALETA (retro-compat)
     ============================================ */
  --color-primary: var(--color-palette-primary);
  --color-primary-light: color-mix(in srgb, var(--color-palette-primary) 80%, white);
  --color-primary-dark:  color-mix(in srgb, var(--color-palette-primary) 80%, black);
  --color-primary-alpha-10: color-mix(in srgb, var(--color-palette-primary) 10%, transparent);
  --color-primary-alpha-20: color-mix(in srgb, var(--color-palette-primary) 20%, transparent);

  /* ============================================
     MENU / NAVEGAÇÃO
     ============================================ */
  --color-menu-bg:        var(--color-palette-primary);
  --color-menu-text:      var(--color-neutral-white);
  --color-menu-active:    var(--color-palette-light);
  --color-menu-hover:     var(--color-neutral-white);
  --color-menu-hover-bg:  var(--color-palette-dark);
  --color-menu-link:      var(--color-palette-light);

  /* ============================================
     TOPO / HEADER (alias para topo)
     ============================================ */
  --color-topo-bg:    var(--color-neutral-light);
  --color-topo-text:  var(--color-neutral-dark);
  --color-topo-link:  var(--color-palette-primary);
  --color-header-bg:   var(--color-topo-bg);
  --color-header-text: var(--color-topo-text);

  /* ============================================
     BODY / CONTEÚDO
     ============================================ */
  --color-body-bg:    var(--color-neutral-white);
  --color-body-text:  var(--color-neutral-dark);
  --color-body-link:  var(--color-palette-primary);
  --color-aside-title: var(--color-neutral-dark);

  /* ============================================
     SLIDES / CAROUSEL
     ============================================ */
  --color-slide-text-1: rgb(86, 91, 112);
  --color-slide-bg-1:   rgb(247, 248, 251);
  --color-slide-text-2: rgb(255, 255, 255);
  --color-slide-bg-2:   rgb(232, 119, 92);

  /* ============================================
     BOTÕES
     ============================================ */
  --color-btn-text:     var(--color-neutral-white);
  --color-btn-bg:       var(--color-palette-primary);
  --color-btn-hover-bg: var(--color-palette-dark);

  /* ============================================
     RODAPÉ / FOOTER
     ============================================ */
  --color-footer-bg:   var(--color-palette-darker);
  --color-footer-text: var(--color-neutral-white);
  --color-footer-link: var(--color-palette-light);

  /* ============================================
     REDES SOCIAIS
     ============================================ */
  --color-social-icon: var(--color-neutral-white);
  --color-social-bg:   var(--color-palette-primary);
  --color-header-social-icon: var(--color-neutral-white);
  --color-header-social-bg:   var(--color-palette-primary);
  --color-footer-social-icon: var(--color-neutral-white);
  --color-footer-social-bg:   var(--color-palette-dark);

  --color-pagina-titulo-border: var(--color-palette-primary);

  /* ============================================
     CALENDÁRIO
     ============================================ */
  --color-calendar-bg:         var(--color-neutral-white);
  --color-calendar-head-bg:    var(--color-neutral-light);
  --color-calendar-head-text:  var(--color-neutral-gray);
  --color-calendar-event-bg:   var(--color-palette-lighter);
  --color-calendar-event-text: var(--color-neutral-dark);
  --color-calendar-today-bg:   var(--color-palette-primary);
  --color-calendar-today-text: var(--color-neutral-white);
  --color-calendar-link:       var(--color-palette-primary);
  --color-calendar-text:       var(--color-neutral-dark);
  --color-calendario-bg:       var(--color-calendar-bg);
  --color-calendario-text:     var(--color-calendar-text);
  --color-calendario-link:     var(--color-calendar-link);

  /* ============================================
     COTAÇÕES / CÂMBIO / WIDGETS
     ============================================ */
  --color-widget-bg:   var(--color-palette-dark);
  --color-widget-text: var(--color-neutral-white);
  --color-widget-link: var(--color-palette-lighter);
  --color-cambio-bg:   var(--color-widget-bg);
  --color-cambio-text: var(--color-widget-text);
  --color-cambio-link: var(--color-widget-link);
  --color-cotacao-bg:  var(--color-widget-bg);
  --color-cotacao-text: var(--color-widget-text);
  --color-cotacao-link: var(--color-palette-lighter);
}

@supports not (color: color-mix(in srgb, red, blue)) {
  :root {
    --color-primary-light: var(--color-palette-light);
    --color-primary-dark:  var(--color-palette-dark);
    --color-primary-alpha-10: rgba(224, 70, 34, 0.1);
    --color-primary-alpha-20: rgba(224, 70, 34, 0.2);
  }
}