/**
 * The design tokens, and the only file in this repo allowed to contain a literal.
 *
 * WHY THIS EXISTS. Before this file there were three complete design systems in public/ --
 * portal.css, goodleed-ui.css and eleven atlas-*.css -- and all three ended by aliasing the
 * same generic names to different values. Navy was #0b2033 in two of them and #071d31 in the
 * third. The sidebar was 256px in one and 224px in the others. There were fourteen distinct
 * border-radius values against a spec of one. Every page loaded two of the three systems, so
 * whichever happened to load last silently won, and anything the top layer did not restate
 * fell through to whatever was underneath.
 *
 * The rule that stops that coming back is narrow and absolute: a hex value, a radius, a
 * shadow, a font stack or an easing curve appears here and nowhere else. shell.css and
 * pages.css may only say var(--something). check:styles fails the build on a literal in
 * either of them.
 *
 * The second rule is that a token is a value, never another token. The old files were full of
 * --accent:var(--gl-orange) chains, which is how two names came to mean two different colours
 * while looking like they meant one. One name, one value, no indirection.
 *
 * Values are the atlas palette from the visual atlas README, which portal.css had already
 * converged on for colour. What differed was structure, and the atlas wins on all of it.
 */
:root{
  /* Navigation only. The atlas reserves navy for the persistent rail and nothing else. */
  --navy:#0b2033;
  --navy-strong:#071827;

  /* Canvas is the page. Group is the warm cream, used sparingly to bundle related rows --
     a KPI band, a selected row, a totals block. It is not a second page background. */
  --canvas:#fcfaf6;
  --surface:#ffffff;
  --group:#f3eee5;
  --group-strong:#ece5d8;

  /* --muted-2 was #77828e, which is 3.9:1 on surface and 3.5:1 on group. Both under the 4.5:1
     WCAG asks for body text, and it is used for exactly the small print that needs it most:
     field hints, timestamps, the second line of a row. Darkened along the same hue to the
     first value that clears it on group, which is the harder of the two. check:contrast
     measures it, so do not lighten it back without running that. */
  --ink:#14212e;
  --ink-2:#33424f;
  --muted:#55616f;
  --muted-2:#5e6a77;

  /* Thin and warm. --border is the default rule; --border-strong is for a control someone has
     to find by its edge; --border-soft is for a divider inside a surface that already has one. */
  --border:#e4ddd1;
  --border-strong:#d8cebd;
  --border-soft:#ece8e1;

  /* Action orange, and it is a budget rather than a palette: primary actions, the active
     selection edge, key links, and deliberate attention. An ordinary state is grey. If a
     third thing on a screen is orange, one of them is wrong.

     ONE VALUE FILLS. --orange is the action orange the atlas README names, and it is what
     every primary button, active selection edge, progress bar and filled badge is, on both
     surfaces, without exception.

     --orange-text is darker, and it is the value for orange TYPE and icons on a light
     background: the bright one is not legible at 13px on cream. It is NEVER a fill.

     WHY THE SECOND NAME. These were --accent and --accent-text before the consolidation. The
     text variant leaked into button fills during it, so "New estimate" on Today and "Add a
     customer" on Customers were two different oranges on the same product. Naming it for
     what it is -- text -- is what stops that happening again; "action" read like a fill. */
  --orange:#e34a0a;
  --orange-soft:#fdece4;
  --orange-text:#c2410c;
  /* A filled button darkens on the way down. Pressed is the only value here that is not
     also used somewhere else, which is why hover reads var(--orange-text): the same hex
     under two names is the aliasing this file exists to prevent. */
  --orange-press:#a5350a;
  --on-orange:#ffffff;

  /* Text on the navy rail. Nothing else in the palette is legible there, and leaving these as
     literals is how the sidebar ended up with four different greys across the three systems. */
  --on-navy:#b9c7d4;
  --on-navy-quiet:#7d90a3;

  /* Green means success, paid, connected, active or completed. It never means "on brand".
     Amber is attention, red is failure, steel is an informational state that is none of those.
     The -strong pair of each is the text colour on its own soft background: the mid value is a
     fill and a dot, and putting words in it lands around 3:1. check:contrast measures both. */
  --green:#0f7a4a;
  --green-soft:#e3f3ea;
  --green-strong:#0e5c39;
  --amber:#b45309;
  --amber-soft:#fdf1e0;
  --amber-strong:#7c4a06;
  --red:#c0392b;
  --red-soft:#fdeceb;
  --red-strong:#8e2b20;
  --steel:#2f5d7c;
  --steel-soft:#e8f0f5;

  /* The social composer's preview cards, and nowhere else. Each card shows a post the way
     its destination will, and a Facebook post is not a GoodLeed-orange thing: these are the
     platforms' own colours, requested for exactly this surface (John, 2026-08-10). Using one
     outside a .sp-pv preview or its platform badge is a bug. The glyph-on-brand pairs are
     declared in check-contrast.mjs. */
  --brand-facebook:#1877f2;
  --brand-instagram:#e1306c;
  --brand-x:#0f1419;
  --brand-linkedin:#0a66c2;
  --brand-google:#1967d2;
  /* What a feed looks like on the platforms themselves: the reader's system face, not ours. */
  --font-platform:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* The display face fell back to Georgia, a serif, on twenty-one rules. Nothing in the atlas
     is a serif, so every user who did not get the webfont saw a different product. The
     fallback is now the body face, which is what the atlas actually looks like. */
  --display:'Bricolage Grotesque','Inter Tight',system-ui,sans-serif;
  --body:'Inter Tight',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --sidebar:224px;

  /* The atlas says 12px. --radius-sm exists because the nav items and pills in 08 and 11 are
     visibly tighter than a card; --radius-pill and --radius-round exist so that a status pill
     and an avatar are not literals sitting in shell.css. There is no fourth size. */
  --radius-sm:6px;
  --radius:12px;
  --radius-pill:999px;
  --radius-round:50%;

  --ease:cubic-bezier(.22,.8,.24,1);

  /* One shadow, for the one thing that floats: the record drawer and the modal scrim over it.
     There were ninety box-shadow declarations across the old files, twenty-seven of them a
     double drop shadow on every card, against an atlas rule of low to no shadow. A card is
     separated by a thin warm border, not by lift. */
  --shadow-overlay:0 18px 54px rgba(7,24,39,.2);
}