/* ========================= /assets/css/tokens.css Por quê: fonte/cores/escala centralizadas para toda a LP ========================= */ /* Fonte: Space Grotesk (carregue via no depois) */ :root{ /* CORES (paleta aprovada) */ --brand: #4b084a; /* primária */ --brand-600: #3e073f; /* hover/ativo (mais escuro) */ --accent: #c7367b; /* acento/detalhes */ --surface: #efe9ce; /* fundo creme */ --ink: #161616; /* texto principal */ --muted: #6b6b6b; /* texto secundário */ --line: rgba(0,0,0,.08); /* divisórias/bordas leves */ /* TIPOGRAFIA */ --font-sans: "Space Grotesk", system-ui, -apple-system, Segoe UI, Inter, Arial, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 800; /* ESCALA TIPOGRÁFICA (títulos pequenos e fortes) */ --fs-h1: clamp(1.75rem, 3.2vw, 2.25rem); /* ~28–36px */ --fs-h2: clamp(1.25rem, 2.4vw, 1.75rem); /* ~20–28px */ --fs-h3: clamp(1.05rem, 1.8vw, 1.25rem); /* ~16–20px */ --fs-body: 1rem; /* 16px */ /* LAYOUT */ --container: 1180px; --pad: 24px; --radius: 16px; --shadow: 0 10px 30px rgba(0,0,0,.08); /* ESTADOS */ --focus: #c7367b; /* cor do foco visível */ } /* Aplicação base mínima */ html, body{ background:#fff; color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1{ font-size:var(--fs-h1); font-weight:var(--fw-black); letter-spacing:-.01em; } h2{ font-size:var(--fs-h2); font-weight:var(--fw-black); letter-spacing:-.01em; } h3{ font-size:var(--fs-h3); font-weight:var(--fw-bold); } p{ font-size:var(--fs-body); } :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; } .container, .inner{ width:min(var(--container), 100%); margin-inline:auto; padding-inline:var(--pad); } .section{ background:var(--surface); } /* Botão base (sem tema) – tema vai em arquivos seguintes */ .btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.1rem; border:1px solid transparent; border-radius:999px; font-weight:var(--fw-bold); transition:transform .06s ease, opacity .2s ease; } .btn:active{ transform: translateY(1px); }