/* 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;

  /* tints and shadows that must flip with the theme: a ghost button's wash on hover and when pressed, the quiet destructive button's text, and the
     shadow under cards and dialogs. Components use these, never a literal, so a page that opts into the light theme (below) gets its own */
  --wash: rgba(240, 238, 245, .04);
  --wash-hover: rgba(240, 238, 245, .09);
  --wash-on: rgba(240, 238, 245, .12);
  --danger-quiet: #f3b3b3;
  --shade: rgba(0, 0, 0, .9);
  --shade-deep: rgba(0, 0, 0, .85);

  /* 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: "Lexend", system-ui, sans-serif;
  --font-body: "Lexend", 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 */
}

/* THE LIGHT THEME, opt-in. Every app is dark. A page that sets data-theme="light" on <html> (the public website does, from the visitor's choice or the
   system's) gets these surface, text and tint values instead; a page that never sets it, and a page that sets "dark", is unchanged. Brand purples, the
   marigold and the accent stay as they are. Text on every surface here is at least 4.5:1 on all three surfaces (--fog 6.0:1 on --ink). */
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #f4f2f7;
  --onyx: #f4f2f7;
  --slate: #ffffff;
  --blue-gray: #eae4f1;
  --steel: #8a8498;
  --fog: #5f5a6b;
  --text: #17151c;
  --text-2: #4a4656;
  --lilac: #550088; /* kickers, links and check marks: the dark theme's pale lilac would vanish here */
  --line: rgba(23, 21, 28, .09);
  --line-strong: #ddd7e5;
  --danger-text: #b3261e;
  --ok: #196b3d;
  --warn: #8a5a00;
  --wash: rgba(23, 21, 28, .04);
  --wash-hover: rgba(85, 0, 136, .08);
  --wash-on: rgba(85, 0, 136, .12);
  --danger-quiet: #b3261e;
  --shade: rgba(23, 21, 28, .18);
  --shade-deep: rgba(23, 21, 28, .22);
}