/* =============================================================================
   SEMANTIC  —  tokens com significado (o que os componentes consomem)
   -----------------------------------------------------------------------------
   ESTA é a camada que cada projeto redefine — no child theme, no project.css
   ou (recomendado) pela página Definições → Tema LBC, que injeta um
   <style id="lbc-token-overrides"> no <head> só com os tokens alterados.

   Regra: aqui só se referenciam primitives (var(--lbc-*)) — nunca hex.
   ========================================================================== */

:root {
  /* ---- Marca -------------------------------------------------------- */
  --lbc-color-primary:           var(--lbc-brand-600);
  --lbc-color-primary-hover:     var(--lbc-brand-700);
  --lbc-color-primary-contrast:  var(--lbc-white);
  --lbc-color-secondary:         var(--lbc-grey-700);
  --lbc-color-secondary-hover:   var(--lbc-grey-800);
  --lbc-color-secondary-contrast:var(--lbc-white);
  --lbc-color-accent:            var(--lbc-brand-500);
  --lbc-color-accent-contrast:   var(--lbc-white);

  /* ---- Superfícies ----------------------------------------------- */
  --lbc-surface:          var(--lbc-white);
  --lbc-surface-raised:    var(--lbc-white);
  --lbc-surface-sunken:    var(--lbc-grey-50);
  --lbc-surface-inverse:   var(--lbc-grey-900);

  /* ---- Texto --------------------------------------------------- */
  --lbc-text:             var(--lbc-grey-900);
  --lbc-text-muted:        var(--lbc-grey-600);
  --lbc-text-inverse:      var(--lbc-white);
  --lbc-text-link:         var(--lbc-color-primary);
  --lbc-text-link-hover:   var(--lbc-color-primary-hover);

  /* ---- Traços ------------------------------------------------ */
  --lbc-border-color:        var(--lbc-grey-200);
  --lbc-border-color-strong: var(--lbc-grey-400);
  --lbc-border-width:        var(--lbc-border-width-sm);

  /* ---- Feedback -------------------------------------------- */
  --lbc-color-success:          var(--lbc-green-700);
  --lbc-color-success-contrast: var(--lbc-white);
  --lbc-color-success-subtle:   var(--lbc-green-100);
  --lbc-color-warning:          var(--lbc-amber-700);
  --lbc-color-warning-contrast: var(--lbc-white);
  --lbc-color-warning-subtle:   var(--lbc-amber-100);
  --lbc-color-danger:           var(--lbc-red-700);
  --lbc-color-danger-contrast:  var(--lbc-white);
  --lbc-color-danger-subtle:    var(--lbc-red-100);
  --lbc-color-info:             var(--lbc-cyan-700);
  --lbc-color-info-contrast:    var(--lbc-white);
  --lbc-color-info-subtle:      var(--lbc-cyan-100);

  /* ---- Foco (acessibilidade) ---------------------------- */
  --lbc-focus-color:       var(--lbc-color-accent);   /* editável em Definições → Tema LBC */
  --lbc-focus-outline:     var(--lbc-border-width-md) solid var(--lbc-focus-color);
  --lbc-focus-offset:      var(--lbc-space-3xs);
  --lbc-focus-ring:        0 0 0 var(--lbc-border-width-md) var(--lbc-focus-color);

  /* Alvo mínimo de toque/clique (WCAG 2.5.5 / 2.5.8) */
  --lbc-touch-target:      44px;

  /* ---- Skip link (saltar para o conteúdo) -------------- */
  /* Editável em Definições → Tema LBC (grupo Cores) e no controlo do widget. */
  --lbc-skip-link-bg:      var(--lbc-black);   /* preto por defeito */
  --lbc-skip-link-fg:      var(--lbc-white);   /* branco por defeito */
  --lbc-skip-link-z:       var(--lbc-z-max);   /* sempre acima do header */

  /* z-index acima de qualquer header/sticky (inclui de terceiros) */
  --lbc-z-above-header:    calc(var(--lbc-z-max) - 1);

  /* ---- Papéis tipográficos ---------------------------- */
  --lbc-font-heading:      var(--lbc-font-sans);
  --lbc-font-body:         var(--lbc-font-sans);
  --lbc-font-mono-role:    var(--lbc-font-mono);

  --lbc-text-size-body:    var(--lbc-font-size-base);
  --lbc-text-size-small:   var(--lbc-font-size-sm);
  --lbc-text-size-lead:    var(--lbc-font-size-md);
  --lbc-line-height-body:  var(--lbc-line-height-normal);
  --lbc-line-height-heading: var(--lbc-line-height-tight);
  --lbc-heading-weight:    var(--lbc-font-weight-bold);

  /* ---- Papéis de espaçamento ------------------------- */
  --lbc-gutter:           var(--lbc-space-lg);
  --lbc-stack-gap:        var(--lbc-space-md);
  --lbc-section-gap:      var(--lbc-space-3xl);

  /* Compensação de altura para âncoras (headers fixos). Editável no painel. */
  --lbc-anchor-offset:    150px;

  /* Sublinhado dos menus (nav). currentColor = adapta-se ao fundo. */
  --lbc-menu-underline:   currentColor;

  /* ---- Papéis de lista (ul / ol) --------------------- */
  --lbc-list-padding-start:   1.5em;   /* recuo do marcador */
  --lbc-list-item-gap:        var(--lbc-space-xs);   /* espaço entre itens */
  --lbc-list-line-height:     var(--lbc-line-height-relaxed);
  --lbc-list-marker-color:    var(--lbc-color-primary);
  --lbc-list-nested-gap:      var(--lbc-space-2xs);  /* topo de sub-listas */

  /* ---- Papéis de raio ------------------------------ */
  /* Botões, inputs e acordeões usam 2px por defeito (marca LBC); editável por
     instância nos widgets ou globalmente em Definições → Tema LBC. */
  --lbc-radius-control:   var(--lbc-radius-xs);
  --lbc-radius-input:     var(--lbc-radius-xs);
  --lbc-radius-card:      var(--lbc-radius-lg);
  --lbc-radius-surface:   var(--lbc-radius-xl);

  /* ---- Papéis de elevação ------------------------ */
  --lbc-elevation-card:   var(--lbc-shadow-sm);
  --lbc-elevation-raised: var(--lbc-shadow-md);
  --lbc-elevation-overlay:var(--lbc-shadow-lg);
}

/* -----------------------------------------------------------------------------
   Modo escuro (scaffold) — descomentar / ajustar por projeto.
   O sistema está desenhado para que só esta camada mude.
   --------------------------------------------------------------------------- */
/*
@media (prefers-color-scheme: dark) {
  :root:not([data-lbc-theme="light"]) {
    --lbc-surface:        var(--lbc-grey-950);
    --lbc-surface-raised:  var(--lbc-grey-900);
    --lbc-surface-sunken:  var(--lbc-black);
    --lbc-text:           var(--lbc-grey-100);
    --lbc-text-muted:      var(--lbc-grey-500);
    --lbc-border-color:    var(--lbc-grey-800);
    --lbc-border-color-strong: var(--lbc-grey-700);
  }
}
*/