/* =============================================================================
   COMPONENT TOKENS  —  ponte entre a camada semântica e cada componente
   -----------------------------------------------------------------------------
   Permite afinar UM componente sem tocar na camada semântica.
   Os ficheiros de componente (components.css) devem consumir SÓ estes tokens
   (ou os semânticos), nunca primitives nem hex.
   ========================================================================== */

:root {
  /* ---- Botão -------------------------------------------------------- */
  --lbc-button-bg:            var(--lbc-color-primary);
  --lbc-button-fg:            var(--lbc-color-primary-contrast);
  /* Hover do botão primário = cor SECUNDÁRIA do sistema (decisão de marca). */
  --lbc-button-bg-hover:      var(--lbc-color-secondary);
  --lbc-button-border:        transparent;
  --lbc-button-radius:        50px;                          /* botão "pill" da marca LBC (inputs/acordeões mantêm --lbc-radius-control) */
  --lbc-button-padding-y:     var(--lbc-space-xs);
  --lbc-button-padding-x:     var(--lbc-space-md);
  --lbc-button-font-size:     var(--lbc-font-size-base);
  --lbc-button-font-weight:   var(--lbc-font-weight-bold);   /* texto do botão a bold */
  --lbc-button-gap:           var(--lbc-space-xs);

  /* variantes de tamanho */
  --lbc-button-padding-y-sm:  var(--lbc-space-3xs);
  --lbc-button-padding-x-sm:  var(--lbc-space-sm);
  --lbc-button-font-size-sm:  var(--lbc-font-size-sm);
  --lbc-button-padding-y-lg:  var(--lbc-space-sm);
  --lbc-button-padding-x-lg:  var(--lbc-space-lg);
  --lbc-button-font-size-lg:  var(--lbc-font-size-md);

  /* ---- Menu de navegação  (.lbc-menu) -------------------------- */
  /* Cor da linha: --lbc-menu-underline (camada semântica). Espessuras: */
  --lbc-menu-underline-size:         var(--lbc-border-width-sm);   /* 1px — item da página atual */
  --lbc-menu-underline-size-parent:  var(--lbc-border-width-md);   /* 2px — parent / ancestor */
  --lbc-menu-underline-size-hover:   var(--lbc-border-width-md);   /* 2px — hover / foco */
  --lbc-menu-item-weight-active:     var(--lbc-font-weight-normal);/* item ativo NÃO fica bold */
  /* Seta de submenu (Elementor Nav Menu) */
  --lbc-menu-sub-arrow-padding:      6px;
  --lbc-menu-sub-arrow-padding-top:  8px;
  --lbc-menu-sub-arrow-icon-size:    14px;

  /* ---- Botão de pesquisa  (.lbc-search-button) ------------------ */
  --lbc-search-btn-icon-size:            18px;                    /* ícone fixo a 18px */
  --lbc-search-btn-underline:            currentColor;            /* adapta-se ao texto do botão */
  --lbc-search-btn-underline-size:       var(--lbc-border-width-md);  /* 2px no estado normal */
  --lbc-search-btn-underline-size-hover: 3px;                     /* +1px para baixo no hover */

  /* ---- Cartão ---------------------------------------------------- */
  --lbc-card-bg:             var(--lbc-surface-raised);
  --lbc-card-fg:             var(--lbc-text);
  --lbc-card-border-color:    var(--lbc-border-color);
  --lbc-card-border-width:    var(--lbc-border-width);
  --lbc-card-radius:          var(--lbc-radius-card);
  --lbc-card-padding:         var(--lbc-space-lg);   /* base das zonas (texto/imagem) */
  --lbc-card-content-padding: var(--lbc-card-padding);   /* zona de texto — editável */
  --lbc-card-image-padding:   0;                         /* zona da imagem — editável (0 = bleed) */
  --lbc-card-icon-padding:    var(--lbc-space-md);       /* espaço à volta do glifo do ícone */
  --lbc-card-image-width:     40%;                       /* largura da imagem quando fica ao lado do texto (>=768px) */
  --lbc-card-btn-icon-size:   1em;                       /* ícone dos botões do cartão */
  --lbc-card-gap:             var(--lbc-space-sm);
  --lbc-card-shadow:          var(--lbc-elevation-card);
  --lbc-card-shadow-hover:    var(--lbc-elevation-raised);

  /* ---- Etiqueta / label / badge ------------------------------- */
  --lbc-label-bg:            var(--lbc-color-accent);
  --lbc-label-fg:            var(--lbc-color-accent-contrast);
  --lbc-label-radius:        var(--lbc-radius-pill);
  --lbc-label-padding-y:     var(--lbc-space-3xs);
  --lbc-label-padding-x:     var(--lbc-space-xs);
  --lbc-label-font-size:     var(--lbc-font-size-2xs);
  --lbc-label-font-weight:   var(--lbc-font-weight-semibold);
  --lbc-label-letter-spacing:var(--lbc-letter-spacing-wide);

  /* ---- Títulos -------------------------------------------- */
  --lbc-title-color:        var(--lbc-text);
  --lbc-title-font:         var(--lbc-font-heading);
  --lbc-title-weight:       var(--lbc-heading-weight);
  --lbc-title-line-height:  var(--lbc-line-height-heading);
  --lbc-title-margin:       0 0 var(--lbc-space-sm);

  /* ---- Campos de formulário --------------------------- */
  --lbc-input-bg:           var(--lbc-surface);
  --lbc-input-fg:           var(--lbc-text);
  --lbc-input-border-color:  var(--lbc-color-primary);         /* cor primária do sistema */
  --lbc-input-border-width:  var(--lbc-border-width-md);        /* 2px */
  --lbc-input-border-color-focus: var(--lbc-color-primary);
  --lbc-input-border-color-invalid: var(--lbc-color-danger);
  --lbc-input-radius:        var(--lbc-radius-input);   /* 2px por defeito */
  --lbc-input-padding-y:     var(--lbc-space-xs);
  --lbc-input-padding-x:     var(--lbc-space-sm);
  --lbc-input-min-height:    var(--lbc-touch-target);
  --lbc-input-font-size:     var(--e-global-typography-text-font-size, var(--lbc-text-size-body));
  --lbc-input-font-family:   var(--e-global-typography-text-font-family, var(--lbc-font-body));
  /* Texto introduzido pelo utilizador: tipografia "Texto do Sistema", a bold */
  --lbc-input-font-weight:   var(--lbc-font-weight-bold);
  /* Placeholder / texto apresentado dentro do campo: "Texto do Sistema" (peso normal) */
  --lbc-form-placeholder-family: var(--lbc-input-font-family);
  --lbc-form-placeholder-weight: var(--lbc-font-weight-normal);
  /* Rótulos: estilo do "texto" base, mas a bold */
  --lbc-form-label-color:    var(--lbc-text);
  --lbc-form-label-weight:   var(--lbc-font-weight-bold);
  --lbc-form-label-size:     var(--e-global-typography-text-font-size, var(--lbc-text-size-body));
  --lbc-form-hint-size:      var(--lbc-font-size-sm);
  --lbc-form-gap:            var(--lbc-space-md);

  /* ---- Carrossel / slider ---------------------------- */
  /* Setas prev/next: por defeito seguem o Botão Primário do sistema. A escolha
     de tipo (.lbc-carousel--btn-*) e os controlos de estilo do widget
     redefinem estes tokens. */
  --lbc-carousel-control-fg:           var(--lbc-button-fg);
  --lbc-carousel-control-bg:           var(--lbc-button-bg);
  --lbc-carousel-control-border:       var(--lbc-carousel-control-bg);
  --lbc-carousel-control-fg-hover:     var(--lbc-button-fg);
  --lbc-carousel-control-bg-hover:     var(--lbc-button-bg-hover);
  --lbc-carousel-control-border-hover: var(--lbc-carousel-control-bg-hover);
  --lbc-carousel-control-radius:       var(--lbc-radius-circle);
  --lbc-carousel-control-size:   var(--lbc-space-2xl);
  --lbc-carousel-control-icon:   var(--lbc-font-size-md);   /* tamanho do ícone */
  --lbc-carousel-control-gap:    var(--lbc-space-lg);       /* entre prev e next */
  --lbc-carousel-info-padding:   var(--lbc-space-md) var(--lbc-space-md) var(--lbc-space-3xl);  /* padding só da zona de texto (T R B L) */
  --lbc-carousel-slide-padding:  0;      /* padding do slide inteiro (imagem + texto); controlável no widget */
  /* lados isolados (o widget sobrepõe-os) — os botões de navegação somam-nos para
     ficarem no mesmo espaço do conteúdo do slide */
  --lbc-carousel-slide-pt:       0px;
  --lbc-carousel-slide-pr:       0px;
  --lbc-carousel-slide-pb:       0px;
  --lbc-carousel-slide-pl:       0px;
  --lbc-carousel-info-pr:        var(--lbc-space-md);
  --lbc-carousel-info-pl:        var(--lbc-space-md);
  --lbc-carousel-img-radius:     0;      /* raio dos 4 cantos da imagem do slide; controlável no widget */
  --lbc-carousel-min-height:     auto;   /* altura mínima do slider; controlável no widget (auto = pelo conteúdo) */

  /* ---- Paginação ------------------------------------ */
  --lbc-pagination-size:        var(--lbc-space-xl);   /* 40px */
  --lbc-pagination-gap:         var(--lbc-space-2xs);
  --lbc-pagination-border-width:var(--lbc-border-width-md);   /* fixo 2px */
  --lbc-pagination-radius:      var(--lbc-radius-circle);
  /* normal */
  --lbc-pagination-fg:          var(--lbc-text);
  --lbc-pagination-bg:          var(--lbc-surface);
  --lbc-pagination-border:      var(--lbc-color-primary);
  /* hover */
  --lbc-pagination-fg-hover:    var(--lbc-color-primary-contrast);
  --lbc-pagination-bg-hover:    var(--lbc-color-primary);
  --lbc-pagination-border-hover:var(--lbc-color-primary);
  /* ativo */
  --lbc-pagination-fg-current:  var(--lbc-color-primary-contrast);
  --lbc-pagination-bg-current:  var(--lbc-color-primary);
  --lbc-pagination-border-current: var(--lbc-color-primary);

  /* ---- Acordeão ------------------------------------ */
  --lbc-accordion-border:            var(--lbc-border-color);
  --lbc-accordion-border-width:      var(--lbc-border-width-md);   /* 2px */
  --lbc-accordion-radius:            var(--lbc-radius-control);    /* 2px por defeito */
  --lbc-accordion-header-radius:     var(--lbc-accordion-radius);  /* 4 vértices editáveis */
  --lbc-accordion-panel-radius:      var(--lbc-accordion-radius);  /* 4 vértices editáveis */
  --lbc-accordion-header-border-color: var(--lbc-accordion-border);
  --lbc-accordion-header-border-width: var(--lbc-accordion-border-width);                 /* T R B L */
  --lbc-accordion-panel-border-color:  var(--lbc-accordion-border);
  --lbc-accordion-panel-border-width:  0 var(--lbc-accordion-border-width) var(--lbc-accordion-border-width);  /* sem topo: o cabeçalho separa */
  --lbc-accordion-gap:               var(--lbc-space-xs);          /* distância entre acordeões */
  --lbc-accordion-header-bg:         var(--lbc-surface);                /* branco por defeito */
  --lbc-accordion-header-fg:         var(--lbc-text);
  --lbc-accordion-header-bg-hover:   var(--lbc-color-primary);          /* cor principal no hover */
  --lbc-accordion-header-fg-hover:   var(--lbc-color-primary-contrast);
  --lbc-accordion-header-bg-active:  var(--lbc-color-primary);          /* cor principal quando aberto */
  --lbc-accordion-header-fg-active:  var(--lbc-color-primary-contrast);
  --lbc-accordion-header-padding:    var(--lbc-space-md);
  --lbc-accordion-header-weight:     var(--lbc-font-weight-semibold);
  --lbc-accordion-panel-bg:          transparent;
  --lbc-accordion-panel-fg:          var(--lbc-text);
  --lbc-accordion-panel-padding:     var(--lbc-space-md) var(--lbc-space-md) var(--lbc-space-lg);

  /* ---- Índice de conteúdos (TOC) ------------------ */
  --lbc-toc-link:            var(--lbc-text-link);
  --lbc-toc-link-hover:      var(--lbc-text-link-hover);
  --lbc-toc-gap:             var(--lbc-space-2xs);
  --lbc-toc-indent:          var(--lbc-space-md);        /* recuo por nível (H3 = 1x, H4 = 2x…) */
  --lbc-toc-underline-offset: calc(0.2em + 2px);         /* folga texto ↔ sublinhado (+2px) */

  /* ---- Secção de notícias ------------------------- */
  --lbc-news-gap:               var(--lbc-space-lg);
  --lbc-news-card-padding:      var(--lbc-space-md);
  --lbc-news-card-bg:           var(--lbc-surface-raised);
  --lbc-news-card-border:       var(--lbc-border-color);
  --lbc-news-card-border-hover: var(--lbc-color-primary);
  --lbc-news-card-border-width: var(--lbc-border-width-md);
  --lbc-news-card-radius:       var(--lbc-radius-card);
  --lbc-news-feature-img-h:     320px;
  --lbc-news-feature-img-w:     50%;      /* largura da imagem do destaque (>=768px) — até ao centro */
  --lbc-news-card-img-h:        180px;
  --lbc-news-card-img-fit:      cover;    /* ajuste da capa: cover / contain / fill */
  --lbc-news-card-img-pos:      center;   /* foco da capa quando recortada */
  --lbc-news-card-min-h:        0;        /* altura mínima dos cartões de baixo (0 = automática) */
  --lbc-news-title-underline-offset: 0.3em;   /* folga título ↔ sublinhado no hover (>= texto + 2px) */
  --lbc-news-title:             var(--lbc-title-color);
  --lbc-news-excerpt:           var(--lbc-text);
  --lbc-news-date:              var(--lbc-text-muted);

  /* ---- Botão "voltar ao topo" --------------------- */
  --lbc-b2t-size:         var(--lbc-space-2xl);
  --lbc-b2t-offset:       var(--lbc-space-lg);
  --lbc-b2t-radius:       var(--lbc-radius-circle);
  --lbc-b2t-z:            var(--lbc-z-overlay);
  --lbc-b2t-fg:           var(--lbc-color-primary-contrast);
  --lbc-b2t-bg:           var(--lbc-color-primary);
  --lbc-b2t-border:       var(--lbc-color-primary);
  --lbc-b2t-fg-hover:     var(--lbc-color-primary-contrast);
  --lbc-b2t-bg-hover:     var(--lbc-color-primary-hover);
  --lbc-b2t-border-hover: var(--lbc-color-primary-hover);

  /* ---- Barra de progresso de leitura -------------- */
  --lbc-progress-thickness: var(--lbc-border-width-lg);   /* 4px */
  --lbc-progress-fill:      var(--lbc-color-primary);
  --lbc-progress-track:     transparent;
  --lbc-progress-z:         var(--lbc-z-above-header);   /* por cima do header/sticky */

  /* ---- Separadores (tabs) ------------------------- */
  --lbc-tabs-border:        var(--lbc-border-color);
  --lbc-tab-fg:             var(--lbc-text-muted);
  --lbc-tab-fg-active:      var(--lbc-text);
  --lbc-tab-indicator:      var(--lbc-color-primary);
  --lbc-tab-padding-y:      var(--lbc-space-xs);
  --lbc-tab-padding-x:      var(--lbc-space-md);
  --lbc-tab-weight:         var(--lbc-font-weight-semibold);
  --lbc-tabpanel-padding:   var(--lbc-space-md) 0;
}
