/* HOUSE RULES: THE TOKENS, the same in every Wildcard app. Source: wildcardsvc/house-rules (web/tokens.css). Apps carry a copy
   (public/tokens.css) made by `house-rules sync`: never edit the copy. The names and values are wildcardsvc.com's; the type scale is
   the Wildcard Portal's. Load it before the app's own stylesheet. Components use these tokens only, never a hex value.

   An app may define only these on :root (in its own stylesheet, after this one): its accent (--accent, --accent-hover, --on-accent,
   --focus) and the nine --sb-* menu colours. Anything else it needs gets a name that says what it is for (--cat-1), not one of these. */
:root {
  /* brand */
  --purple: #550088;
  --purple-hover: #6e269a;
  --purple-bright: #7c2cb0;
  --plum: #33004f;
  --plum-deep: #26003b;
  --lilac: #e8d6f5;
  --blue-gray: #222233;

  /* surfaces: the page (--ink on the portal and apps, --onyx on marketing pages), cards (--slate), the quiet greys */
  --slate: #1a1a28;
  --ink: #121219;
  --onyx: #0b0b10;
  --steel: #4a4a5e;
  --fog: #8a8a9e;

  /* text on dark */
  --text: #f0eef5;
  --text-2: #ababc0;

  /* hairlines and outlines */
  --line: rgba(240, 238, 245, 0.09);
  --line-strong: rgba(240, 238, 245, 0.16);

  /* status. --marigold is for incident pages, the dev ribbon and the "View as" bar and nowhere else */
  --marigold: #ffb400;
  --danger: #9b2335; /* a destructive button's fill */
  --danger-hover: #b52b40;
  --danger-text: #ff8f8f; /* an error or a destructive word on a dark surface */
  --ok: #7fd1a0;
  --warn: #e8b84a;

  /* the app's own colour: its buttons, links and focus. Defaults to the portal's; an app sets its own */
  --accent: var(--purple-bright);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, white);
  --on-accent: #fff;
  --focus: var(--accent);

  /* type: two families, two weights (400 and --fw-bold), and the portal's scale */
  --font-display: "Red Hat Display", system-ui, sans-serif;
  --font-body: "Red Hat Text", system-ui, sans-serif;
  --fw-bold: 600;
  --fs-label: .72rem; /* caps labels */
  --fs-small: .8rem; /* help text, timestamps, the footer */
  --fs-body: .92rem; /* body, menu items, buttons, fields, card titles */
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-xxl: 2rem;
  --fs-title: clamp(1.8rem, 4vw, 2.5rem); /* the page's one h1 */

  /* shape: one scale, so a radius is never a bare number */
  --radius-xs: 8px;
  --radius-sm: 10px; /* fields and small buttons */
  --radius-md: 12px; /* buttons */
  --radius: 20px; /* cards */
  --radius-lg: 22px; /* the sign-in card and card boxes */
  --wrap: 1200px; /* marketing pages; the portal and apps sit beside the menu */
}