/* The design language of the whole site, in one place.
 *
 * Both halves load this: the public pages (/spiritway, /join, /terms,
 * /signup) and the signed-in product (ui.css). Before it existed each page
 * carried its own copy of the palette and invented its own radii and type
 * sizes as it went — the product ended up with eleven corner radii and
 * twenty-five font sizes, and its buttons were a different shape and colour
 * from the ones on the page that sells the thing.
 *
 * Rules of the house:
 *   - a colour that appears twice belongs here, named for its JOB, not its
 *     hue ("the line under a row", not "light beige");
 *   - sizes come from the scales below. If something needs a size that is
 *     not on a scale, the scale is wrong, not the exception.
 */
:root {
  /* ------------------------------------------------------------ brand */
  --navy-900: #0F1C2E;   /* the deepest ink: hero panels */
  --navy: #16283F;       /* headings, links, the confirming button */
  --navy-750: #1D3149;   /* the navy one step up, for gradients */
  --amber: #F2B705;      /* the brand accent — the action being asked for */
  --amber-hover: #DFA904;
  --amber-deep: #8C6A03; /* amber that has to sit on paper and stay legible */

  /* -------------------------------------------------------------- text */
  --ink: #232A35;        /* what you read */
  --body-text: #4A5464;  /* what you read second */
  /* Two levels of quiet, and both are legible. They used to be three —
     #7A8290 and a fainter #9AA1AB for column headings — but neither reached
     4.5:1 on paper (3.49 and 2.35), and a column heading is already marked
     as one by being small and upper-case. Being fainter as well was
     decoration bought with readability, so the two collapse into one. */
  --muted: #68707D;      /* what you read only if you look for it */
  --label: #68707D;      /* the small caps over a column */

  /* ---------------------------------------------------------- surfaces */
  --paper: #F5F3EF;      /* the page itself */
  --paper-raised: #FBFAF7; /* a strip that lifts off the page: table heads, totals */
  --surface: #FFFFFF;    /* a card */
  --hover: #F6F5F1;      /* paper under the pointer */
  --line: #E9E6DF;       /* a border you are meant to see */
  --line-soft: #F2F0EA;  /* a border that only separates rows */

  /* -------------------------------------------------------- the states */
  /* Green is settled, amber is pending, red is short or wrong. Each has a
     soft background so a chip can carry the meaning without shouting. */
  --green: #22754F;
  --green-soft: #F0F7F3;
  --green-line: #D8E9DF;
  --amber-soft: #FDF6E3;
  --amber-line: #F0E2B6;  /* the border a soft-amber panel needs */
  --red: #E5484D;        /* a field that will not accept what is in it */
  --red-deep: #B4282C;   /* red as TEXT, where it has to stay readable */
  --red-soft: #FBEBEC;
  --navy-soft: #EEF1F6;  /* a quiet navy tint: chips, hovers on navy things */
  --tint-cool: #F4F7F9;  /* a panel that is calm rather than warm */

  /* Text ON a navy panel — the footer and the hero of the public pages. Paper
     greys are unreadable there, so these are their counterparts. */
  --on-navy: #FFFFFF;
  --on-navy-soft: #AAB6C6;
  --on-navy-muted: #8B96A6;
  --on-navy-faint: #858F9C;  /* on navy, legible means LIGHTER */

  /* ------------------------------------------------------------ shape */
  /* One family of corners, getting rounder as the thing gets bigger: a cell
     inside a control is barely rounded, a dialog is very. Buttons left this
     scale entirely and became pills — the chips, the switch and the language
     control were already round, and a square button among them was the one
     shape in the product that belonged to no family. */
  --r-xs: 8px;           /* something small inside a control */
  --r-sm: 10px;          /* a cell, a row inside a card */
  --r-md: 12px;          /* inputs and selects */
  --r-lg: 18px;          /* cards, panels, list rows */
  --r-xl: 24px;          /* the biggest surfaces: dialogs, the menu */
  --r-pill: 999px;       /* buttons, chips, tabs, meters */
  /* The old spelling of --r-lg. The public pages (the vacancy, the sign-up)
     still use it; they move with the scale rather than pinning a number of
     their own, which is the whole point of this file. */
  --radius: var(--r-lg);

  /* ------------------------------------------------------------- type */
  /* Eight sizes. The half-pixel sizes the product grew (10.5, 11.5, 12.5,
     13.5, 14.5, 15.5, 16.5) are not a scale, they are an accident. */
  --t-xs: 12px;          /* the small caps over a column, footnotes */
  --t-sm: 13px;          /* dense tables, chips */
  --t-md: 14px;          /* secondary text, navigation */
  --t-lg: 15px;          /* body text and form fields */
  --t-xl: 17px;          /* a card's title, a lead paragraph */
  --t-2xl: 20px;         /* a section heading */
  --t-3xl: 24px;         /* the page heading */
  --t-4xl: 28px;         /* the one number a landing page is about */
  --t-5xl: 32px;         /* the page title, which is allowed to be the
                            largest thing on the page */

  /* ---------------------------------------------------------- spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 32px;

  /* ----------------------------------------------------------- depth */
  /* Cards float on the page rather than sitting in it: a wide, faint shadow
     and no border. Three steps — a hairline lift for small controls, the
     resting card, and the card under the pointer. */
  --shadow-sm: 0 1px 2px rgba(22,40,63,0.04);
  --shadow: 0 1px 2px rgba(22,40,63,0.04), 0 8px 24px rgba(22,40,63,0.06);
  --shadow-lift: 0 2px 4px rgba(22,40,63,0.05), 0 14px 34px rgba(22,40,63,0.10);

  /* --------------------------------------------------------- the page */
  /* Three widths, and a page picks one by what it holds — not by having
     invented its own container. */
  /* The menu is a card, not a wall: it floats clear of all four edges, and
     the page is inset by the rail plus this gutter. */
  --nav-w: 268px;
  --nav-gap: 12px;

  --w-page: 980px;       /* forms and lists: reading width */
  --w-wide: 1280px;      /* two columns of panels */
  --w-full: 1720px;      /* the payroll table, which is as wide as it is */
}