/* ═══════════════════════════════════════════════════════════════════
   POM DS v1 — tokens (2026-11). Fonte única: docs/site/design-system.md §2.
   Só :root e propriedades personalizadas — nenhuma regra visual aqui.
   Dois níveis: --pom-ref-* (paleta crua) → semântica (--pom-color-*, --pom-text-* …).
   Os componentes usam SÓ a semântica. Pontos de quebra (em @media, números): 600 / 900 / 1200.
   Carregado em todas as páginas (dependência de site-shell). Sem @layer (ver §5.2).
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── primitivos ── */
  --pom-ref-graphite-950: #14181F;  --pom-ref-graphite-900: #16191e;  --pom-ref-graphite-800: #2b2e33;
  --pom-ref-warm-700: #4f4a4a;      --pom-ref-warm-600: #6b6363;      --pom-ref-warm-500: #8a8484;
  --pom-ref-warm-200: #d6d1c8;      --pom-ref-warm-150: #e3e0da;      --pom-ref-warm-100: #F2F1EE;  --pom-ref-warm-50: #FBFBF9;
  --pom-ref-cool-300: #c4c8ce;      --pom-ref-cool-400: #b5bbc2;
  --pom-ref-yellow-500: #F0B51F;    --pom-ref-yellow-600: #D99E12;    --pom-ref-yellow-100: #fcf0d2;  --pom-ref-yellow-on-dark: #f2d58a;
  --pom-ref-blue-500: #2783EB;      --pom-ref-blue-700: #1A66C9;      --pom-ref-blue-50: #EEF4FD;
  --pom-ref-red-700: #B42318;       --pom-ref-red-50: #FEF3F2;        --pom-ref-green-wa: #0e7a3e;

  /* ── cor: superfícies claras ── */
  --pom-color-bg:            var(--pom-ref-warm-50);      /* fundo da página */
  --pom-color-surface:       #fff;                        /* cartões, senhas, campos */
  --pom-color-bg-muted:      var(--pom-ref-warm-100);     /* faixas e mosaicos muted */
  --pom-color-ink:           var(--pom-ref-graphite-950); /* títulos, texto forte, botão ink — 17:1 */
  --pom-color-text:          var(--pom-ref-warm-700);     /* parágrafos 8,4:1 */
  --pom-color-text-muted:    var(--pom-ref-warm-600);     /* legendas 5,2:1 no muted */
  --pom-color-line:          var(--pom-ref-warm-150);     /* divisórias (decorativas, 1,3:1) */
  --pom-color-line-strong:   var(--pom-ref-warm-200);     /* picotado das senhas, fichas */
  --pom-color-line-control:  var(--pom-ref-warm-500);     /* contorno de campos 3,7:1 (WCAG 1.4.11) */
  /* ── acento (azul do logótipo) ── */
  --pom-color-accent:        var(--pom-ref-blue-500);     /* SÓ linhas, gráficos, réguas (3,8:1) */
  --pom-color-accent-text:   var(--pom-ref-blue-700);     /* texto e fundos sob texto branco (5,5:1) */
  --pom-color-accent-soft:   var(--pom-ref-blue-50);      /* fundo do escolhido, placa «nosso» */
  --pom-color-accent-soft-line: rgba(39, 131, 235, .35);
  /* ── CTA (amarelo POM) ── */
  --pom-color-cta:           var(--pom-ref-yellow-500);   /* SÓ CTA principais: hero, preço, envio, barra fixa */
  --pom-color-cta-hover:     var(--pom-ref-yellow-600);
  --pom-color-on-cta:        var(--pom-ref-graphite-950); /* 9,6:1 */
  --pom-color-cta-soft:      color-mix(in srgb, var(--pom-ref-yellow-500) 18%, #fff); /* faixa amarela; ≈ #fcf0d2 */
  /* ── superfícies escuras ── */
  --pom-color-dark:          var(--pom-ref-graphite-900); /* faixa escura de secção */
  --pom-color-dark-2:        var(--pom-ref-graphite-800); /* rodapé */
  --pom-color-on-dark:       #fff;
  --pom-color-on-dark-text:  var(--pom-ref-cool-300);     /* 9–10:1 */
  --pom-color-on-dark-muted: var(--pom-ref-cool-400);     /* 9,1:1 (rodapé ainda #a9aeb6 — etapa 2) */
  --pom-color-on-dark-accent: var(--pom-ref-yellow-on-dark); /* dose/consumo no escuro 12,3:1 */
  --pom-color-on-dark-line:  rgba(255, 255, 255, .16);
  /* ── estados e marcas ── */
  --pom-color-danger:        var(--pom-ref-red-700);      --pom-color-danger-soft: var(--pom-ref-red-50);
  --pom-color-whatsapp:      var(--pom-ref-green-wa);     /* só a etiqueta «WhatsApp», 5,4:1 */
  /* ── foco: um só anel ── */
  --pom-focus-color:         var(--pom-color-accent-text);   /* 2 px #1A66C9 no claro (5,5:1 no branco) */
  --pom-focus-color-on-dark: var(--pom-color-accent);        /* no escuro #1A66C9 dá 2,4:1 — o mesmo azul, mais claro: 3,5:1 */
  --pom-focus-width:         2px;
  --pom-focus-offset:        3px;
  --pom-focus:               var(--pom-focus-width) solid var(--pom-focus-color);
  --pom-focus-on-dark:       var(--pom-focus-width) solid var(--pom-focus-color-on-dark);

  /* ── letra ── */
  --pom-font-heading: Raleway, sans-serif;
  --pom-font-body:    Roboto, sans-serif;
  --pom-font-num:     "Manrope", Roboto, sans-serif;      /* só algarismos: tnum + lnum */

  /* ── tamanhos (telemóvel → ecrã largo) ── */
  /* escala de títulos (2026-11-04, decisão do dono): H1 > H2 > H2-s > H3 em todas as larguras
     390: 36 / 30 / 28 / 20 · 1024: 55 / 40 / 34 / 23 · 1440: 64 / 48 / 40 / 26 */
  --pom-text-display: clamp(36px, 3.2vw + 22px, 64px);    /* H1 (hero) */
  --pom-text-h2:      clamp(30px, 1.8vw + 22px, 48px);    /* H2 de secção (era até 72 — maior do que o H1) */
  --pom-text-h2-s:    clamp(28px, 1.4vw + 20px, 40px);    /* H2 em coluna estreita / secção secundária (era até 52) */
  --pom-text-kicker:  clamp(20px, .8vw + 16px, 30px);     /* sobretítulo: frase normal, 500, cinzento */
  --pom-text-h3:      clamp(20px, .8vw + 14.5px, 26px);  /* era até 24 */
  --pom-text-h4:      18px;                               /* nome do passo, legend, H3 da senha */
  --pom-text-lead:    clamp(18px, .5vw + 15px, 23px);
  --pom-text-body:    16px;                               /* 17 px ≥900 */
  --pom-text-body-s:  15px;                               /* texto de cartões, dt/dd */
  --pom-text-small:   14px;
  --pom-text-caption: 13px;                               /* legendas de foto, ficha da obra */
  --pom-text-micro:   12px;                               /* pastilhas sobre foto; mínimo do site */
  --pom-text-num-xl:  clamp(48px, 2.4vw + 36px, 72px);    /* preço na senha */
  --pom-text-num-l:   clamp(32px, 1.6vw + 24px, 48px);    /* factos, pontuações */
  --pom-text-num-m:   24px;                               /* ficha da obra, telefone */
  --pom-leading-tight: 1.05; --pom-leading-snug: 1.25; --pom-leading-text: 1.55; --pom-leading-body: 1.6;
  --pom-tracking-display: -0.03em; --pom-tracking-h: -0.02em; --pom-tracking-ui: -0.01em;
  --pom-measure: 62ch; --pom-measure-lead: 55ch;

  /* ── espaço: escala de 8 ── */
  --pom-space-0-5: 4px;    /* só dentro de componentes (dt→dd, ícone→texto) */
  --pom-space-1: 8px;  --pom-space-1-5: 12px;   /* 12 — só gap de pastilhas e padding de linhas */
  --pom-space-2: 16px; --pom-space-3: 24px; --pom-space-4: 32px; --pom-space-5: 48px;
  --pom-space-6: 64px; --pom-space-7: 96px; --pom-space-8: 128px;
  /* ── grelha ── */
  --pom-container: 1200px;
  --pom-gutter: 24px;           /* margem do contentor; 40 ≥900 */
  --pom-gap: 16px;              /* gap da grelha de 12; 24 ≥900 */
  --pom-section: 56px;          /* vertical da secção; 96 ≥900 */
  --pom-section-l: 72px;        /* secções principais; 128 ≥900 */
  --pom-header-h: 64px;         /* 88 ≥900 */

  /* ── forma ── */
  --pom-radius-s: 8px;
  --pom-radius-m: 12px;
  --pom-radius-l: 24px;
  --pom-radius-pill: 999px;
  --pom-ring-line:   inset 0 0 0 1px var(--pom-color-line);
  --pom-ring-strong: inset 0 0 0 2px var(--pom-color-ink);
  --pom-rail:        inset 4px 0 0 var(--pom-color-accent);
  --pom-shadow-1: 0 1px 2px rgba(20,24,31,.06), 0 4px 16px rgba(20,24,31,.06);   /* elevado: plano escolhido, cartão do formulário */
  --pom-shadow-2: 0 16px 48px rgba(20,24,31,.18);                                /* flutuante: cartões UI sobre foto */
  --pom-shadow-3: 0 -1px 0 var(--pom-color-line), 0 -8px 24px rgba(20,24,31,.08); /* barra fixa inferior */
  --pom-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");

  /* ── pictogramas ── */
  --pom-icon-s: 24px; --pom-icon-m: 48px; --pom-icon-quiz: 64px; --pom-icon-l: 72px;
  --pom-num-d: 32px;            /* número em círculo: um só diâmetro */

  /* ── z-index ── */
  --pom-z-raised: 1;  --pom-z-float: 60;  --pom-z-sticky: 90;
  --pom-z-header: 1100;  --pom-z-overlay: 1200;  --pom-z-skip: 1300;

  /* ── movimento ── */
  --pom-ease: cubic-bezier(.2,.7,.2,1);
  --pom-motion-fast: .18s;      /* hover, press, troca de cor */
  --pom-motion-base: .25s;      /* abrir, barra fixa, progresso */
  --pom-motion-slow: .45s;      /* camadas do corte */
  --pom-motion-reveal: 1.1s;    /* o único «momento»: anel/pontuações, uma vez */

  /* ── legado: nomes do antigo css/pom-ds.css (removido em 2026-11) ── */
  --pom-ink: var(--pom-color-ink);   --pom-paper: var(--pom-color-bg);
  --pom-yellow: var(--pom-color-cta); --pom-yellow-d: var(--pom-color-cta-hover);
  --pom-font-h: var(--pom-font-heading); --pom-font-b: var(--pom-font-body);
}
@media (min-width: 900px) {
  :root { --pom-text-body: 17px; --pom-gutter: 40px; --pom-gap: 24px; --pom-section: 96px; --pom-section-l: 128px; --pom-header-h: 88px; }
}
/* movimento reduzido: um só sítio — tudo o que lê --pom-motion-* deixa de animar */
@media (prefers-reduced-motion: reduce) {
  :root { --pom-motion-fast: 0s; --pom-motion-base: 0s; --pom-motion-slow: 0s; --pom-motion-reveal: 0s; }
}