@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geist-mono.woff2") format("woff2");
  font-weight: 300 700; font-display: swap; font-style: normal;
}

/* Tells the browser its own chrome is dark: the number spinners, the select
   popup, the caret, the checkbox and the autofill wash are all drawn by the
   UA, and without this they arrive in light mode on a near-black page. */
:root {
  color-scheme: dark;

  --bg-0: #0A0912;
  --bg-1: #100E1B;
  /* The whole document's ramp of light, in one property because the five stops
     mean nothing apart: it is one shape, and a stop moved without the ones
     either side of it is a band. Held here rather than in app.css so the palette
     is still the only place a colour is written down. */
  --page-ramp: linear-gradient(180deg,
    #161129 0%, #0A0912 16%, #100D1F 44%, #08070F 70%, #0E0B1A 100%);
  --surface-1: #171429;
  --surface-2: #1F1B36;
  /* The frosted panel, and the house's one glassmorphism surface: the card both
     staged forms sit inside. Translucent on purpose, because it is read
     THROUGH - it pairs with a backdrop-filter, and an opaque --surface-1 under
     that blur would be a plain card with a wasted filter on it. */
  --surface-glass: rgba(25, 21, 45, .76);
  /* The plate the home page's hero object is drawn on. One property for the
     same reason as --page-ramp: two stops that only mean anything together. */
  --plate-ledger: linear-gradient(180deg, rgba(33, 29, 58, .92), rgba(19, 16, 34, .92));
  --border: rgba(255, 255, 255, 0.06);
  --border-str: rgba(255, 255, 255, 0.10);
  /* The two above are seams between surfaces, and 1.1:1 is right for a seam.
     This one is the whole of what says a control is a control - it is the
     only boundary `.btn-add`, `.btn-back` and `a.opt` have, and each of the
     three is filled with the page's own background colour. 3.4:1 on --bg-0,
     which is the 3:1 a boundary needs rather than the 4.5:1 text needs. */
  --border-int: rgba(255, 255, 255, 0.38);
  /* And this one is the boundary of a control that is FILLED and typed into:
     `.field input` and `.field select`, both sunk into --bg-1 under the inset
     shadow. Brighter than all three above at 5.6:1 on --bg-1, because a box
     somebody has to find and type in says so with its edge and nothing else.
     Opaque rather than a white at an alpha: it is a violet grey of its own, and
     it is NOT --text-3 (#948CAE), which is close and is not the same value. */
  --border-fld: #8F86AC;

  --text-1: #ECE9F5;
  --text-2: #A9A3BE;
  --text-3: #948CAE;

  /* Violet in the surfaces, a lighter blue violet as the one accent. The look
     everyone recognises as machine made is the saturated indigo to blue
     gradient, not the hue, so there is no gradient and the accent stays under a
     twentieth of the pixels. Every translucent use goes through --accent-rgb:
     the colour was pasted into eighteen rules before, and changing it meant
     finding all eighteen. */
  --accent: #9B8CFF;
  --accent-rgb: 155 140 255;
  --accent-lift: #C0B4FF;
  --accent-ink: #150C33;
  --data-blue: #63A0FF;

  --ok: #3DDC84;
  --warn: #F5B942;
  --danger: #FF5C5C;
  --idle: #6B7A8F;
  /* The two that are also glowed behind a status pip, through the same channel
     form --accent-rgb uses. Only the two: --ok and --danger are never given an
     alpha anywhere, and a token nothing reads is a token to keep in step for
     nothing. */
  --warn-rgb: 245 185 66;
  --idle-rgb: 107 122 143;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --shadow-raised:
    0 1px 2px rgba(0, 0, 0, .40),
    0 10px 28px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  --shadow-inset:
    inset 0 1px 2px rgba(0, 0, 0, .50),
    inset 0 -1px 0 rgba(255, 255, 255, .03);

  /* Self hosted, so the network tab still shows one origin. Bricolage Grotesque
     is a variable grotesk with real quirk in its wide forms: it is the thing
     that stops the page reading as a default stack. SIL OFL, all three. */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;

  --step-1: 4px;
  --step-2: 8px;
  --step-3: 12px;
  --step-4: 16px;
  --step-5: 20px;
  --step-6: 24px;
  --step-8: 32px;
  --step-10: 40px;
  --step-12: 48px;
  --step-16: 64px;
  --step-20: 80px;
  --step-24: 104px;
}

/* One hue per service, so colour says which desk you are standing at instead of
   decorating the page. Robux keeps the house periwinkle because it is the core
   product; gifting takes the one warm tone on the site, which is the only warm
   thing we do; swapping takes a mint, two chains meeting rather than a value
   going up. Rebinding --accent is the whole change: every rule already routes
   through --accent-rgb, so eighteen of them recolour without being touched.
   Applies to a body class and to a tile on the index, which is how the home
   page shows all three at once.
   --accent-ink is not overridden: it is the dark ink that sits ON an accent
   button, and it has to stay dark against all three. */
.svc-gift, [data-svc="gift"] {
  --accent: #FF8FB1; --accent-rgb: 255 143 177; --accent-lift: #FFB3C9;
}
.svc-swap, [data-svc="swap"] {
  --accent: #5FE3C0; --accent-rgb: 95 227 192; --accent-lift: #8CEDD3;
}