/* VEXOFORM design tokens. The single source for colour, type, spacing and radius on the web.
   Consumers: the Ghost theme and the platform UI. Fonts are self-hosted: no Google Fonts
   request leaves the visitor's browser (GDPR). Contrast notes live in brand-assets/CLAUDE.md. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
              src: url("fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
              src: url("fonts/montserrat.woff2") format("woff2"); }

:root {
  /* Colour */
  --anthrazit-core: #373d3f;
  --vexo-blue: #009cde;
  --deep-water: #005b82;
  --steel-gray: #cfd8dc;
  --pure-white: #ffffff;
  --surface: var(--pure-white);
  --canvas: #f4f6f7;
  --sunken: #eef2f3;
  --line: #dde3e5;
  --line-strong: var(--steel-gray);
  --control: #7f8b8f;
  --ink: var(--anthrazit-core);
  --muted: #5f6a6d;
  --on-dark: var(--pure-white);
  --on-dark-muted: var(--steel-gray);
  --accent: var(--vexo-blue);
  --action: var(--deep-water);
  --action-hover: #00435f;
  --on-action: var(--pure-white);
  --link: var(--deep-water);
  --link-hover: var(--action-hover);
  --focus: var(--deep-water);
  --focus-on-dark: var(--vexo-blue);
  --danger: #b3261e;
  --danger-tint: #fdecea;
  --warning: #8a5200;
  --warning-tint: #fff4e0;
  --success: #1f7a50;
  --success-tint: #e8f5ee;
  --info-tint: #e5f4fb;

  /* Type */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace;
  /* Font sizes */
  --text-display: 56px;
  --text-h1: 40px;
  --text-h2: 30px;
  --text-h3: 22px;
  --text-h4: 18px;
  --text-lead: 20px;
  --text-prose: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 12px;
  --text-eyebrow: 11px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 1px 2px rgba(55,61,63,.04), 0 10px 26px rgba(55,61,63,.06);
  --shadow-card-hover: 0 2px 4px rgba(55,61,63,.06), 0 16px 34px rgba(0,156,222,.12);
  --shadow-menu: 0 8px 24px rgba(55,61,63,.16);

  /* Layout */
  --container-max: 1120px;
  --prose-max: 680px;
  --header-height: 64px;
}