/* The backoffice's design tokens: CSS custom properties only, no selector but :root, no rule
   that draws anything. assets/app.css (the server pages' components) reads them, and they are
   meant to be read the same way by any other front end of the product (the staff console's
   theme preset), so both look like one product. The installer's family
   (public/installer/installer.css) and the public site's (deploy/edge/front/assets/site.css).

   Two layers, as a theme preset has them:
     1. Primitives   --p-*      raw values with a name, the same in both themes
     2. Roles        the rest   what a component asks for; light here, dark in the media query

   Roles, by group:
     surface   --bg (the page), --surface (a card), --surface-2 (a table head, a well),
               --surface-3 (a chip on a well)
     text      --ink, --ink-2 (secondary; AA on --bg, --surface and --surface-2)
     line      --line (hairlines), --line-strong (a control's border; 3:1 on its surface)
     action    --primary, --primary-hover, --primary-ink (text on it);
               --danger, --danger-hover, --danger-ink
     accent    --accent (marks, the halo of a focused control; not text), --accent-ink (links and
               the focus outline; AA on every surface)
     band      --band, --band-2 (the gradient's end), --band-ink: the brand's band on the
               player and sign-in pages; --gold the hairline under it
     status    --ok, --bad, --wait, --soon, --play, --secret: the text colour, each with its
               -bg (the fill it is AA on) and, for the first four, its -line (the border)
     rail      --rail-*: the staff navigation, a night palette of its own in both themes
     type      --serif (page titles), --sans, --mono; --fs-xs to --fs-3xl
     space     --sp-1 (4px) to --sp-10 (40px)
     radius    --r-sm, --r-md, --r-lg, --r-pill
     shadow    --shadow-1 (resting), --shadow-2 (a card), --shadow-3 (a raised sheet)
     focus     --focus (a focused control's halo, as a box-shadow, around its --accent-ink
               border), --control-h (a control's height)
*/

:root {
  color-scheme: light dark;

  /* ---- 1. Primitives ---- */
  --p-paper: #F6F3EC;
  --p-cream: #FBF8F1;
  --p-white: #FFFFFF;
  --p-slate-900: #1F2937;
  --p-slate-600: #4B5563;
  --p-night: #0B1220;
  --p-night-800: #131C2C;
  --p-night-700: #182336;
  --p-felt: #0F5132;
  --p-felt-deep: #0A3622;
  --p-felt-hover: #0A3F27;
  --p-felt-bright: #1B7A4D;
  --p-felt-bright-hover: #166B43;
  --p-sky: #0EA5E9;
  --p-sky-ink: #03628F;
  --p-sky-light: #5CC8F5;
  --p-gold: #E3B45C;
  --p-red: #9B1C28;
  --p-red-deep: #7F1520;

  /* ---- 2. Roles, light ---- */
  --bg: var(--p-paper);
  --surface: var(--p-white);
  --surface-2: #F2EEE5;
  --surface-3: #E9E4D8;
  --ink: var(--p-slate-900);
  --ink-2: var(--p-slate-600);
  --line: #DFD9CC;
  --line-strong: #8A8474;

  --primary: var(--p-felt);
  --primary-hover: var(--p-felt-hover);
  --primary-ink: var(--p-cream);
  --danger: var(--p-red);
  --danger-hover: var(--p-red-deep);
  --danger-ink: var(--p-white);

  --accent: var(--p-sky);
  --accent-ink: var(--p-sky-ink);

  --band: var(--p-felt);
  --band-2: var(--p-felt-deep);
  --band-ink: #F6F2E8;
  --gold: var(--p-gold);

  --ok: #0C4429;
  --ok-bg: #D9EEE2;
  --ok-line: #9CCFB1;
  --bad: #9B1C28;
  --bad-bg: #FBE4E6;
  --bad-line: #E9A3AA;
  --wait: #6B4400;
  --wait-bg: #FBEAC4;
  --wait-line: #E6C67A;
  --soon: #334155;
  --soon-bg: #E3E7ED;
  --soon-line: #C5CCD6;
  --play: #1E3A8A;
  --play-bg: #DBEAFE;
  --secret: #4C1D95;
  --secret-bg: #E9E1FB;

  --rail-bg: #0E1727;
  --rail-bg-2: var(--p-night);
  --rail-ink: #EEF2F6;
  --rail-ink-2: #A9B6C8;
  --rail-mark: #9FDDFB;
  --rail-line: rgba(255, 255, 255, .09);
  --rail-hover: rgba(255, 255, 255, .06);
  --rail-active: rgba(255, 255, 255, .1);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.3rem;
  --fs-2xl: 1.85rem;
  --fs-3xl: 2.35rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-2: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 32px -18px rgba(15, 23, 42, .2);
  --shadow-3: 0 2px 4px rgba(15, 23, 42, .06), 0 28px 60px -24px rgba(15, 23, 42, .32);

  /* app.css spells this out again where it draws it: there --accent may be a brand's. */
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  --control-h: 44px;
}

/* ---- 2. Roles, dark ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--p-night);
    --surface: var(--p-night-800);
    --surface-2: var(--p-night-700);
    --surface-3: #1F2C42;
    --ink: #EEF2F6;
    --ink-2: #A9B4C4;
    --line: #27344B;
    --line-strong: #6F7F99;

    --primary: var(--p-felt-bright);
    --primary-hover: var(--p-felt-bright-hover);
    --primary-ink: var(--p-white);
    --danger: #B4232F;
    --danger-hover: var(--p-red);

    --accent-ink: var(--p-sky-light);

    --band-2: #0A2F1F;

    --ok: #86DDAE;
    --ok-bg: #12382A;
    --ok-line: #1F5C42;
    --bad: #FFB1B8;
    --bad-bg: #3B1519;
    --bad-line: #7A2B33;
    --wait: #F4C56A;
    --wait-bg: #3A2C0C;
    --wait-line: #6B5318;
    --soon: #B9C4D3;
    --soon-bg: #212C40;
    --soon-line: #34425B;
    --play: #BFD7FF;
    --play-bg: #1B2E55;
    --secret: #D9C8FF;
    --secret-bg: #2E2150;

    --rail-bg: #0F1829;
    --rail-bg-2: #0A101C;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -18px rgba(0, 0, 0, .7);
    --shadow-3: 0 2px 4px rgba(0, 0, 0, .5), 0 30px 64px -24px rgba(0, 0, 0, .85);
  }
}