/* Momentum design tokens. Source of truth for the website and the private planner.
   Black and white with restrained neutral greys. Contrast ratios are noted against the
   surface each text token is intended for. Never add a brand accent colour. */
:root{
  /* Neutrals */
  --m-black:#000000;
  --m-ink:#0a0a0a;      /* page background, dark surfaces */
  --m-950:#111111;      /* raised dark surface */
  --m-900:#171717;      /* panel */
  --m-850:#1f1f1f;      /* input field on dark */
  --m-800:#2b2b2b;      /* hairline on dark */
  --m-700:#6e6e6e;      /* control border on dark: 3.5:1 on panel, 3.2:1 on field (WCAG 1.4.11) */
  --m-600:#5e5e5e;      /* secondary text on light: 6.4:1 on white */
  --m-500:#767676;      /* minimum grey for text on white: 4.5:1 */
  --m-400:#a3a3a3;      /* secondary text on dark: 7.9:1 on --m-ink */
  --m-300:#c9c9c9;      /* body text alt on dark */
  --m-200:#e3e3e3;      /* hairline on light */
  --m-100:#f2f2f2;      /* light surface */
  --m-50:#f8f8f8;       /* paper */
  --m-white:#ffffff;

  /* Semantic roles (dark default) */
  --bg:var(--m-ink);
  --surface:var(--m-900);
  --surface-2:var(--m-950);
  --field:var(--m-850);
  --line:var(--m-800);
  --control:var(--m-700);
  --text:var(--m-white);
  --text-2:var(--m-400);
  --text-3:var(--m-300);
  --paper:var(--m-50);
  --paper-text:var(--m-ink);
  --paper-muted:var(--m-600);
  --paper-line:var(--m-200);
  --focus:var(--m-white);

  /* Type: neo-grotesque. Helvetica Neue on Apple devices, Arial elsewhere.
     PDFs use the base-14 Helvetica, so print and screen read as one family. */
  --font:"Helvetica Neue",Arial,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:18px; --t-xl:22px;
  --t-2xl:28px; --t-3xl:40px; --t-4xl:56px; --t-5xl:72px;
  --track-tight:-0.025em; --track-caps:0.16em;

  /* Space: 4px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* Shape and motion */
  --radius:2px; --radius-lg:4px;
  --measure:62ch;
  --ease:cubic-bezier(.2,.6,.2,1);
}