/* tokens.css -- the ONLY place a raw colour, size, radius or duration lives.
   Every page uses these by name. Rules are in DESIGN.md sections 2, 3, 4 and 12.

   THE PALETTE IS THE APP'S (JR, 2026-09-17: "I want it to look like the app does when you
   open it"). Light is warm paper with a brass accent. Dark is night navy with a violet
   accent.

   DAY AND NIGHT, AS IN THE APP (JR, 2026-09-22: "It has a daytime/nighttime theme. Thats the
   way i want the website to look."). DAY is the light set below. NIGHT is the dark set further
   down plus the "stage light" extras in theme.css (glow, glass panels, violet-to-cyan).
   Which one shows is decided by ui/theme.js: the Mac's own appearance, until the Theme button
   is pressed; then the choice is remembered in this browser. The fonts are the app's:
   Oswald for headings and big numbers, Inter for text, Roboto Mono for small figures. */
:root {
  /* colour, light */
  --bg: #fbfaf6;
  --bg-raised: #ffffff;
  --line: #e4decf;
  --ink: #1b1a16;
  --ink-soft: #7c776c;
  --ink-faint: #b5af9f;
  --accent: #c08a24;
  --accent-soft: #f5e9cc;
  --ok: #2e9e6b;
  --warn: #c8791e;
  --bad: #c0473f;
  --na: #b5af9f;
  --glow: rgba(214,168,76,.16);            /* the soft light behind the big logo */
  /* the ticket: always paper, whatever the theme, so it reads as a real stub */
  --paper: #fbfaf6;
  --paper-ink: #1b1a16;
  --paper-soft: #7c776c;
  --paper-line: #d6cfbc;
  --paper-brass: #c08a24;
  /* the day look's extras: soft shadow under a panel, the brass bar on a number tile */
  --accent-2: #d6a84c;                     /* the lighter brass, the far end of the tile bar */
  --shadow: 0 1px 2px rgba(30,24,10,.05), 0 8px 24px rgba(30,24,10,.06);
  --bar: linear-gradient(90deg, #c08a24, #d6a84c);
  /* THE TEASER PAGE (welcome.html): the logo's own gradient, and the "stage" its hero, its real room
     and its join box sit on (the public city and venue pages use the same stage at the top).
     The stage FOLLOWS DAY AND NIGHT like the rest of the site (JR, 2026-10-15: the first page "is still
     night"). The colours here are the NIGHT stage; the DAY stage is the block further down marked
     data-theme="light". Night is written here, as the starting set, because the picture for a post
     (card.html) uses these colours too and has no day or night of its own: it is always dark. */
  --logo-violet: #7c3aed;
  --logo-blue: #2563eb;
  --logo-cyan: #22d3ee;
  --logo-grad: linear-gradient(135deg, #7c3aed 0%, #2563eb 50%, #22d3ee 100%);
  --stage-bg: #06070d;
  --stage-raised: #0d1022;
  --stage-ink: #eef1ff;
  --stage-soft: #9aa3c7;
  --stage-line: rgba(255,255,255,.10);
  --stage-glass: rgba(255,255,255,.05);
  --brass-glow: rgba(214,168,76,.35);
  /* the site's own lighter brass, for the two small lines in the teaser's headline: a warm gold
     against the stage's cool violet, blue and cyan, so the eye goes to it (JR, 2026-09-27: "a
     contrasting color that's pleasant but brings attention"). The same in both looks, because
     the stage is dark in both. */
  --stage-brass: #d6a84c;
  /* the rest of the stage's own colours, so the day stage can change them:
     --stage-cyan     cyan writing on the stage (the changing word, the small headings over a section)
     --stage-num      the big numbers on the real room
     --stage-shadow   the shadow under a card that floats on the stage
     --stage-sold     a sold seat on the real room's map
     --stage-blend    how the three coloured lights mix into the ground (they add light on night)
     --stage-lights   how strong those lights are */
  --stage-cyan: #22d3ee;
  --stage-num: linear-gradient(120deg, #ece7ff, #67e8f9);
  --stage-shadow: 0 30px 60px rgba(0,0,0,.45);
  --stage-sold: #3E4553;
  --stage-blend: screen;
  --stage-lights: .75;
  /* THE BOX OFFICE TICKET on the first page (welcome.html, the sign-in ticket): the colours of a
     printed ticket, the same in both looks because the ticket is paper in both.
     --ticket-rule is the blue of the printed lines and captions; --ticket-wash is the pale colour
     printed across the stub; --paper-bad is "something is wrong" in a red that
     can be read on paper (the Night look's own red is made for dark ground and is too pale here). */
  --ticket-rule: #3b6fd6;
  --ticket-wash: #e3f1fb;
  --paper-bad: #c0473f;
  /* THE CLOSED BETA STRIP across the top of the public pages (ui/beta.js, welcome.css): a dark band in
     both looks, as a strip of stage-door tape. By day it is the day ink; at night a navy one step
     lighter than the ground, so it still reads as a band of its own. */
  --beta-bg: #1b1a16;
  --beta-ink: #fbfaf6;
  --beta-soft: #a8a294;
  --beta-line: rgba(255,255,255,.16);
  --beta-h: 40px;                          /* its height; the bar and the page start below it */
  /* THE SALES RECORD (lib/sales.js): an emerald family, a hue nothing else on the site uses, so a
     room that sells can never be mistaken for "selected" (brass) or a warning. Strong is the full
     colour, steady its pale tint, uneven stays neutral grey. */
  --sell-strong: #1f7a55;                  /* white text on it: 5.4 to 1 */
  --sell-strong-ink: #ffffff;
  --sell-steady: #d9eee3;
  --sell-steady-ink: #1d5c43;
  --sell-uneven: #ece8dd;
  --sell-uneven-ink: #6a655b;
  /* the night look's colours, used only under data-theme="dark" in theme.css */
  --n-violet: #7c3aed;
  --n-cyan: #22d3ee;
  --n-lilac: #c4b5fd;
  --n-ice: #67e8f9;
  --n-white: #ece7ff;
  --n-glass: rgba(255,255,255,.04);        /* a panel you can half see through */
  --n-glass-line: rgba(255,255,255,.09);
  --n-head: #0d1022;                       /* solid, for table heads that stick while scrolling */
  --n-aurora: radial-gradient(1100px 640px at 84% -10%, rgba(124,58,237,.18), transparent 60%),
              radial-gradient(900px 560px at -10% 6%, rgba(34,211,238,.11), transparent 55%),
              radial-gradient(700px 500px at 60% 108%, rgba(236,72,153,.08), transparent 60%), #06070d;
  --n-tab: linear-gradient(135deg, rgba(124,58,237,.34), rgba(34,211,238,.16));
  --n-tab-glow: 0 0 0 1px rgba(124,58,237,.32), 0 6px 22px rgba(124,58,237,.28);
  --n-text: linear-gradient(120deg, #ece7ff, #67e8f9);              /* big numbers */
  --n-title: linear-gradient(100deg, #ffffff, #c4b5fd 55%, #67e8f9); /* headings */
  --n-num-glow: drop-shadow(0 0 10px rgba(124,58,237,.35));
  --n-hover: rgba(124,58,237,.08);
  /* type: the app's three fonts (loaded from Google Fonts on every page), six sizes */
  --font: "Inter", -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Oswald", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-hero: 40px;
  --t-kpi: 30px;                           /* a number inside a tile, as the app's tiles */
  --t-title: 24px;
  --t-head: 17px;
  --t-body: 15px;
  --t-small: 13px;
  --t-micro: 11px;
  /* shape and motion */
  --radius: 12px;
  --radius-control: 8px;
  --dur-fast: 120ms;
  --dur-move: 200ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}
/* Dark: the app's night navy. Raised surfaces are lighter, never #000. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #06070d;
    --bg-raised: #0d1022;
    --line: rgba(255,255,255,.09);
    --ink: #eef1ff;
    --ink-soft: #8b93b8;
    --ink-faint: #4f5678;
    --accent: #a78bfa;
    --accent-soft: rgba(124,58,237,.18);
    --ok: #34d399;
    --warn: #fbbf24;
    --bad: #fb7185;
    --na: #4f5678;
    --glow: rgba(124,58,237,.4);
    --accent-2: #22d3ee;
    --shadow: 0 2px 8px rgba(0,0,0,.5);
    --bar: linear-gradient(90deg, #7c3aed, #22d3ee);
    --sell-strong: #34d399;
    --sell-strong-ink: #06170f;
    --sell-steady: rgba(52,211,153,.18);
    --sell-steady-ink: #6ee7b7;
    --sell-uneven: rgba(255,255,255,.07);
    --sell-uneven-ink: #8b93b8;
    --beta-bg: #121633;
    --beta-ink: #eef1ff;
    --beta-soft: #8b93b8;
  }
}
:root[data-theme="dark"] {
  --bg: #06070d;
  --bg-raised: #0d1022;
  --line: rgba(255,255,255,.09);
  --ink: #eef1ff;
  --ink-soft: #8b93b8;
  --ink-faint: #4f5678;
  --accent: #a78bfa;
  --accent-soft: rgba(124,58,237,.18);
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #fb7185;
  --na: #4f5678;
  --glow: rgba(124,58,237,.4);
  --accent-2: #22d3ee;
  --shadow: 0 2px 8px rgba(0,0,0,.5);
  --bar: linear-gradient(90deg, #7c3aed, #22d3ee);
  --sell-strong: #34d399;
  --sell-strong-ink: #06170f;
  --sell-steady: rgba(52,211,153,.18);
  --sell-steady-ink: #6ee7b7;
  --sell-uneven: rgba(255,255,255,.07);
  --sell-uneven-ink: #8b93b8;
  --beta-bg: #121633;
  --beta-ink: #eef1ff;
  --beta-soft: #8b93b8;
}
/* A closed beta strip takes no room (ui/beta.js marks it closed). */
:root[data-beta="closed"] { --beta-h: 0px; }
/* THE DAY STAGE (JR, 2026-10-15). A pale lilac ground, so the stage sections stand apart from the
   warm paper sections between them the way the dark stage does at night (JR: "Theres no change in
   section back grounds"), with the logo's violet, blue and cyan as soft washes of colour instead of
   lights in the dark. Words are the day look's own ink. The cyan and the brass are taken darker, because the night ones are made to be read on a dark
   ground and are too pale on paper. */
:root[data-theme="light"] {
  --stage-bg: #eeecf8;
  --stage-raised: #ffffff;
  --stage-ink: #1b1a16;
  --stage-soft: #6b665b;
  --stage-line: rgba(27,26,22,.12);
  --stage-glass: rgba(255,255,255,.6);
  --stage-brass: #a87418;
  --stage-cyan: #0b7c93;
  --stage-num: var(--logo-grad);
  --stage-shadow: 0 24px 50px rgba(30,24,10,.12);
  --stage-sold: #d9d3c4;
  --stage-blend: multiply;
  --stage-lights: .3;
}
/* Reduced motion: every transition goes to zero. Declared once, here. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-move: 0ms; }
}