/* EveryRole design tokens: the ONLY place raw colors and sizes live.
   Three layers, each built on the one before:
     1. primitives  the palette and the scales (never used directly by components)
     2. semantic    what a value means: text, surface, line, and the four result states
     3. component   sizes shared by one kind of component (controls, pills)
   Rules (checked by tests/test_design.py): app.css uses var(--...) for every color, spacing, radius and text size.
   Color only where it carries meaning: green passed · red broken · grey dashed couldn't check · amber 2nd try,
   and the brand (the logo's greens, static/logo.svg) on what you act with: primary buttons, the active tab or
   menu item, focus rings, the current step.
   The live reference of every token and component is the /design page of the web UI.
   Two worlds share the scales: the public site (the marked proof: paper, Besley sentences) uses the :root semantic
   layer; the signed-in app (static/ui.css, <body class="app">) redefines the semantic layer in `.app` as a
   housekeeping inspection: a cool linen ground, a bottle-green shell, and door tags whose colors each do one job
   (green passed, coral broken, olive needs updating, ochre couldn't check, dashed grey not run, blue the active
   leg: the current step and the selected item, never decoration). See DESIGN.md. */
/* the signed-in app's fonts, self-hosted (static/fonts): one family for everything, a mono for code */
@font-face {
  font-family: "Onest";
  src: url("fonts/Onest-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
:root {
  /* ------------------------------------------------------------ 1. primitives */
  --gray-0: #fff;
  --gray-25: #FAFBFC;
  --gray-50: #F8F9FA;
  --gray-75: #F6F7F8;
  --gray-100: #F4F5F7;
  --gray-125: #F1F2F4;
  --gray-150: #EEF0F2;
  --gray-175: #EAECEF;
  --gray-200: #E9EBEE;
  --gray-250: #E3E6EA;
  --gray-300: #D5D9DF;
  --gray-350: #C3C8D0;
  --gray-400: #B5BCC6;
  --gray-500: #9AA1AC;
  --gray-600: #646B76;
  --gray-650: #555D69;
  --gray-700: #4A515C;
  --gray-850: #2A2F37;
  --gray-900: #15181D;
  --gray-950: #0E1013;
  --stripe-a: #EDEFF2;
  --stripe-b: #F5F6F8;

  /* the logo's greens (static/logo.svg): the account stack, back to front */
  --brand-100: #A9E2C9;
  --brand-400: #4FBF93;
  --brand-600: #1F7A5A;
  --brand-700: #17624A;
  --brand-bright: #34D399;             /* on dark backgrounds (logo-dark.svg) */
  --brand-50: #EAF7F1;

  /* the public site's paper and inks (site.css, the sign-in pages, emails): a green-black on a cool white */
  --forest-25: #F6F8F5;
  --forest-50: #E9EFEA;
  --forest-100: #E6EBE7;
  --forest-200: #D5DDD7;
  --forest-400: #7A867F;
  --forest-450: #636F68;
  --forest-500: #56645C;
  --forest-600: #33433B;
  --forest-700: #175240;
  --forest-800: #0F3D2E;
  --forest-900: #2A4034;
  --forest-950: #0D1F17;
  --forest-975: #06110C;
  --forest-on: #EEF7F2;                /* text on the bottle band */
  --forest-on-2: #B9D6C8;
  --forest-on-3: #C9D8CF;              /* text on the ink footer */
  --forest-code: #DDEFE5;              /* code on ink */
  --forest-code-2: #8FB3A1;
  --pen-50: #FBE7E3;
  --pen-600: #C0281C;
  --amber-350: #D9A441;

  --green-50: oklch(0.955 0.04 150);
  --green-500: oklch(0.62 0.13 150);
  --green-700: oklch(0.5 0.12 150);
  --red-25: oklch(0.985 0.01 27);
  --red-50: oklch(0.965 0.025 27);
  --red-200: oklch(0.88 0.06 27);
  --red-500: oklch(0.58 0.19 27);
  --red-600: oklch(0.52 0.19 27);
  --red-700: oklch(0.45 0.17 27);
  --amber-50: oklch(0.96 0.045 85);
  --amber-200: oklch(0.85 0.08 80);
  --amber-400: oklch(0.75 0.12 80);
  --amber-450: oklch(0.72 0.13 75);
  --amber-700: oklch(0.5 0.11 65);

  /* the signed-in app's palette (ui.css): linen greys with a green cast, the logo's bottle greens, and one hue per
     door-tag state */
  --white: #fff;
  --opaque: #000;                      /* the solid part of a mask (the door-tag notch) */
  --linen-25: #fafbf8;
  --linen-50: #f7f8f5;
  --linen-100: #f1f3ee;
  --linen-125: #eef1ec;
  --linen-150: #e6eae5;
  --linen-160: #e9ede8;
  --linen-175: #e9ece7;
  --linen-200: #dde2da;
  --linen-250: #cfd5cf;
  --linen-275: #c5ccc4;
  --linen-300: #c3cbc1;
  --linen-325: #b9c2b8;
  --linen-350: #aeb8ad;
  --linen-375: #9ea89f;
  --linen-400: #9aa59f;
  --linen-450: #8a948e;
  --linen-500: #7f8a84;
  --linen-550: #7b8680;
  --linen-650: #56615b;
  --linen-700: #5b6761;
  --linen-725: #4b5751;
  --linen-750: #46524c;
  --linen-800: #3c4943;
  --linen-950: #13201a;
  --bottle-200: #a8c8ba;
  --bottle-700: #1a5442;
  --bottle-800: #134535;
  --bottle-900: #0d3527;
  --bottle-950: #0a2a1f;
  --bottle-975: #0f241b;
  --brand-75: #c6eedb;
  --leaf-25: #e4f7ee;
  --leaf-50: #e1f2e8;
  --leaf-200: #9fd2b8;
  --leaf-300: #7fd3a8;
  --leaf-400: #49c08c;
  --leaf-500: #2c8a66;
  --leaf-700: #17734f;
  --leaf-750: #1c6a4c;
  --leaf-800: #0f5137;
  --mint-code: #d6efe3;
  --coral-25: #fff7f5;
  --coral-50: #fdebe6;
  --coral-75: #fff1ed;
  --coral-200: #f0ad9f;
  --coral-400: #ff7a63;
  --coral-600: #cf3d28;
  --coral-700: #a72c19;
  --ochre-25: #fffaf0;
  --ochre-50: #fcefd7;
  --ochre-200: #ecc98b;
  --ochre-400: #f2b347;
  --ochre-650: #8a5207;
  --ochre-700: #a8620a;
  --ochre-750: #7a4706;
  --ochre-800: #6b4106;
  --ochre-850: #7e4800;
  --ochre-950: #3d2600;
  --olive-25: #fbfaf1;
  --olive-50: #f5f3df;
  --olive-200: #cdc58a;
  --olive-300: #d6cd78;
  --olive-600: #8c8420;
  --olive-800: #5f5a12;
  --blue-50: #e8f0fc;
  --blue-100: #dbe7fa;
  --blue-150: #cfe6ff;
  --blue-200: #c7daf6;
  --blue-250: #b9d0f3;
  --blue-300: #8cc4ff;
  --blue-600: #1d64c9;
  --night-950: #0f1720;                /* behind screenshots and videos */
  --white-a3: rgba(255, 255, 255, .03);   /* tints on the shell */
  --white-a6: rgba(255, 255, 255, .06);
  --white-a7: rgba(255, 255, 255, .07);
  --white-a8: rgba(255, 255, 255, .08);
  --white-a10: rgba(255, 255, 255, .10);
  --white-a12: rgba(255, 255, 255, .12);
  --white-a25: rgba(255, 255, 255, .25);
  --white-a35: rgba(255, 255, 255, .35);
  --mint-a12: rgba(214, 240, 228, .12);
  --bottle-a5: rgba(13, 53, 39, .05);     /* tints on linen */
  --bottle-a6: rgba(13, 53, 39, .06);
  --bottle-a8: rgba(13, 53, 39, .08);
  --black-a2: rgba(0, 0, 0, .02);
  --black-a8: rgba(0, 0, 0, .08);
  --black-a20: rgba(0, 0, 0, .2);
  --black-a22: rgba(0, 0, 0, .22);
  --black-a25: rgba(0, 0, 0, .25);
  --ink-a6: rgba(13, 30, 23, .06);
  --ink-a32: rgba(13, 30, 23, .32);
  --ink-a40: rgba(13, 30, 23, .4);
  --bottle-a86: rgba(12, 32, 24, .86);
  --blue-a12: rgba(140, 196, 255, .12);
  --blue-a35: rgba(140, 196, 255, .35);

  /* spacing scale (px): 1 2 4 6 8 10 12 14 16 20 24 28 32 40 48 64 120 */
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-30: 120px;
  --space-4-5: 18px;
  --space-5-5: 22px;
  --space-6-5: 26px;
  --space-7-5: 30px;
  --space-8-5: 34px;
  --space-9: 36px;
  --space-11: 44px;
  --space-11-5: 46px;
  --space-13: 52px;
  --space-18: 72px;
  --space-27-5: 110px;
  --space-0-75: 3px;      /* the signed-in app's in-between steps (ui.css) */
  --space-1-25: 5px;
  --space-1-75: 7px;
  --space-2-25: 9px;
  --space-2-75: 11px;
  --space-29-5: 118px;

  /* text scale */
  --text-3xs: 9px;     /* labels inside thumbnails */
  --text-2xs: 11px;
  --text-xs: 12.5px;   /* meta, pills, tags */
  --text-sm: 13.5px;   /* secondary text, table cells */
  --text-md: 14px;     /* body in cards */
  --text-base: 15px;   /* page body */
  --text-lg: 16px;
  --text-xl: 17px;
  --text-2xl: 19px;
  --text-3xl: 22px;    /* h2 */
  --text-4xl: 24px;
  --text-5xl: 28px;    /* h1 */
  --text-6xl: 34px;    /* big numbers */
  --text-7xl: 40px;    /* first-time hero */
  --text-hero: clamp(2.2rem, 1.2rem + 3.9vw, 4.1rem);        /* the site's headline */
  --text-sentence: clamp(1.5rem, 1.05rem + 1.9vw, 2.6rem);   /* a test sentence on the site */
  --text-display: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);  /* the site's section headings */
  --text-quote: clamp(1.2rem, 1rem + .8vw, 1.6rem);          /* a smaller sentence: keys, quotes, questions */
  --text-title: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);        /* the site's h3 */
  --text-lead: clamp(1.06rem, 1rem + .3vw, 1.2rem);
  --text-price: clamp(2rem, 1.4rem + 1.6vw, 2.9rem);
  --text-tiny: 10px;       /* a badge on the phone's tab bar */
  --text-tag: 11.5px;      /* counts, small tags */
  --text-meta: 12px;       /* the signed-in app's meta line */
  --text-ui: 13px;         /* the signed-in app's controls and secondary text */
  --text-title-sm: 15.5px;
  --text-h3: 18px;
  --text-big: 30px;        /* a balance */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heading: 650;
  --weight-bold: 700;
  --weight-book: 450;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.5;
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;

  /* corner radius */
  --radius-2xs: 3px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-full: 999px;
  --radius-3xs: 2px;
  --radius-3xl: 16px;     /* a bottom sheet's top corners */

  /* ------------------------------------------------------------ 2. semantic */
  --ink: var(--gray-900);            /* main text, primary buttons */
  --ink-hover: var(--gray-850);
  --ink-2: var(--gray-700);          /* secondary text */
  --muted: var(--gray-600);          /* hints, meta */
  --faint: var(--gray-400);          /* separators, dashed "couldn't check" borders */
  --on-ink: var(--gray-0);           /* text on an --ink background */
  --link-hover: var(--brand-600);
  --brand: var(--brand-600);          /* primary buttons, the active tab, the current step */
  --brand-hover: var(--brand-700);
  --on-brand: var(--gray-0);
  --brand-soft: var(--brand-50);      /* the active menu item's background, focus rings */
  --brand-line: var(--brand-100);
  --line: var(--gray-250);           /* card borders */
  --line-2: var(--gray-150);         /* rows inside a card */
  --control: var(--gray-300);        /* input and button borders */
  --hover: var(--gray-100);
  --row-hover: var(--gray-25);
  --chip: var(--gray-125);
  --surface: var(--gray-0);          /* cards, header */
  --page: var(--gray-50);            /* page background */
  --panel: var(--gray-75);           /* a quiet box inside a card */
  --panel-line: var(--gray-175);
  --shade: var(--gray-200);          /* segmented control track */
  --screen: var(--gray-950);         /* behind videos and the live browser */
  --dot-off: var(--gray-500);
  --stripes: repeating-linear-gradient(135deg, var(--stripe-a) 0 8px, var(--stripe-b) 8px 16px);

  /* the four result states; nothing else is colored */
  --pass: var(--green-700);
  --pass-bg: var(--green-50);
  --pass-bar: var(--green-500);
  --pass-glow: color-mix(in oklch, var(--green-700) 50%, transparent);
  --pass-glow-0: color-mix(in oklch, var(--green-700) 0%, transparent);
  --bad: var(--red-600);
  --bad-bg: var(--red-50);
  --bad-row: var(--red-25);
  --bad-line: var(--red-200);
  --bad-bar: var(--red-500);
  --bad-ink: var(--red-700);
  --amber: var(--amber-700);
  --amber-bg: var(--amber-50);
  --amber-line: var(--amber-200);
  --amber-bar: var(--amber-400);
  --amber-mark: var(--amber-450);
  --unsure: var(--gray-650);
  --unsure-bar: var(--gray-350);

  /* the marked proof (public site, sign-in pages, emails): a test is a sentence, and its result is a mark on it */
  --paper: var(--forest-25);          /* the site's page */
  --sheet: var(--gray-0);             /* inputs and quiet bands on paper */
  --site-ink: var(--forest-950);      /* text, primary buttons, heavy rules, the footer */
  --site-ink-2: var(--forest-600);    /* body text */
  --site-muted: var(--forest-500);    /* small print */
  --site-rule: var(--forest-200);     /* row separators */
  --site-rule-soft: var(--forest-100);
  --site-chip: var(--forest-50);      /* inline code on paper */
  --mark: var(--brand-100);           /* the highlighter: passed (the logo's back card) */
  --mark-deep: var(--brand-400);      /* link underlines, list dashes */
  --pen: var(--pen-600);              /* the correction pen: broken, and nothing else */
  --pen-soft: var(--pen-50);
  --retry-line: var(--amber-350);     /* wavy underline: passed on 2nd try */
  --pencil-ink: var(--forest-450);    /* pencil when it is text: readable on paper */
  --pencil: var(--forest-400);        /* couldn't check (dashed), not run */
  --bottle: var(--forest-800);        /* the dark field: video band, sign-in panel */
  --bottle-2: var(--forest-700);
  --on-bottle: var(--forest-on);
  --on-bottle-2: var(--forest-on-2);
  --site-foot-ink: var(--forest-on-3);
  --site-foot-line: var(--forest-900);
  --site-code-ink: var(--forest-code);
  --site-code-muted: var(--forest-code-2);
  --site-screen: var(--forest-975);   /* behind the videos */

  --shadow-hover: 0 4px 16px rgba(20, 24, 29, .08);
  --focus-ring: 0 0 0 3px var(--brand-line);
  --focus-ring-bad: 0 0 0 3px var(--bad-bg);

  --sans: "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --display: "Besley", "Rockwell", Georgia, serif;                      /* the site's headings and test sentences */
  --site-sans: "Hanken Grotesk", "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --app-sans: "Onest", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;   /* the signed-in app: one family */

  /* ------------------------------------------------------------ 3. component */
  --control-sm: 32px;   /* small buttons, segmented items */
  --control-md: 38px;   /* buttons */
  --control-input: 40px;
  --control-lg: 42px;
  --control-title: 44px;
  --control-xl: 52px;   /* the first-time address field */
  --pill-height: 24px;
  --pill-height-lg: 28px;
  --header-height: 56px;
  --page-gutter: var(--space-6);
  --page-gutter-phone: var(--space-4);
  --page-max: 1180px;   /* an app page's width; wider screens center it */
  /* the top bar and banners line up with the centered page: its gutter, plus half of what is left over */
  --page-inline: max(var(--space-8), calc((100% - var(--page-max)) / 2 + var(--space-8)));
  --toast-width: 360px;  /* a finished test popping up during a run */
  --toast-shot: 72px;
  --pop-width: 420px;    /* a small panel a button opens (the next plan, side by side) */
  --toast-shadow: 0 12px 32px rgba(20, 24, 29, .18);
  --layer-toast: 50;     /* above the page and its menus */
  --modal-width: 1100px; /* a replay over the run report */
  --ask-width: 520px; /* a question before an action (ui.ask) */
  --backdrop: rgba(20, 24, 29, .45);
  --stat-min: 220px;     /* a number card on Usage & credits */
  --ledger-when: 150px;  /* the usage log's columns */
  --ledger-num: 90px;
  --ledger-tokens: 170px;
  --ledger-credits: 80px;
  --ledger-model: 170px;  /* one model's cost in the admin */
  --ledger-columns: var(--ledger-when) 1fr var(--ledger-num) var(--ledger-credits);  /* set per table */
  --ledger-kind: 160px;
  --ledger-count: 60px;

  /* public site (hosted app: everyrole/saas/static/site.css): one sheet, a text column and a margin column */
  --site-h2: clamp(28px, 3.8vw, 46px);            /* the first steps after sign-up (saas.css) */
  --site-display-sm: clamp(34px, 5vw, 56px);
  --site-width: 1240px;
  --site-width-text: 70ch;
  --site-width-lead: 60ch;
  --site-width-form: 640px;
  --site-width-auth: 420px;
  --site-gutter: clamp(16px, 4vw, 44px);
  --site-col-gap: clamp(28px, 5vw, 72px);
  --site-margin-col: clamp(250px, 27%, 330px);   /* the margin: notes, glosses, the contents list */
  --site-section: clamp(64px, 8.5vw, 128px);     /* space between sections */
  --site-section-tight: clamp(40px, 5vw, 76px);
  --site-hero-top: clamp(28px, 4.5vw, 60px);
  --site-hero-gap: clamp(30px, 4vw, 52px);
  --site-row: clamp(26px, 3.6vw, 48px);          /* a feature row's padding */
  --site-nav-height: 68px;
  --site-nav-height-phone: 60px;
  --site-control: 48px;
  --site-control-xl: 60px;                        /* the address field and its button */
  --site-icon: 44px;                              /* the menu button */
  --site-menu-width: 200px;
  --site-toc-top: 92px;
  --site-plan-min: 90px;
  --site-term-min: 110px;
  --site-rule-heavy: 1.5px;
  --site-mark-size: 100% 58%;                     /* how much of a line the highlighter covers */
  --site-mark-size-0: 0% 58%;
  --site-mark-at: 0 78%;
  --site-layer-nav: 40;
  --site-ease: cubic-bezier(.16, 1, .3, 1);
  --site-swipe: .7s;                              /* one highlighter swipe */
  --site-step: .38s;                              /* between two sentences of a run */
  --site-reveal-shift: 14px;
  --site-glass: color-mix(in srgb, var(--forest-25) 92%, transparent);   /* the header over the page */
  --site-blur: 10px;
  --site-shadow-menu: 0 2px 6px rgba(13, 31, 23, .12), 0 18px 36px -14px rgba(13, 31, 23, .35);
  --site-shadow-film: 0 30px 60px -30px rgba(0, 0, 0, .6);
  --site-shadow-page: 0 1px 2px rgba(13, 31, 23, .06), 0 24px 48px -28px rgba(13, 31, 23, .4);
  --site-focus: 0 0 0 3px var(--mark);
  /* the logo as a loader (ui.loader): its three cards stack, then the check draws */
  --logo-back: var(--brand-100);
  --logo-mid: var(--brand-400);
  --logo-front: var(--brand-600);
  --logo-check: var(--on-brand);
  --loader-sm: 20px;
  --loader-md: 40px;
  --loader-lg: 72px;
  --loader-cycle: 1.6s;
  --loader-delay: 450ms;   /* a page that opens faster than this never shows the loader */
  --layer-loader: 60;      /* above toasts */
  --page-veil: color-mix(in oklch, var(--page) 70%, transparent);
  --page-fade: 160ms;      /* the page loader fading in and out; the questions after sign-up sliding in */

  /* the signed-in app (static/ui.css): a rail, an app header with tabs, pages of cards */
  --rail-w: 244px;
  --topbar-h: 50px;          /* the narrow screens' top bar (the rail folds away) */
  --pbar-h: 52px;            /* the phone's top bar */
  --tabbar-h: 64px;          /* the phone's bottom tab bar */
  --ui-page-max: 1180px;
  --shadow-pop: 0 10px 30px -8px var(--black-a22), 0 2px 6px var(--black-a8);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --tag-ink: var(--ink-3);   /* a door tag's own colors: each state sets them (ui.css .tag.pass, .tag.broken...) */
  --tag-bg: transparent;
  --tag-line: var(--line-strong);

  /* group site: the public site's own sizes (saas/static/site.css); colors come from the .app layer */
  --site-max: 1200px;
  --site-gutter: clamp(16px, 4vw, 40px);
  --site-section: clamp(64px, 9vw, 120px);
  --site-section-sm: 48px;
  --site-gap: clamp(24px, 4vw, 56px);
  --site-gap-lg: clamp(28px, 5vw, 72px);
  --site-hero-pad: clamp(32px, 4vw, 56px);
  --site-head-h: 64px;
  --site-logo: 28px;
  --site-app-icon: 36px;
  --site-menu-w: 200px;
  --site-field-xl: 50px;                         /* the site's address field and its button */
  --site-auth-w: 420px;                           /* the sign-in form */
  --site-form-w: 560px;
  --site-board-row: 50px;
  --site-board-k: 196px;
  --site-rack-tag: 260px;
  --site-cost-w: 150px;
  --site-toc-w: 240px;
  --site-tagdef-w: 170px;
  --site-look-h: 220px;
  --site-banner-w: 440px;
  --site-shadow: 0 24px 48px -24px var(--black-a25), 0 2px 6px var(--black-a8);
  --text-site-h1: clamp(38px, 1.1rem + 2.5vw, 56px);
  --text-site-page: clamp(36px, 1.2rem + 2.8vw, 56px);
  --text-site-h2: clamp(30px, 1.1rem + 2vw, 46px);
  --text-site-doc: clamp(26px, 1rem + 1.2vw, 34px);
  --text-site-lead: clamp(17px, .9rem + .35vw, 20px);
  /* group site: the emails' colors (emails.palette reads them as plain colors: mail apps don't know variables).
     The same roles as the app's .app layer, plus the dark-mode colors mail apps use under prefers-color-scheme. */
  --mail-ground: var(--linen-100);
  --mail-surface: var(--white);
  --mail-surface-2: var(--linen-50);
  --mail-line: var(--linen-200);
  --mail-ink: var(--linen-950);
  --mail-ink-2: var(--linen-800);
  --mail-ink-3: var(--linen-700);
  --mail-shell: var(--bottle-900);
  --mail-shell-ink: var(--forest-on);
  --mail-shell-ink-2: var(--bottle-200);
  --mail-mint: var(--brand-100);
  --mail-brand: var(--brand-600);
  --mail-on-shell: var(--white);
  --mail-pass: var(--leaf-700);
  --mail-pass-bg: var(--leaf-50);
  --mail-pass-line: var(--leaf-200);
  --mail-fail: var(--coral-600);
  --mail-fail-ink: var(--coral-700);
  --mail-fail-dot: var(--coral-200);
  --mail-deny: var(--linen-750);
  --mail-deny-bg: var(--linen-150);
  --mail-deny-line: var(--linen-250);
  --mail-upd: var(--olive-800);            /* Needs updating: the test, not the app */
  --mail-upd-bg: var(--olive-50);
  --mail-upd-line: var(--olive-200);
  --mail-run: var(--ochre-750);            /* Couldn't check */
  --mail-run-bg: var(--ochre-50);
  --mail-run-line: var(--ochre-200);
  --mail-dark-ground: #0b1712;
  --mail-dark-sheet: #12221b;
  --mail-dark-card: #17291f;
  --mail-dark-line: #2a3f34;
  --mail-dark-ink: #e8f1ec;
  --mail-dark-ink-2: #c3d2ca;
  --mail-dark-ink-3: #a9bbb1;
  --mail-dark-pass-bg: #1d3a2c;
  --mail-dark-pass-line: #2f6a50;
  --mail-dark-upd-bg: #3a3714;
  --mail-dark-upd-ink: #e8e2a6;
  --mail-dark-upd-line: #6b6420;
  --mail-dark-run-bg: #3a2c12;
  --mail-dark-run-ink: #f0d39a;
  --mail-dark-run-line: #6e5122;
  --mail-dark-fail-ink: #f3a595;
}

