/* Tilinta (por Loja Viva) · tokens de design · versão 1.0 FINAL (entrega 2, 03/11/2026)
   Os nomes da v0.9 mantêm-se todos (nenhum foi renomeado nem removido); a 1.0 só acrescenta ícones e modo ao vivo.
   Prefixo --vd- (vendas em direto): não colide com as variáveis da loja (--marca, --tinta, --fundo...) que o checkout usa
   para pôr a marca da boutique como protagonista.
   Fontes: Bricolage Grotesque (títulos) e Figtree (texto e interface), ambas SIL Open Font License, ficheiros em ./04-sistema/fontes/ */

@font-face { font-family: "Figtree"; src: url("04-sistema/fontes/Figtree-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("04-sistema/fontes/Figtree-Italic-var.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("04-sistema/fontes/BricolageGrotesque-var.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; }

:root {
  /* ---------- Paleta de marca ---------- */
  --vd-framboesa: #E0245E;          /* cor da marca e do «ao vivo»: botões principais, ponto ao vivo, símbolo. Branco sobre ela 4,58:1 */
  --vd-framboesa-escura: #B0154A;   /* texto e ligações em framboesa sobre fundo claro (6,49:1 no Papel); hover do botão */
  --vd-framboesa-clara: #FF4F7B;    /* framboesa sobre Tinta (5,76:1) */
  --vd-framboesa-fundo: #FDE8EE;    /* fundo de destaque suave (etiquetas, linha selecionada) */
  --vd-tinta: #17141F;              /* texto principal, fundos escuros, modo ao vivo (17,14:1 no Papel) */
  --vd-papel: #FBF8F3;              /* fundo de página */
  --vd-branco: #FFFFFF;             /* cartões e superfícies */
  --vd-menta: #16774A;              /* «pago»: texto e ícones sobre claro (5,57:1 no Branco, 4,92:1 no Menta-fundo) */
  --vd-menta-clara: #3DDC97;        /* «pago» sobre Tinta (10,28:1) */
  --vd-menta-fundo: #E3F5EC;

  /* ---------- Neutras ---------- */
  --vd-grafite: #5E5866;            /* texto secundário em claro (6,47:1 no Papel) */
  --vd-nevoa: #A7A1AE;              /* texto secundário em escuro (7,22:1 na Tinta) */
  --vd-linha: #E7E1D9;              /* divisórias e contornos de cartão */
  --vd-linha-forte: #8C8494;        /* contorno de campos e controlos (3,59:1 no Branco, mínimo 3:1 da WCAG 1.4.11) */
  --vd-noite: #221E2B;              /* superfície elevada no modo escuro/ao vivo */
  --vd-noite-linha: #3A3445;
  --vd-noite-borda: #2C2735;        /* moldura de telemóvel e bordas fortes no escuro */
  --vd-nevoa-clara: #E8E4EC;        /* texto de apoio sobre fotografia escurecida ou Tinta (14,48:1 na Tinta) */
  --vd-ambar: #F5B547;              /* «atenção» no modo ao vivo, com texto Tinta (10,02:1) */

  /* ---------- Estados ---------- */
  --vd-sucesso: #16774A;   --vd-sucesso-fundo: #E3F5EC;
  --vd-aviso: #8A5A00;     --vd-aviso-fundo: #FFF3D6;
  --vd-erro: #B42318;      --vd-erro-fundo: #FDECEA;
  --vd-info: #1F5FA8;      --vd-info-fundo: #E6F0FB;

  /* ---------- Papéis semânticos (use estes no painel) ---------- */
  --vd-cor-fundo: var(--vd-papel);
  --vd-cor-superficie: var(--vd-branco);
  --vd-cor-texto: var(--vd-tinta);
  --vd-cor-texto-suave: var(--vd-grafite);
  --vd-cor-linha: var(--vd-linha);
  --vd-cor-acao: var(--vd-framboesa);
  --vd-cor-acao-hover: var(--vd-framboesa-escura);
  --vd-cor-acao-texto: var(--vd-branco);
  --vd-cor-ligacao: var(--vd-framboesa-escura);
  --vd-cor-foco: #1F5FA8;
  --vd-cor-aovivo: var(--vd-framboesa);
  --vd-cor-pago: var(--vd-menta);
  --vd-cor-reservado: var(--vd-framboesa-escura);   /* «reservado» é Framboesa (texto); em pílula: fundo --vd-framboesa e texto branco */
  --vd-cor-atencao: var(--vd-aviso);               /* «escolher» / comentário por resolver */

  /* ---------- Tipografia ---------- */
  --vd-fonte-titulos: "Bricolage Grotesque", "Figtree", "Segoe UI", system-ui, sans-serif;
  --vd-fonte-texto: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --vd-numeros: tabular-nums;       /* font-variant-numeric em preços, stock, códigos e tempos */
  --vd-peso-texto: 400;
  --vd-peso-medio: 500;
  --vd-peso-forte: 650;
  --vd-peso-titulo: 750;
  --vd-t-display: 56px;  --vd-l-display: 60px;
  --vd-t-h1: 40px;       --vd-l-h1: 46px;
  --vd-t-h2: 28px;       --vd-l-h2: 34px;
  --vd-t-h3: 21px;       --vd-l-h3: 28px;
  --vd-t-corpo: 16px;    --vd-l-corpo: 24px;
  --vd-t-pequeno: 14px;  --vd-l-pequeno: 20px;
  --vd-t-legenda: 12px;  --vd-l-legenda: 16px;
  --vd-t-codigo-live: 44px;         /* código da peça no modo ao vivo (legível a 1 m do telemóvel) */
  --vd-tracking-titulo: -0.012em;
  --vd-tracking-sobretitulo: 0.08em;

  /* ---------- Espaço (base 4) ---------- */
  --vd-e-1: 4px;  --vd-e-2: 8px;  --vd-e-3: 12px; --vd-e-4: 16px; --vd-e-5: 24px;
  --vd-e-6: 32px; --vd-e-7: 48px; --vd-e-8: 64px; --vd-e-9: 96px;

  /* ---------- Grelha ---------- */
  --vd-largura-max: 1200px;
  --vd-largura-texto: 680px;
  --vd-medianiz: 24px;
  --vd-margem-movel: 16px;
  --vd-margem-desktop: 32px;
  --vd-alvo-toque: 48px;            /* mínimo para botões no telemóvel durante a live */

  /* ---------- Raios ---------- */
  --vd-raio-1: 6px;      /* campos, etiquetas */
  --vd-raio-2: 10px;     /* botões */
  --vd-raio-3: 16px;     /* cartões */
  --vd-raio-4: 24px;     /* folhas e painéis no telemóvel */
  --vd-raio-pilula: 999px;

  /* ---------- Sombras ---------- */
  --vd-sombra-1: 0 1px 2px rgba(23, 20, 31, 0.08);
  --vd-sombra-2: 0 6px 20px rgba(23, 20, 31, 0.10);
  --vd-sombra-3: 0 16px 40px rgba(23, 20, 31, 0.16);

  /* ---------- Movimento ---------- */
  --vd-dur-rapida: 120ms;
  --vd-dur-media: 220ms;
  --vd-curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- Ícones (Lucide, ISC, em 04-sistema/icones/) ---------- */
  --vd-icone-traco: 2px;            /* stroke-width dos ícones; 1.75px a partir de 32 px */
  --vd-icone-pequeno: 16px;
  --vd-icone-medio: 20px;
  --vd-icone-grande: 24px;

  /* ---------- Modo ao vivo (ecrã escuro durante a live) ---------- */
  --vd-live-fundo: var(--vd-tinta);
  --vd-live-superficie: var(--vd-noite);
  --vd-live-linha: var(--vd-noite-linha);
  --vd-live-texto: var(--vd-branco);
  --vd-live-texto-suave: var(--vd-nevoa);
  --vd-live-destaque: var(--vd-framboesa-clara);
  --vd-live-pago: var(--vd-menta-clara);
  --vd-live-reservado: var(--vd-framboesa);        /* pílula com texto branco (4,58:1) */
  --vd-live-atencao: var(--vd-ambar);              /* pílula com texto Tinta (10,02:1) */
  --vd-live-t-stock: 16px;          /* stock por tamanho, legível a 1 m */
  --vd-live-t-etiqueta: 14px;       /* etiquetas de estado */
  --vd-live-t-comentario: 16px;     /* comentários no feed */

  /* ---------- Camadas ---------- */
  --vd-z-cabecalho: 10;
  --vd-z-folha: 50;
  --vd-z-aviso: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --vd-dur-rapida: 0ms; --vd-dur-media: 0ms; }
}