/* The deployment's two brand colours, as the palette every accent on the site is drawn from.

   The brand used to reach only a handful of hand-written rules — the primary button and the mark
   behind the wordmark — while everything else was written as Tailwind's own `indigo` and `sky`
   utilities. A reseller who set their colours got two of them applied and several hundred that
   stayed the colours this product shipped with.

   So the two palettes are redefined here as ramps off the brand instead. Each step is stored as
   space-separated RGB channels, because Tailwind composes them as `rgb(var(--b1-600) / <alpha>)` and
   an opacity modifier like `bg-brand-500/15` needs the channels, not a finished colour.

   The values below are exactly Tailwind's indigo and sky, so an install nobody has rebranded looks
   the way it always did — and so the page is correctly coloured before any script has run. js/core.js
   (the app) and site.js (the public pages) overwrite them once the brand is known.

   --b1 is the primary, anchored at step 600; --b2 the secondary, anchored at 500. Those are the steps
   the product actually leans on: `from-indigo-600 to-sky-500` is the gradient behind every mark. */
:root {
  --b1-50: 238 242 255;
  --b1-100: 224 231 255;
  --b1-200: 199 210 254;
  --b1-300: 165 180 252;
  --b1-400: 129 140 248;
  --b1-500: 99 102 241;
  --b1-600: 79 70 229;
  --b1-700: 67 56 202;
  --b1-800: 55 48 163;
  --b1-900: 49 46 129;
  --b1-950: 30 27 75;

  --b2-50: 240 249 255;
  --b2-100: 224 242 254;
  --b2-200: 186 230 253;
  --b2-300: 125 211 252;
  --b2-400: 56 189 248;
  --b2-500: 14 165 233;
  --b2-600: 2 132 199;
  --b2-700: 3 105 161;
  --b2-800: 7 89 133;
  --b2-900: 12 74 110;
  --b2-950: 8 47 73;

  /* The finished colours, for the handful of places that want one directly rather than a utility
     class — inline gradients on the brand marks, and the buttons in site.css. */
  --brand-1: #4f46e5;
  --brand-2: #0ea5e9;
}