/* ============================================================================
JSOOR Gaming — VERTICAL BRAND
A delta over brand/jsoor-tech.css. Load it AFTER the family brand file:
This file defines NO component. Tokens only. Everything a screen is built from
comes from the family component layer.
THE ACCENT — Screen Spill. #57C8E0 measures as oklch(0.777 0.107 214) and that
is the dark value, verbatim. It is the one hue no sibling owns: gold is JSOOR
Retail's alternate, Voltage is JSOOR Tech, Ignition Orange is Gym, green is SLMA.
It is literally what a monitor throws on a wall at night.
THE ACCENT IS NEVER A CHIP. The seven family state tones keep their exact hues
and meanings. Cyan appears in exactly three places and nowhere else:
1. the focus ring
2. the spill (behind the wordmark, behind the selected record)
3. the glow on a tile that is live
Never behind a button. Never on a money figure — money is not live, it is as-of.
GROUND — both, dark is the default. The mechanism is the family's: light on
:root, dark by class. The shell boots with dark applied; that is a config line,
not a fork.
========================================================================= */
/* ─────────────── LIGHT · the family's neutrals, gaming's accent ─────────────── */
:root {
/* Screen Spill, deepened for a light ground on the Circuit Gold pattern:
cyan is intrinsically light, so it keeps its lightness and takes dark ink
rather than turning into a navy nobody would call Screen Spill. */
--accent: oklch(0.735 0.100 214);
--accent-hover: oklch(0.700 0.104 213);
--accent-press: oklch(0.660 0.104 212);
--accent-soft: oklch(0.958 0.035 214);
--accent-soft-bd: oklch(0.890 0.060 214);
--accent-fg: oklch(0.520 0.095 216);
--accent-ink: oklch(0.200 0.020 220);
--ring: oklch(0.735 0.100 214 / 0.45);
/* The display face. Sora stays the UI voice so an English gaming screen still
reads as JSOOR; Zain carries the one gesture this vertical owns — a number set
as large as the surface allows, with nothing on it. */
--font-display: "Zain", var(--font-sans);
/* E1 and E4. The family names four heights; the six-height model needs two more.
E1 is a region of the ground, not an object on it. E4 is above everything. */
--plate: oklch(0.968 0.002 240);
--sheet: #fff;
/* The reflection ladder — K3 as four steps instead of one, so a surface declares
its height without anyone reading a word. --refl stays bound to E2, so every
existing family component keeps working untouched. */
--refl-1: inset 0 1px 0 oklch(1 0 0 / .30);
--refl-2: inset 0 1px 0 oklch(1 0 0 / .45);
--refl-3: inset 0 1px 0 oklch(1 0 0 / .55);
--refl-4: inset 0 1px 0 oklch(1 0 0 / .70);
--refl: var(--refl-2);
/* Gaming presses by descending, not by scaling. The family already exposes
--press, so this is a one-token vertical choice. */
--press: translateY(2px);
/* The motion budget. Five things move and the list is closed.
--dur-press (120ms) is the family's and needs no change. */
--dur-drawer: 280ms; /* sheet travel */
--dur-cross: 520ms; /* a state crossing — fires once, on the crossing */
--dur-arrive: 240ms; /* a row or tile entering */
--dur-money: 320ms; /* a total resolving at the end of a payment */
}
/* ─────────────── DARK · the room, and the default ─────────────── */
/* The family's dark neutrals are built for an office. This is a floor lit only by
monitors, and staff look up from this screen hundreds of times a shift. The ramp
goes near-black so it does not cost them their dark adaptation.
E0 ground · E− well · E1 plate · E2 panel · E3 object · E4 sheet. */
.dark {
--bg: oklch(0.115 0.003 250); /* E0 #050505 the room itself */
--sunken: oklch(0.150 0.003 250); /* E− #0B0B0B inputs, empty slots */
--plate: oklch(0.145 0.003 250); /* E1 #0A0A0A nav, header bands */
--card: oklch(0.173 0.003 250); /* E2 #101010 tables, panes, rails */
--raised: oklch(0.200 0.003 250); /* E3 #171717 tiles, cards, buttons */
--sheet: oklch(0.243 0.003 250); /* E4 #1F1F1F wizards, gates */
--border: oklch(0.270 0.003 250); /* #262626 every border and divider */
--border-strong: oklch(0.330 0.003 250);
--hairline: oklch(0.227 0.003 250); /* #1C1C1C one step below the line */
--ink: oklch(1 0 0);
--ink-2: oklch(0.715 0.003 250);
--muted: oklch(0.580 0.004 250);
--faint: oklch(0.470 0.004 250);
--bg-brand: oklch(0.115 0.003 250);
--muted-brand: oklch(0.580 0.004 250);
/* White acts. The family's --primary already flips to a near-white with dark ink
on a dark ground, which is the old doc's rule arriving for free. */
--primary: oklch(1 0 0);
--primary-hover: oklch(0.900 0.002 250);
--primary-fg: oklch(0.115 0.003 250);
/* Screen Spill, verbatim: oklch(0.777 0.107 214) == #57C8E0 */
--accent: oklch(0.777 0.107 214);
--accent-hover: oklch(0.820 0.100 214);
--accent-press: oklch(0.735 0.105 214);
--accent-soft: oklch(0.310 0.065 214);
--accent-soft-bd: oklch(0.430 0.090 214);
--accent-fg: oklch(0.830 0.090 214);
--accent-ink: oklch(0.180 0.020 220);
--ring: oklch(0.777 0.107 214 / 0.5);
/* The three-step shadow scale IS E2, E3, E4. Redefining the values buys the
six-height model with no new component code anywhere. */
--sh-1: 0 1px 0 oklch(0 0 0 / .6);
--sh-2: 0 3px 10px oklch(0 0 0 / .55);
--sh-3: 0 14px 44px oklch(0 0 0 / .7);
--refl-1: inset 0 1px 0 oklch(1 0 0 / .03);
--refl-2: inset 0 1px 0 oklch(1 0 0 / .055);
--refl-3: inset 0 1px 0 oklch(1 0 0 / .085);
--refl-4: inset 0 1px 0 oklch(1 0 0 / .12);
--refl: var(--refl-2);
--refl-dark: var(--refl-3);
}
/* The state tones are NOT redefined. ok · info · warn · bad · frozen · guest ·
neutral keep the family's hues and meanings on both grounds. That is the whole
reason the accent stays out of the ladder: a frozen chip and a cyan glow never
compete, because they never do the same job.
What the gaming domain calls them:
ok settled · paid · agent healthy
info running — a session billing right now
warn ending soon · agent offline · a write not yet synced
bad broken · failed · cancelled · no-show
frozen held — a reservation holding a resource (see README: no pause in v1)
guest walk-in · no account
neutral free · closed · never reported · stale */