/**
 * Botões da home e das páginas de conversão. Verde-limão preenchido só para a ação de contato;
 * as demais ações são contorno ou link de texto. Texto em sans, 15 a 16 px, sem caixa-alta.
 * A resposta ao ponteiro e ao foco é uma por papel (cv-fill, cv-outline-*, cv-bar, em globals.css).
 */
const base =
  "inline-flex min-h-12 items-center justify-center gap-sp-3 px-sp-5 py-sp-3 text-center font-display text-[15px] normal-case leading-6 tracking-normal no-underline sm:text-[16px]";

export const primaryButton = `${base} cv-fill bg-[var(--slash)] font-semibold text-[var(--ink)]`;

/** Contorno sobre fundo escuro. */
export const secondaryButtonDark = `${base} cv-outline-dark border border-white/25 bg-transparent font-medium text-[#f4f2ed]`;

/** Contorno sobre fundo claro. */
export const secondaryButtonLight = `${base} cv-outline-light border border-[var(--ink-40)] bg-transparent font-medium text-[var(--ink)]`;

const textLinkBase =
  "cv-bar inline-flex min-h-11 items-center font-display text-[15px] font-medium normal-case leading-6 tracking-normal underline underline-offset-4 sm:text-[16px]";

/** Link de texto sobre fundo claro. */
export const textLink = textLinkBase;

/** Link de texto sobre fundo escuro. */
export const textLinkDark = `${textLinkBase} text-white/80`;

/**
 * Primeira seção de uma página interna, no celular: o padding de .ds-section (52 px) é menor que o cabeçalho fixo (60 px),
 * e a trilha de navegação ficava por baixo dele. O "!" vence o CSS sem camada de globals.css.
 */
export const pageTop =
  "max-[768px]:!pt-[calc(var(--site-header-height)+var(--sp-6))]";