/* ==========================================================================
   LEXSTUDI — DESIGN TOKENS
   Sistema de Design Universal · v2.0 · Julho 2026
   ==========================================================================
   Ficheiro único e definitivo — substitui por completo lexstudi-tokens.css
   v1.0 E o rascunho intermédio. Fonte única de verdade para todas as
   páginas da LexStudi: cores, tipografia, espaçamento, sombras, glass,
   blobs, motion e componentes.

   Cores primárias, tipografia principal e tagline (Manual, secção 10) só
   mudam por decisão formal da equipa fundadora. Tudo o resto é extensão
   de sistema — pode crescer, mas não deve fragmentar-se: se precisares de
   um valor novo que não exista abaixo, ACRESCENTA-O aqui, nunca escrevas
   um valor solto directamente no CSS de uma página.

   COMPATIBILIDADE: todos os nomes de tokens da versão anterior foram
   mantidos sem alteração — só foram acrescentados novos. Nenhuma página
   já construída (Contacto, Sobre Nós, Privacidade) parte com este ficheiro.

   Este ficheiro NÃO define estilos de elementos (isso fica no CSS de cada
   secção/página) — só declara variáveis e os dois @property abaixo.
   ========================================================================== */

:root {

  /* ══════════════════════════════════════════════════════════════════
     I. FUNDAÇÃO
     ══════════════════════════════════════════════════════════════════ */

  /* ── 1. Cor — Marca (primárias, Manual) ────────────────────────────── */
  --color-primary:        #0F2C54;
  --color-primary-hover:  #1A4A8A;
  --color-primary-rgb:    15, 44, 84;
  --color-accent:         #BFA14A;
  --color-accent-hover:   #A8893A;
  --color-accent-rgb:     191, 161, 74;

  /* ── 2. Cor — Neutros (escala derivada, ancorada nos valores do Manual) ── */
  --color-gray-50:   #F4F6F8;
  --color-gray-100:  #E8ECF0;
  --color-gray-200:  #E2E8F0;
  --color-gray-300:  #CBD5E0;
  --color-gray-400:  #A0AEC0;
  --color-gray-500:  #718096;
  --color-gray-600:  #4A5568;
  --color-gray-700:  #2D3748;
  --color-gray-800:  #1A202C;
  --color-gray-900:  #10141B;
  --color-white:     #FFFFFF;

  /* ── 3. Cor — Estado ────────────────────────────────────────────────── */
  --color-success:     #2F855A;
  --color-success-bg:  #F0FFF4;
  --color-success-rgb: 47, 133, 90;
  --color-warning:     #D69E2E;
  --color-warning-bg:  #FFFFF0;
  --color-error:       #C53030;
  --color-error-bg:    #FFF5F5;
  --color-error-rgb:   197, 48, 48;
  --color-info:        #2B6CB0;
  --color-info-bg:     #EBF8FF;

  /* Hover das cores de estado — derivado com a MESMA proporção de
     escurecimento que o Manual já usa em Dourado → Dourado-hover (~8%
     menos luminosidade em HSL), para o sistema ficar internamente
     consistente em vez de valores inventados à parte.
     Handoff, secção 3: "também tem outras cores como Vermelho, pode
     ser usado em casos para dar um UI interessante" — isto é o que
     torna as cores de estado utilizáveis como acentos de UI, não só
     como semântica de erro/sucesso. */
  --color-success-hover: #236343;
  --color-warning-hover: #B38323;
  --color-error-hover:   #A02727;
  --color-info-hover:    #22558B;

  /* ── 4. Cor — Superfícies (modo claro — a maioria das secções) ──────── */
  --color-bg-page:         var(--color-white);
  --color-bg-alt:          var(--color-gray-50);
  --color-bg-alt-2:        var(--color-gray-100);
  --color-text-heading:    var(--color-gray-800);
  --color-text-body:       var(--color-gray-600);
  --color-text-muted:      var(--color-gray-500);
  --color-text-on-primary: var(--color-white);
  --color-border:          var(--color-gray-200);
  --color-border-strong:   var(--color-gray-300);

  /* ── 5. Cor — Superfícies Escuras (para secções em gradiente/dark) ──── */
  --color-heading-on-dark:    var(--color-white);
  --color-text-on-dark:       rgba(255, 255, 255, 0.92);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.72);
  --color-accent-on-dark:     #F5D98A;
  --color-border-on-dark:     rgba(255, 255, 255, 0.18);
  --color-bg-on-dark-subtle:  rgba(255, 255, 255, 0.06);
  --color-bg-on-dark-strong:  rgba(255, 255, 255, 0.12);

  /* ── 6. Cor — Utilidade / Redes (fora da paleta de marca, uso funcional) ──
     Verde oficial do WhatsApp — usado em CTAs "Escolher Jurista" e nos
     botões de contacto directo (Handoff, secções 6, 7.4, 7.5). Não é uma
     cor da marca LexStudi; é a cor do canal, mantida fiel ao WhatsApp
     para o botão ser instantaneamente reconhecível. */
  --color-whatsapp:       #25D366;
  --color-whatsapp-hover: #128C7E;

  /* ── 7. Gradientes ──────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  --gradient-primary-radial: radial-gradient(circle at 30% 20%, var(--color-primary-hover) 0%, var(--color-primary) 60%);
  --gradient-surface:  linear-gradient(180deg, var(--color-white) 0%, var(--color-gray-50) 100%);
  --gradient-gold:     linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  --gradient-text-gold: linear-gradient(90deg, var(--color-accent) 0%, #E8C97A 50%, var(--color-accent) 100%);
  /* Anel de brilho rotativo — usa --shimmer-angle (registado com @property
     mais abaixo) para animação suave. Reservar para momentos de topo:
     certificado, selo "Acesso Fundador", hover do botão dourado num
     hero. Nunca em elementos repetidos em grelha — o Manual pede
     parcimónia no dourado, "quando aparece, é importante". */
  --gradient-shimmer: conic-gradient(from var(--shimmer-angle), transparent 0%, var(--color-accent) 8%, transparent 16%);

  /* ══════════════════════════════════════════════════════════════════
     II. TIPOGRAFIA
     ══════════════════════════════════════════════════════════════════ */

  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Jost', sans-serif;
  --font-accent:  'Marko One', serif;

  --weight-heading-semibold: 600;
  --weight-heading-bold:     700;
  --weight-body-regular:     400;
  --weight-body-medium:      500;
  --weight-accent-regular:   400;

  --text-display:     clamp(3rem, 1.5rem + 4vw, 4rem);
  --text-h1:           clamp(2.25rem, 1.9rem + 1.2vw, 2.625rem);
  --text-h2:           clamp(1.75rem, 1.55rem + 0.7vw, 2rem);
  --text-h3:           clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-h4:           1.125rem; /* 18px · atenção: Jost Medium no Manual, não Montserrat — ver --type-h4 abaixo */
  --text-body-lg:      1.125rem;
  --text-body:         1rem;
  --text-body-sm:      0.875rem;
  --text-caption:      0.75rem;
  --text-certificate:  clamp(1.75rem, 1.5rem + 1vw, 2.125rem);
  --text-quote:        clamp(1.125rem, 1rem + 0.5vw, 1.375rem);

  --leading-heading:    1.2;
  --leading-display:    1.05;  /* display precisa de menos altura de linha que H1-H3 — texto muito grande, óptica diferente */
  --leading-body:       1.6;
  --leading-body-loose: 1.75;
  --tracking-normal:    0em;
  --tracking-tight:     -0.01em; /* display/hero — títulos muito grandes ficam mais "premium" com leve aperto */
  --tracking-uppercase: 0.02em;
  --measure-body:       680px;
  --measure-narrative:  620px;

  /* Atalhos tipográficos compostos — bundle de peso/tamanho/altura-de-
     linha/família numa só declaração (`font: var(--type-h2);`), seguindo
     o MESMO padrão que os --btn-*-font já usam. Existem para eliminar
     uma ambiguidade real: o H4 usa Jost (corpo), não Montserrat, ao
     contrário de H1-H3 — fácil de errar se só se copiar --text-h4 sem
     saber isto. Continuam a existir os tokens individuais acima para
     quem precisar de compor de outra forma. */
  --type-display:     var(--weight-heading-bold) var(--text-display)/var(--leading-display) var(--font-heading);
  --type-h1:           var(--weight-heading-bold) var(--text-h1)/var(--leading-heading) var(--font-heading);
  --type-h2:           var(--weight-heading-semibold) var(--text-h2)/var(--leading-heading) var(--font-heading);
  --type-h3:           var(--weight-heading-semibold) var(--text-h3)/var(--leading-heading) var(--font-heading);
  --type-h4:           var(--weight-body-medium) var(--text-h4)/var(--leading-heading) var(--font-body);
  --type-body-lg:      var(--weight-body-regular) var(--text-body-lg)/var(--leading-body) var(--font-body);
  --type-body:         var(--weight-body-regular) var(--text-body)/var(--leading-body) var(--font-body);
  --type-body-sm:      var(--weight-body-regular) var(--text-body-sm)/var(--leading-body) var(--font-body);
  --type-caption:      var(--weight-body-medium) var(--text-caption)/var(--leading-body) var(--font-body);
  --type-certificate:  var(--weight-accent-regular) var(--text-certificate)/var(--leading-heading) var(--font-accent);
  --type-quote:        var(--weight-accent-regular) var(--text-quote)/var(--leading-heading) var(--font-accent);

  /* ══════════════════════════════════════════════════════════════════
     III. ESPAÇAMENTO E GRELHA
     ══════════════════════════════════════════════════════════════════ */

  --space-xs:  4px;
  --space-s:   8px;
  --space-m:   16px;
  --space-l:   24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Breakpoints de referência (usar directamente em @media):
     Mobile: <768px · Tablet: 768–1024px · Desktop: >1024px · Wide: >1280px */
  --grid-max-width:      1200px;
  --grid-max-width-wide: 1400px;
  --grid-gutter-desktop: 24px;
  --grid-gutter-tablet:  16px;
  --grid-gutter-mobile:  16px;
  --grid-padding-mobile: 20px;
  --grid-cols-desktop:   12;
  --grid-cols-tablet:    8;
  --grid-cols-mobile:    4;
  --touch-target-min:    44px;

  /* ══════════════════════════════════════════════════════════════════
     IV. FORMA E PROFUNDIDADE
     ══════════════════════════════════════════════════════════════════ */

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  20px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px  rgba(var(--color-primary-rgb), 0.05);
  --shadow-sm: 0 2px 8px  rgba(var(--color-primary-rgb), 0.08);
  --shadow-md: 0 4px 16px rgba(var(--color-primary-rgb), 0.10);
  --shadow-lg: 0 8px 24px rgba(var(--color-primary-rgb), 0.14);
  --shadow-xl: 0 16px 40px rgba(var(--color-primary-rgb), 0.18);
  --shadow-2xl: 0 24px 64px rgba(var(--color-primary-rgb), 0.22);

  --glow-primary: 0 0 24px rgba(var(--color-primary-rgb), 0.25);
  --glow-gold:    0 0 24px rgba(var(--color-accent-rgb), 0.35);

  --glass-bg:        rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.14);
  --glass-border:    1px solid rgba(255, 255, 255, 0.18);
  --glass-blur:      16px;
  --glass-blur-lg:   24px;

  --blob-blur:      80px;
  --blob-blur-lg:   120px;
  --opacity-blob:   0.06;
  --blob-color-primary: rgba(var(--color-primary-rgb), var(--opacity-blob));
  --blob-color-accent:  rgba(var(--color-accent-rgb), 0.05);
  --blob-color-dark-a:  rgba(255, 255, 255, 0.06);
  --blob-color-dark-b:  rgba(var(--color-accent-rgb), 0.14);

  --opacity-disabled:      0.5;
  --opacity-hover-overlay: 0.08;

  /* Rácios de aspecto — hero, thumbnails de teasers, embeds. Usar com
     `aspect-ratio: var(--aspect-video);` em vez de padding-hack. */
  --aspect-video:    16 / 9;
  --aspect-square:   1 / 1;
  --aspect-portrait: 3 / 4;

  /* Véu por trás de modais/drawers (parcelamento, FluentForms) — cor
     ancorada em --color-gray-900 em rgba, não um preto genérico. */
  --scrim-bg: rgba(16, 20, 27, 0.6);

  /* ══════════════════════════════════════════════════════════════════
     V. MOVIMENTO
     ══════════════════════════════════════════════════════════════════ */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.6, 1);
  --ease-playful:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   400ms;
  --duration-reveal: 600ms;
  --duration-drift:  26s;
  --duration-shimmer: 3s;

  --motion-hover:   var(--duration-fast) var(--ease-standard);
  --motion-reveal:  var(--duration-reveal) var(--ease-out);
  --motion-card:    var(--duration-base) var(--ease-standard);
  --motion-drift:   var(--duration-drift) var(--ease-in-out) infinite alternate;

  /* Intervalo entre itens num reveal em cascata (grelha de features,
     teasers, cards). Uso: em cada item, `transition-delay: calc(
     var(--stagger-step) * var(--stagger-index, 0));` onde --stagger-index
     é 0, 1, 2... por item (inline style ou nth-child). Um único token
     controla o ritmo de TODAS as cascatas do site. */
  --stagger-step: 80ms;
  --stagger-step-max: 6; /* a partir do 6º item, não vale a pena continuar a atrasar — usar min() no calc */

  /* ══════════════════════════════════════════════════════════════════
     VI. INTERFACE
     ══════════════════════════════════════════════════════════════════ */

  --icon-size-min:     16px;
  --icon-size-default: 22px;
  --icon-size-lg:      28px;
  --icon-stroke-width: 1.75;

  --focus-ring:        0 0 0 3px rgba(var(--color-primary-rgb), 0.35);
  --focus-ring-offset: 2px;
  /* O anel azul perde contraste sobre fundo em gradiente escuro — em
     secções .section--dark, usar este em vez do --focus-ring. */
  --focus-ring-on-dark: 0 0 0 3px rgba(var(--color-accent-rgb), 0.5);

  /* Cor de selecção de texto — mesma combinação já aprovada para o
     Botão Dourado (fundo dourado, texto azul profundo), reaplicada. */
  --selection-bg:    var(--color-accent);
  --selection-color: var(--color-primary);

  /* Skeleton de carregamento — FAQ dinâmica e conteúdo vindo de CPTs
     (Dicionário, Casos Práticos) carregam via JS; evitar "salto" de
     layout com um placeholder consistente. */
  --skeleton-bg:       var(--color-gray-100);
  --skeleton-shine:    var(--color-gray-50);
  --skeleton-radius:   var(--radius-md);
  --skeleton-duration: 1.4s;

  --z-base:          0;
  --z-dropdown:      10;
  --z-sticky-header: 100;
  --z-overlay:       500;
  --z-modal:         1000;
  --z-toast:         1100;

  /* ══════════════════════════════════════════════════════════════════
     VII. COMPONENTES
     ══════════════════════════════════════════════════════════════════ */

  --btn-radius:    var(--radius-md);
  --btn-padding:   12px 24px;
  --btn-font-size: 15px;

  --btn-primary-bg:    var(--color-primary);
  --btn-primary-color: var(--color-white);
  --btn-primary-hover: var(--color-primary-hover);
  --btn-primary-font:  var(--weight-heading-semibold) var(--btn-font-size) var(--font-heading);

  --btn-secondary-color:    var(--color-primary);
  --btn-secondary-border:   1.5px solid var(--color-primary);
  --btn-secondary-hover-bg: var(--color-gray-50);
  --btn-secondary-font:     var(--weight-body-medium) var(--btn-font-size) var(--font-body);

  --btn-gold-bg:    var(--color-accent);
  --btn-gold-color: var(--color-primary);
  --btn-gold-hover: var(--color-accent-hover);
  --btn-gold-font:  var(--weight-heading-semibold) var(--btn-font-size) var(--font-heading);

  --btn-ghost-color:       var(--color-gray-600);
  --btn-ghost-hover-color: var(--color-gray-800);

  --btn-secondary-on-dark-color:    var(--color-white);
  --btn-secondary-on-dark-border:   1.5px solid rgba(255,255,255,0.5);
  --btn-secondary-on-dark-hover-bg: rgba(255,255,255,0.1);

  /* Botão WhatsApp — mesma tipografia/raio dos outros botões, só a cor
     muda para o canal ficar reconhecível. Usado em "Escolher Jurista",
     Contacto, CTA final da Homepage (Handoff 6, 7.4, 7.5). */
  --btn-whatsapp-bg:    var(--color-whatsapp);
  --btn-whatsapp-color: var(--color-white);
  --btn-whatsapp-hover: var(--color-whatsapp-hover);
  --btn-whatsapp-font:  var(--btn-primary-font);

  --card-bg:           var(--color-white);
  --card-border:       1px solid var(--color-border);
  --card-radius:       var(--radius-lg);
  --card-padding:      var(--space-l);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-transition:   var(--motion-card);
  --card-hover-lift:   -2px;

  --avatar-size-sm: 56px;
  --avatar-size-md: 96px;
  --avatar-size-lg: 140px;
  --avatar-font-sm: var(--weight-heading-bold) 20px var(--font-heading);
  --avatar-font-md: var(--weight-heading-bold) 32px var(--font-heading);
  --avatar-font-lg: var(--weight-heading-bold) 44px var(--font-heading);

  --input-bg:            var(--color-white);
  --input-border:        1px solid var(--color-gray-300);
  --input-border-focus:  1px solid var(--color-primary);
  --input-border-error:   1px solid var(--color-error);
  --input-border-success: 1px solid var(--color-success);
  --input-ring-error:     0 0 0 3px rgba(var(--color-error-rgb), 0.15);
  --input-ring-success:   0 0 0 3px rgba(var(--color-success-rgb), 0.15);
  --input-radius:        var(--radius-md);
  --input-padding:       12px 16px;
  --input-placeholder:   var(--color-gray-400);

  --callout-note-border:    var(--color-accent);
  --callout-note-bg:        #FFFBEB;
  --callout-success-border: var(--color-success);
  --callout-success-bg:     var(--color-success-bg);
  --callout-warning-border: var(--color-warning);
  --callout-warning-bg:     var(--color-warning-bg);
  --callout-error-border:   var(--color-error);
  --callout-error-bg:       var(--color-error-bg);

  --badge-padding:  4px 12px;
  --badge-radius:   var(--radius-full);
  --badge-font:     var(--weight-body-medium) var(--text-caption) var(--font-body);
  --badge-bg:       var(--color-bg-alt);
  --badge-color:    var(--color-primary);
  --badge-bg-gold:  #FFFBEB;
  --badge-color-gold: var(--color-accent-hover);

  --navlist-color:         var(--color-text-muted);
  --navlist-color-active:  var(--color-primary);
  --navlist-border-active: var(--color-primary);
  --navlist-bg-hover:      var(--color-bg-alt);

  --divider-color:      var(--color-border);
  --divider-color-dark: rgba(255,255,255,0.15);

  /* Ligações em texto corrido — páginas legais, FAQ, corpo de artigos. */
  --link-color:              var(--color-primary);
  --link-color-hover:        var(--color-primary-hover);
  --link-color-on-dark:      var(--color-accent-on-dark);
  --link-underline-offset:   3px;

  /* Segmentado de 3 vias — toggle Mensal/Semestral/Anual da página
     Planos e Preços (Handoff 7.4, item 1: "muda preço e poupança em
     tempo real"). Distinto de um switch binário, que também existe
     abaixo para outros usos (ex.: futuro banner de cookies Complianz). */
  --segmented-bg:              var(--color-gray-100);
  --segmented-radius:          var(--radius-full);
  --segmented-padding:         4px;
  --segmented-item-color:      var(--color-text-muted);
  --segmented-item-color-active: var(--color-primary);
  --segmented-item-bg-active:  var(--color-white);
  --segmented-item-shadow-active: var(--shadow-sm);
  --segmented-transition:      var(--motion-card);

  --toggle-width:       52px;
  --toggle-height:      28px;
  --toggle-bg:          var(--color-gray-300);
  --toggle-bg-active:   var(--color-primary);
  --toggle-thumb-bg:    var(--color-white);
  --toggle-thumb-size:  22px;
  --toggle-transition:  var(--motion-card);

  /* Modal leve — link "Precisas de pagar em prestações?" (Handoff 7.4,
     item 3) e qualquer outro overlay pontual. */
  --modal-bg:         var(--color-white);
  --modal-radius:     var(--radius-xl);
  --modal-shadow:     var(--shadow-2xl);
  --modal-padding:    var(--space-xl);
  --modal-max-width:  480px;

  /* Tabelas — tabela de preços, listagens de conteúdo tabular. */
  --table-header-bg:     var(--color-bg-alt);
  --table-header-color:  var(--color-text-heading);
  --table-border:        1px solid var(--color-border);
  --table-row-hover-bg:  var(--color-bg-alt);
  --table-radius:        var(--radius-lg);
  --table-cell-padding:  var(--space-m) var(--space-l);

  /* Indicador de processo — "Como Funciona" da Homepage: Escolhe o
     plano → Estuda → Avalia-te → Certificado (Handoff 7.5, secção 4). */
  --step-circle-size:        48px;
  --step-circle-bg:          var(--color-bg-alt);
  --step-circle-bg-active:   var(--gradient-primary);
  --step-circle-color:       var(--color-text-muted);
  --step-circle-color-active: var(--color-white);
  --step-connector-color:    var(--color-border);
  --step-connector-height:   2px;

  /* Números de destaque — secção de Tracção/Validação da Homepage (70
     estudantes, 5 universidades, 93,3% já usa IA — Handoff 7.5, secção 6). */
  --stat-number-font:         var(--weight-heading-bold) clamp(2rem, 1.6rem + 2vw, 3rem) var(--font-heading);
  --stat-number-color:        var(--color-primary);
  --stat-number-color-on-dark: var(--color-white);
  --stat-label-font:          var(--weight-body-medium) var(--text-body-sm) var(--font-body);
  --stat-label-color:         var(--color-text-muted);

}

