/**
 * The class strings the marketing pages share.
 *
 * These pages own no components — the shared UI primitives belong to another
 * part of the tree — so the alternative to this file was the same forty
 * characters of Tailwind copied into five pages and drifting apart. Strings,
 * not components, so nothing here reaches for React.
 *
 * Horizontal padding is written against the safe-area tokens rather than a
 * flat value: on a notched phone in landscape, a flat `px-5` puts the first
 * character of every heading under the rounded corner.
 */

/** Page-width container with safe-area-aware gutters. */
export const shell =
  'mx-auto w-full max-w-canvas pl-[max(1.25rem,var(--safe-left))] pr-[max(1.25rem,var(--safe-right))] sm:pl-[max(2rem,var(--safe-left))] sm:pr-[max(2rem,var(--safe-right))]';

/** Vertical rhythm between top-level sections. */
export const section = 'py-12 sm:py-16';

/** Small uppercase label above a section heading. */
export const eyebrow = 'text-xs font-semibold uppercase tracking-[0.14em] text-muted';

export const h1 =
  'text-[2rem] leading-[1.08] font-extrabold tracking-tight text-fg sm:text-5xl lg:text-6xl';

export const h2 = 'text-2xl font-bold tracking-tight text-fg sm:text-3xl';

export const h3 = 'text-base font-semibold text-fg';

export const lede = 'text-lg leading-relaxed text-muted sm:text-xl';

export const prose = 'text-[0.9375rem] leading-relaxed text-muted';

/** Filled call to action. 44px tall via `.tap`. */
export const btnPrimary =
  'tap inline-flex items-center justify-center gap-2 rounded-lg bg-brand px-5 py-2.5 text-sm font-semibold text-accent-on transition-colors duration-2 ease-enter hover:bg-accent-fg';

/** Outlined call to action, for the second-choice action beside a primary. */
export const btnSecondary =
  'tap inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-surface px-5 py-2.5 text-sm font-semibold text-fg transition-colors duration-2 ease-enter hover:bg-surface-2';

/** Inline link inside running text. Underlined, because colour alone is not a link. */
export const link =
  'font-medium text-accent-fg underline decoration-accent-fg/40 underline-offset-4 transition-colors duration-1 ease-enter hover:decoration-accent-fg';

/** Small pill. Neutral by default; pass a colour class after it. */
export const pill =
  'inline-flex items-center gap-1.5 rounded-md border border-border bg-surface-2 px-2 py-1 text-xs font-medium text-muted';

/** The standing "these are our proposals" badge. */
export const proposalPill =
  'inline-flex items-center gap-1.5 rounded-md border border-border bg-surface-2 px-2 py-1 text-[0.6875rem] font-semibold uppercase tracking-wider text-muted';

/** A card that is also a link: the whole rectangle is the target. */
export const cardLink =
  'card group flex flex-col p-5 transition-colors duration-2 ease-enter hover:border-brand/40 hover:bg-surface-2';

/** Monospaced command block. Scrolls itself rather than the page. */
export const codeBlock =
  'nums overflow-x-auto rounded-lg border border-border bg-surface-2 p-3 font-mono text-[0.8125rem] leading-relaxed text-fg';
