/**
 * 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.
 *
 * Two rules from the design spec are enforced by what is and is not in here:
 *
 *   1. Data is mono, sentences are sans. The `label`, `chip*`, `monoData` and
 *      `codeBlock` styles carry `font-mono`; nothing with a verb in it does.
 *   2. Nothing that explains is smaller than 16px. `prose` is the floor, and
 *      `small` / `caption` exist for metadata, never for a paragraph.
 *
 * Weight ceiling is 600 — the type scale in tailwind.config.js bakes weight
 * into each size, so `font-bold` never appears on a page.
 *
 * 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. The language's density, not an essay's. */
export const section = 'py-12 sm:py-16';

/* ------------------------------------------------------------------- type */

/** Mono small-caps section label. The same style as every chip and table head. */
export const label = 'font-mono text-label uppercase text-muted';

/** Kept under its old name: the shell and the router read `eyebrow`. */
export const eyebrow = label;

/** The landing h1 only. 36 → 48 → 56. */
export const display = 'text-display text-fg lg:text-display-lg xl:text-display-xl';

/** Every other page's h1. 28 → 32. */
export const h1 = 'text-h1 text-fg lg:text-h1-lg';

export const h2 = 'text-h2 text-fg lg:text-h2-lg';

export const h3 = 'text-h3 text-fg';

/** Under an h1. Prose ink, 72ch. */
export const lede = 'max-w-measure-wide text-lede text-fg-2 lg:text-lede-lg';

/** The education floor: 16/1.6, prose ink, 62ch. Never smaller. */
export const prose = 'max-w-measure text-prose text-fg-2';

/** Metadata beside a thing, never a paragraph. */
export const small = 'text-small text-muted';

export const caption = 'text-caption text-muted';

/** A number or an identifier in running chrome. */
export const monoData = 'font-mono text-mono-data';

/* ---------------------------------------------------------------- buttons */

const btnBase =
  'tap inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-ui font-medium transition-colors duration-1 ease-enter';

/**
 * Filled call to action. The 1px `accent-edge` border is what makes it a
 * control on a light projector, where the fill is 1.47:1 against white. The
 * neon fill has no darker sibling on paper, so light hovers to the subtle
 * ground with accent ink; dark dims the fill.
 */
export const btnPrimary = `${btnBase} border border-accent-edge bg-brand text-accent-on hover:bg-accent-subtle hover:text-accent-fg dark:hover:bg-brand/90 dark:hover:text-accent-on`;

/** Outlined call to action, for the second-choice action beside a primary. */
export const btnSecondary = `${btnBase} border border-border-strong bg-surface text-fg 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-border-strong underline-offset-4 transition-colors duration-1 ease-enter hover:decoration-accent-fg';

/** A quiet navigation link — back, next, "all twelve". 44px tall. */
export const navLink =
  'tap inline-flex items-center gap-1.5 text-ui font-medium text-muted transition-colors duration-1 ease-enter hover:text-fg';

/* ------------------------------------------------------------------ chips */

/**
 * The chip family. One shape, mono 11 uppercase, 4px radius. A visitor learns
 * after the second one that this shape means "a thing we are telling you about
 * the data", so no chip on a page is ever sans or rounder than this.
 */
const chipBase =
  'inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 font-mono text-label uppercase';

/** Outline: SPEC, PROPOSED BY PIG-DEMO, OBJECTIVE, RANK. */
export const chipOutline = `${chipBase} border-border-strong text-muted`;

/** Muted: RECORDED RUN, NOT IN THE FIRST SET, GATE. */
export const chipMuted = `${chipBase} border-transparent bg-surface-3 text-muted`;

/** Solid: LIVE. Pass `rounded-full` for a status pill. */
export const chipSolid = `${chipBase} border-accent-edge bg-brand text-accent-on`;

/** Warning: EDITED, COUNTERWEIGHT, WHERE THIS STOPS. */
export const chipWarning = `${chipBase} border-transparent bg-warning-subtle text-warning`;

/** Kept under the old names for the two callers outside this lane. */
export const pill = chipOutline;

/** The standing "these are our proposals" badge. */
export const proposalPill = chipOutline;

/* ------------------------------------------------------------- surfaces */

/** A card that is also a link: the whole rectangle is the target. */
export const cardLink =
  'card group flex flex-col p-4 transition-colors duration-1 ease-enter hover:border-border-strong sm:p-5';

/** A list row that is a link. 64px on a phone, 56px from lg. */
export const rowLink =
  'flex min-h-16 items-center gap-3 py-3 transition-colors duration-1 ease-enter hover:bg-surface-2 lg:min-h-14';

/** Monospaced command block. Scrolls itself rather than the page. */
export const codeBlock =
  'overflow-x-auto rounded-md border border-border bg-surface-3 p-3 font-mono text-code text-fg [font-feature-settings:"liga"_0]';

/** The buyer's question, as a quiet quote. 2px rule, no italics. */
export const quote = 'max-w-[60ch] border-l-2 border-border-strong pl-4 text-prose text-fg-2';

/** A hairline between blocks. */
export const rule = 'border-t border-border';