/* ==========================================================================
   TIPOS ANIMÁVEIS (@property)
   ==========================================================================
   Regista o ângulo do --gradient-shimmer com um tipo concreto (<angle>),
   para o browser conseguir interpolar suavemente numa transition/animation
   em vez de saltar entre valores (é a mesma técnica que dá vida a bordas
   com "brilho a rodar" em produtos premium). Sem isto, animar um custom
   property que é usado dentro de um gradiente simplesmente não interpola.

   Uso típico (num ::before/::after do elemento a destacar):
     .cta-dourado::before {
       background: var(--gradient-shimmer);
       animation: lex-shimmer-spin var(--duration-shimmer) linear infinite;
     }
     @keyframes lex-shimmer-spin {
       to { --shimmer-angle: 360deg; }
     }
   ========================================================================== */
@property --shimmer-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ==========================================================================
   MODO ESCURO GLOBAL — não aplicável. A LexStudi é 100% modo claro por
   identidade de marca. As secções escuras (.section--dark, *-gradient)
   usam os tokens "on-dark" acima, CONTEXTUALMENTE — isto não é dark mode
   do site, é uma variação de secção dentro de páginas que continuam claras.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
    --duration-reveal:  0ms;
    --duration-drift:   0ms;
    --duration-shimmer: 0ms;
    --stagger-step:     0ms;
  }
}