/* ------------------------------------------------------------ 2. semantic (the signed-in app) */
.app {
  --ground: var(--linen-100);           /* the page */
  --surface: var(--white);              /* cards */
  --surface-2: var(--linen-50);         /* a quiet band inside a card, table heads */
  --row-hover: var(--linen-25);
  --line: var(--linen-200);
  --line-strong: var(--linen-300);      /* control borders */
  --ink: var(--linen-950);
  --ink-2: var(--linen-800);
  --ink-3: var(--linen-700);            /* meta; 4.5:1 on --ground */
  --placeholder: var(--linen-550);
  --shell: var(--bottle-900);           /* the rail, the app header, primary buttons */
  --shell-2: var(--bottle-800);
  --shell-3: var(--bottle-700);
  --shell-line: var(--mint-a12);
  --shell-ink: var(--forest-on);
  --shell-ink-2: var(--bottle-200);
  --mint: var(--brand-100);
  --mint-2: var(--brand-75);
  --brand: var(--brand-600);            /* links */
  --pass: var(--leaf-700);              /* Passed */
  --pass-bg: var(--leaf-50);
  --pass-line: var(--leaf-200);
  --good-ink: var(--leaf-800);
  --fail: var(--coral-600);             /* Broken */
  --fail-ink: var(--coral-700);
  --fail-bg: var(--coral-50);
  --fail-line: var(--coral-200);
  --fail-row: var(--coral-25);
  --fail-row-hover: var(--coral-75);
  --run: var(--ochre-700);              /* Couldn't check, warnings */
  --run-bg: var(--ochre-50);
  --run-line: var(--ochre-200);
  --warn-ink: var(--ochre-800);
  --warn-row: var(--ochre-25);
  --upd: var(--olive-800);              /* Needs updating: the test, not the app */
  --upd-bg: var(--olive-50);
  --upd-line: var(--olive-200);
  --upd-solid: var(--olive-600);
  --upd-row: var(--olive-25);
  --none: var(--linen-500);             /* Not run */
  --deny: var(--linen-750);
  --deny-bg: var(--linen-150);
  --leg: var(--blue-600);               /* the active leg: the current step, the selected item, focus */
  --leg-bg: var(--blue-50);
  --leg-hover: var(--blue-100);
  --leg-line: var(--blue-200);
  --leg-line-2: var(--blue-250);
  --leg-on-dark: var(--blue-300);
  --code-bg: var(--bottle-975);         /* the deploy hook snippet */
  --code-ink: var(--mint-code);
  --screen-ink: var(--night-950);       /* behind screenshots and replays */
  --scrim: var(--ink-a32);              /* behind a drawer or the replay */
  --scrim-strong: var(--ink-a40);
  --play-bg: var(--bottle-a86);         /* the play button over a screenshot */
  --page-veil: color-mix(in oklch, var(--ground) 70%, transparent);   /* behind the page loader */
}