/* ========================================================================== Arata Power Method · tokens Fonte: Figma Xxek0ca07Pt7dzqp19tA0b, frame "Pagina" (2025:1223, 1920 x 8738) Regra de snap: até 16 -> 1px | 17 a 48 -> 2px | acima de 48 -> múltiplo de 4 dentro de 4% Cada valor tem a origem registrada em RELATORIO.md. ========================================================================== */ :root { /* ---------- Cor ---------- */ --brand: #117c5d; /* pílula do CTA, barras, faixa de logos, garantia, ícones */ --brand-bright: #23aa84; /* círculo do CTA e botão da newsletter */ --brand-deep: #094131; /* selo estrela */ --ink: #292d32; /* texto principal, card do problema */ --ink-strong: #1a1a1a; /* só o parágrafo do hero (SINALIZADO) */ --ink-soft: #383838; /* só "Click here to go" (SINALIZADO) */ --ink-muted: #707070; /* corpo secundário */ --ink-subtle: #616161; /* placeholder e chips (absorve #5e5e5e, dE 1.10) */ --ink-legal: #565262; /* copyright */ --on-brand: #ffffff; --on-brand-muted: #c3c3c3; /* corpo da garantia (falha AA, SINALIZADO) */ --bg: #f4f4f4; /* fundo da página (absorve #eeeeee, dE 1.25) */ --surface: #d9d9d9; /* cards, hero, footer, trilho das barras */ --field: #e0e0e0; /* inputs e barra de copyright (absorve #e5e5e5, dE 1.10) */ --white: #ffffff; /* nav, chips, trilho do contador */ --line: #adadad; /* borda superior da barra de copyright */ --grip: #969696; /* alça do textarea */ --black: #000000; /* colors/base/default-foreground (variável do Figma) */ --glass-bg: rgb(0 0 0 / 0.32); --glass-line: rgb(121 121 121 / 0.64); --grad-mint: linear-gradient(135deg, #b2e5de 9%, #79dcad 91%); /* fundo da figura do formulário */ /* ---------- Tipografia ---------- */ --font: "Inter", system-ui, sans-serif; /* troca pedida pelo José em 03/11/2026 (era Montserrat) */ --font-legal: var(--font); --ls: -0.06em; /* kerning -6% em todas as fontes, pedido do José */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-normal: 1.22; /* "normal" da Montserrat (102 px / 2 linhas de 42) */ --lh-tight: 1.1; /* PROPOSTA para display */ --lh-body: 1.25; /* 16 px: o Figma arredonda a linha para 20 */ --lh-label: 1.2; /* 20 px: linha de 24 no Figma */ --ls-0: -0.06em; /* era 0 no Figma; -6% pedido do José */ --ls-caps: 0em; --fs-display-xl: 68px; /* "230+" 66.78 */ --fs-display-lg: 60px; /* "4.8" 58.18 */ --fs-h2: 42px; /* títulos de seção */ --fs-h3: 28px; /* título de card 28, rótulo do contador 27.39 */ --fs-logo-lg: 26px; /* "Arata power" do footer 26.59 */ --fs-lead: 24px; /* CTA 24, lead do hero 24, corpo grande 23 */ --fs-subtitle: 22px; /* legenda da garantia 22.03, logo da faixa 21.99 */ --fs-label: 20px; /* nav e eyebrow 19.11, chips 20.79, depoimento 19.85 / 19.61, footer 19 */ --fs-body-lg: 18px; /* "Method" do footer 18.06, copyright 17.27 */ --fs-body: 16px; --fs-logo-sm-2: 15px; /* "Method" da faixa 14.94 */ --fs-small: 14px; --fs-logo-sm: 13px; /* "Method" da nav 12.98 */ --fs-caption: 11px; /* cargo no depoimento 10.72 */ --fs-micro: 10px; /* legendas do card de avaliação 9.90 */ /* ---------- Espaço (grade de 4) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; --sp-40: 160px; --space-section: var(--sp-40); /* 154 a 160 entre blocos no Figma */ --gutter: 320px; /* margem do Figma em 1920 */ --container: 1280px; --container-pad: max(var(--sp-5), calc((100vw - var(--container)) / 2)); /* ---------- Raio ---------- */ --radius-xs: 14px; /* card de avaliação 13.78 */ --radius-sm: 16px; /* card de pilar e diferencial */ --radius-md: 20px; /* card de depoimento */ --radius-lg: 26px; /* card do problema */ --radius-xl: 32px; /* textarea, fundo da figura do formulário */ --radius-2xl: 38px; /* fotos e blocos de imagem */ --radius-hero: 64px; /* máscara do hero 65 */ --radius-pill: 999px; /* 31, 44, 52, 63, 77, 80, 95, 103, 109: todos >= metade da altura */ /* ---------- Sombra ---------- */ /* Clean shadow (estilo do Figma, 6 camadas, arredondado ao inteiro) */ --shadow-clean: 0 3px 6px rgb(0 0 0 / 0.05), 0 7px 15px rgb(0 0 0 / 0.07), 0 13px 28px rgb(0 0 0 / 0.09), 0 22px 50px rgb(0 0 0 / 0.10), 0 42px 94px rgb(0 0 0 / 0.12), 0 100px 225px rgb(0 0 0 / 0.17); /* PROPOSTA: níveis menores derivados das mesmas camadas */ --shadow-sm: 0 3px 6px rgb(0 0 0 / 0.05), 0 7px 15px rgb(0 0 0 / 0.07), 0 13px 28px rgb(0 0 0 / 0.09); --shadow-md: 0 3px 6px rgb(0 0 0 / 0.05), 0 7px 15px rgb(0 0 0 / 0.07), 0 13px 28px rgb(0 0 0 / 0.09), 0 22px 50px rgb(0 0 0 / 0.10); --blur-glass: 13px; /* backdrop do card de avaliação 12.65 */ /* ---------- Ícone ---------- */ --icon-sm: 20px; /* estrela 19.03 */ --icon: 24px; --icon-eyebrow: 36px; /* folha do eyebrow, girada 11.57deg numa caixa de 42 */ --icon-box: 44px; /* 24 + 10 + 10 */ --icon-box-sm: 40px; /* estrela 19.03 + 10 + 10 = 39.03 */ --icon-box-lg: 64px; /* círculo do CTA */ /* ---------- Controles ---------- */ --control-h: 64px; --control-pad: var(--sp-10); /* 38 no input */ --hit-min: 40px; /* desktop */ --focus-ring: var(--ink); --focus-ring-inner: var(--white); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-press: 160ms; --dur-hover: 450ms; --dur-exit: 320ms; --dur-enter: 700ms; --dur-count: 1600ms; --dur-float: 6s; --dur-spin: 24s; --stagger: 80ms; --lift: -2px; --press-scale: 0.96; } /* ---------- Mobile 390 (PROPOSTA, não existe frame mobile no Figma) ---------- */ @media (max-width: 640px) { :root { --fs-display-xl: 48px; --fs-display-lg: 48px; --fs-h2: 28px; --fs-h3: 22px; --fs-logo-lg: 22px; --fs-lead: 18px; --fs-subtitle: 18px; --fs-label: 16px; --fs-body-lg: 16px; --space-section: var(--sp-20); --gutter: var(--sp-5); --control-h: 56px; --control-pad: var(--sp-6); --icon-box-lg: 56px; --hit-min: 44px; --radius-lg: 20px; --radius-xl: 24px; --radius-2xl: 26px; --radius-hero: 32px; } }