    :root {
      /* Colour. The page is warm parchment and the things on it are cream, as on
         the public site (donoadmin.com); ruby is the one accent. Roles and the
         verified contrast pairs are in BRAND.md. */
      --ink: #251C1B;
      --espresso: #3B2A20;       /* Home's visit rows: warm dark brown, readable on cream */
      --ink-2: #655F5D;
      --ink-3: #6F6A66;          /* 4.6:1 on the page: the floor, helper text only */
      --plum: #5C1A32;
      --garnet: #6B0F1E;
      --cherry: #CF424A;
      --blush: #FFB8C8;
      --gold: #B8965A;
      /* --gold is decorative only (dots, rules, borders); it fails contrast as
         text. Anything readable uses --gold-text. */
      --gold-text: #6E5830;
      /* Warning / needs a look: gold text on its own tint. */
      --warn: #6E5830;
      --warn-bg: rgba(184, 150, 90, 0.2);
      /* Done/accepted text. Used on its own 12-14% tint. */
      --success: #3D6336;
      --cream: #FBFAF7;
      --surface: #F3EDE3;        /* the page */
      --card: #FBFAF7;           /* things on the page */
      --field: #FFFFFF;          /* what you type into */
      --border: #D6CDC1;
      --border-soft: #E4DDD5;
      --border-strong: #8F8578;  /* form-control edges: 3:1 on white */
      --accent: #DB2A33;
      --ruby: #A31F3D;
      --ruby-hover: #BD2E4C;
      /* Type: one scale. A size that is not on it is a bug. */
      --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
      --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
      --font-title: "Source Serif 4", Georgia, serif;
      --font-wordmark: "Yeseva One", "Playfair Display", Georgia, serif;
      --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
      --text-xs: 11px;           /* caps labels, tracker steps, rail labels */
      --text-sm: 12.5px;         /* meta, helper text, table cells */
      --text-base: 14px;         /* body and UI */
      --text-md: 15px;           /* card titles, leads */
      --text-lg: 17px;           /* section headings */
      --text-title: 36px;        /* the page's title (Source Serif 4, 600) */
      /* Space: a 4px base. New CSS uses these; older odd values converge as
         they are touched. */
      --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
      --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
      /* Shape: consistent and soft; softness never reaches the numbers. */
      --radius-sm: 6px;          /* chips, tags */
      --radius-md: 10px;         /* buttons, fields, rows */
      --radius-lg: 12px;         /* cards, panels */
      --radius-xl: 16px;         /* dialogs */
      --radius-pill: 999px;
      /* Motion: 120-240ms, ease-out, to explain what happened. */
      --motion-fast: 120ms ease-out;
      --motion: 180ms ease-out;
      --shadow-card: 0 1px 2px rgba(37, 28, 27, 0.08), 0 1px 1px rgba(37, 28, 27, 0.05);
    }
