/* xi-tokens.css — v1 * * The XI Games shared design layer. One copy at shared/, referenced (not * copied) by every game on the same origin. Each game's deploy check asserts * the version marker on the first line; bump it when this file changes. * * LIGHT IS THE FAMILY DEFAULT. [data-theme="dark"] opts in. Crossword XI's * contrast values are the source (11.9:1 typed letter, 5.4:1 deep-amber XI on * paper); everything here is lifted from its measured stylesheet rather than * re-derived. The XI mark asymmetry is deliberate: gold reads directly on * dark, but measures 1.45:1 as text on paper — hence --xi-ink for light. */ :root{ --paper:#F4F5F2; --card:#FFFFFF; --ink:#182219; --ink-soft:#5A675D; --ink-faint:#8A968D; --pitch:#1E6B45; --pitch-deep:#123B27; /* The Friends theme's own colour, first worn by its card on the theme picker (29 Sep 2026): a plum, with the family's gold as its accent. */ --friends:#5B3A72; --friends-deep:#3B2350; --gold:#F2C94C; --gold-ink:#3A2D00; --xi-ink:#8A5A00; --line:#D9DDD6; --danger:#8E2F45; --ok:#1E6B45; --tint:rgba(24,34,25,.06); --tint-strong:rgba(24,34,25,.12); /* form results — win, draw, loss. Separated by lightness as well as hue so the letter and the weight carry it for a colour-blind player. */ /* The line on the hero's grid. It inverts, because the hero does: deep green in light and pale green in dark, so a white line that reads as depth on one is a wash on the other that eats the Kick off button's contrast. */ --hero-rule:rgba(255,255,255,.085); --form-w:var(--correct); --form-w-ink:var(--correct-ink); --form-d:#FAC775; --form-d-ink:#412402; --form-l:#F7C1C1; --form-l-ink:#501313; --disp:"Barlow Condensed",-apple-system,"Arial Narrow",Arial,sans-serif; --body:"Public Sans",-apple-system,"Segoe UI",Arial,sans-serif; --radius:12px; --tap:44px; /* the tap floor — nothing interactive smaller than this */ /* ---- the game accents ------------------------------------------------ Defaults are the family's green, so a page that names no game still looks like the family rather than like nothing. A game sets data-game on and takes its own three below. The colours are the SAME ones the hub has used per shirt since it was built — one fact, two places would have been two answers to "what colour is Wordsearch XI". */ --accent:var(--pitch); --accent-ink:var(--pitch); --accent-on:#FFFFFF; } /* Crossword XI wears the family green: it is the one game whose accent and the family's are the same colour, which is right for the game that is the front door of the set. */ [data-game="crossword"]{--accent:#1E6B45; --accent-ink:#1E6B45; --accent-on:#FFFFFF} /* Sky. The tile colour is unreadable as text — 2.1:1 — so the ink is the deeper sky it is recognisably the same colour as. */ [data-game="wordsearch"]{--accent:#7BA7CC; --accent-ink:#2E6491; --accent-on:#0E2A40} /* Amber, and the worst offender for contrast: black on amber, and a dark amber for anything set as text. */ [data-game="scrambled"]{--accent:#F2C94C; --accent-ink:#8A6100; --accent-on:#3A2D00} [data-game="hilo"]{--accent:#1F4E79; --accent-ink:#1F4E79; --accent-on:#FFFFFF} [data-game="vowels"]{--accent:#8E2F45; --accent-ink:#8E2F45; --accent-on:#FFFFFF} [data-game="grid"]{--accent:#2C3E63; --accent-ink:#2C3E63; --accent-on:#FFFFFF} /* ---- the same six, read on a dark ground ------------------------------- Every --accent-ink above was chosen against off-white. On #121711 the navy, the indigo, the claret and the forest all fall below 4.5:1 and two of them below 3:1, so a game's name would be the least legible thing on its own page. The MARK is unchanged — a game is still its colour — and only the reading weight lifts. Both attributes sit on , so they are named together: `:root[dark]` alone is (0,2,0) and would beat a bare [data-game], which is exactly how the first version of this block turned all six games green in the dark. */ :root[data-theme="dark"][data-game="crossword"]{--accent:#1E6B45; --accent-ink:#8FD9AE; --accent-on:#FFFFFF} :root[data-theme="dark"][data-game="wordsearch"]{--accent:#7BA7CC; --accent-ink:#A8CDEC; --accent-on:#0E2A40} :root[data-theme="dark"][data-game="scrambled"]{--accent:#F2C94C; --accent-ink:#F2C94C; --accent-on:#3A2D00} :root[data-theme="dark"][data-game="hilo"]{--accent:#1F4E79; --accent-ink:#9CC4E8; --accent-on:#FFFFFF} :root[data-theme="dark"][data-game="vowels"]{--accent:#8E2F45; --accent-ink:#F0A8B8; --accent-on:#FFFFFF} :root[data-theme="dark"][data-game="grid"]{--accent:#2C3E63; --accent-ink:#A9BCE6; --accent-on:#FFFFFF} :root[data-theme="dark"]{ --paper:#121711; --card:#1B231A; --accent:var(--pitch); --accent-ink:#8FD9AE; --accent-on:#0C1A11; --ink:#EAF0E8; --ink-soft:#A9B5A9; --ink-faint:#76816F; --pitch:#2C8A5C; --pitch-deep:#0D2B1C; --friends:#6E4A8A; --friends-deep:#2A1838; --gold:#F2C94C; --gold-ink:#3A2D00; --xi-ink:#F2C94C; --line:#2C352A; --danger:#D9758C; --ok:#61DDA1; --tint:rgba(234,240,232,.07); --tint-strong:rgba(234,240,232,.14); --hero-rule:rgba(0,0,0,.075); /* form results — win, draw, loss. Separated by lightness as well as hue so the letter and the weight carry it for a colour-blind player. */ --form-w:var(--correct); --form-w-ink:var(--correct-ink); --form-d:#FAC775; --form-d-ink:#412402; --form-l:#F7C1C1; --form-l-ink:#501313; } .xi-mark{font-family:var(--disp);font-weight:700;color:var(--xi-ink)} /* ====================================================================== * THE DESIGN SYSTEM — everything below was added in shared v6. * * Nothing above changed value. What follows gives the family a vocabulary * for the things it was spelling out ad hoc: sizes, spaces, corners, * shadows, motion, and the colours that mean a STATE rather than a surface. * The rules for using these are in shared/DESIGN.md. * ====================================================================== */ :root{ /* ---- type scale. --disp is the display face (mastheads, tiles, kickers); --body is everything you read. Sizes are the only sizes; a game that needs 15.5px has a different problem. */ --fs-xs:12px; --fs-sm:13.5px; --fs-md:15px; --fs-lg:17px; --fs-xl:21px; --fs-2xl:26px; --fs-3xl:32px; --fs-mast:40px; --lh-tight:1.1; --lh-snug:1.3; --lh-body:1.5; --track-caps:.08em; /* letter-spacing for uppercase kickers */ /* ---- a sign-in provider's own colours, which do NOT follow the theme. Apple's guidelines ask for its button black with white type (or the reverse) whatever the page around it; a themed Apple button is not one. Here rather than written into xi-chrome.css, because the palette lives in this file and chrome_test holds the chrome to it. */ --brand-apple:#000000; --brand-apple-ink:#FFFFFF; /* ---- spacing, on a 4px grid. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; /* ---- corners. Four, not twelve. --radius above is the legacy name for --r-lg and stays so nothing that reads it breaks. */ --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:var(--radius); --r-pill:999px; /* ---- elevation. Cards rest, sheets float, and a focus ring is a shadow because a shadow survives any background the control sits on. The ring is two-tone — paper then pitch — so it reads on a green button as well as on a white cell. */ --shadow-1:0 1px 2px rgba(24,34,25,.06),0 2px 8px rgba(24,34,25,.06); --shadow-2:0 8px 24px rgba(0,0,0,.16); --ring:0 0 0 3px var(--paper),0 0 0 5px var(--pitch); /* ---- motion. Four durations and two curves, and every transition in the family uses one of each. Feedback is fast; movement you are meant to follow (a table row changing place) is slow enough to be seen. */ --t-fast:120ms; --t-base:180ms; --t-slow:320ms; --t-move:420ms; --ease:cubic-bezier(.2,.7,.2,1); --ease-in:cubic-bezier(.4,0,1,1); /* ---- state. Accent is reserved for what a thing MEANS, never for decoration: the cell you are on, the word it belongs to, a letter that is right, one that is wrong, one the game gave you. Gold is the reveal and nothing else, so a gold cell always means "you were told". */ /* ---- green as INK and green as a SURFACE are different tokens. --pitch-deep is a surface: in dark mode it is near-black, and a clue number set in it disappears — which is how the crossword came to carry an inverted dark palette of its own. --pitch-ink is green you read; --on-pitch is text that sits ON green (white in both modes); --pitch-hover is where a green control goes under the pointer, darker in light and lighter in dark. */ --pitch-ink:#1E6B45; --on-pitch:#FFFFFF; --pitch-hover:#123B27; /* The scrim behind a sheet. Written as a literal in two games' stylesheets and lifted with the sheet itself on 6 Sep 2026; a token because the shared layer is not allowed a palette of its own, and because "the dimming behind a dialog" is a decision the family should make once. Deep pitch at 60%: dark enough to sit the card forward, light enough to see the board under it. One value for both schemes — a scrim that changed with the theme would make the card float in light mode and sink in dark. */ --scrim:rgba(18,34,25,.6); /* Secondary text ON green — a kicker or a note on the hero. Mint, not white at reduced opacity, so it stays a colour rather than a fade. */ --on-pitch-soft:#9FE1CB; /* Draw and loss as STRONG marks — a form letter on a dark chip, the half- time clock — where --form-d/--form-l are the pale chip surfaces. */ --draw:#B9922E; --loss:#B4483B; /* WHERE YOU ARE, not what is right. Teal, because --correct below is a pale yellow-green and the two used to sit four points of hue apart. */ --sel:#A6D9D4; --sel-word:#CBE7E5; --sel-ring:#33418F; --sel-line:#79B7B2; --correct:#C0DD97; --correct-ink:#173404; --wrong:#C0392B; --wrong-ink:#8A2419; --wrong-bg:#FBE3E0; --revealed:#7A8FA6; --revealed-bg:#F8E9B8; /* ---- the grid. White cells and near-black blocks are the game; the field they sit on is a step off paper and no more. It was a saturated green, which is why the grid read as a pitch with letters cut out of it. */ --grid-cell:#FFFFFF; --grid-line:#DFE3DD; --grid-block:#1B211C; --grid-field:#E7EBE5; --grid-field-line:rgba(24,34,25,.10); /* ---- A RIGHT ANSWER, as a filled surface: a Full Time box, a solved tile, the pip of the clue that won a card. It was --pitch, which was the right colour for the wrong reason -- the day a theme recoloured the pitch, its right answers would have changed colour with it. The owner, 6 Oct 2026, restyling Friends: "Correct stay green yes, I'm only referring to elements outside of answers". So right has its own name, football green by default and kept green wherever the pitch is not. */ --got:var(--pitch); --on-got:var(--on-pitch); --got-soft:var(--on-pitch-soft); /* The frame round a board: its colour and its width. */ --board-frame:var(--pitch-deep); --board-frame-w:2px; } :root[data-theme="dark"]{ --shadow-1:0 1px 2px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.3); --shadow-2:0 8px 24px rgba(0,0,0,.5); --pitch-ink:#8FD9AE; --on-pitch:#FFFFFF; --pitch-hover:#3CA070; --on-pitch-soft:#9FE1CB; --draw:#B9922E; --loss:#B4483B; /* The same separation in the dark theme, and the ring inverts: indigo ink on a pale square, indigo LIGHT on a dark one. */ --sel:#3F6260; --sel-word:#2C4645; --sel-ring:#9AA8F0; --sel-line:#6E9C99; --correct:#C0DD97; --correct-ink:#173404; --wrong:#E3695A; --wrong-ink:#FFD9D3; --wrong-bg:#4A231D; --revealed:#8AA0B6; --revealed-bg:#5C4E1E; --grid-cell:#5A6356; --grid-line:#8D9788; --grid-block:#070907; --grid-field:#182019; --grid-field-line:rgba(255,255,255,.08); } /* ---- FRIENDS: MONICA'S DOOR --------------------------------------------- The owner, 6 Oct 2026, from the app: the Friends crossword "is still boring looking, needs a friends makeover"; of three directions, "B it is" -- a purple field with a yellow frame -- and then, for every Friends page, "Anywhere with football themed colours like the green can be replaced with this new colour theme", with "Correct stay green yes, I'm only referring to elements outside of answers / I.e. background". So on a page whose first path segment is friends (stamped by shared/xi-theme.js before the first paint) the pitch family, the paper, the lines, the selection and the grid's field turn purple, the frame round a board turns yellow, and the answer colours do not move: --got is pinned to football's green, and --ok, --correct and --wrong were never the pitch. Declared on :root, as the defaults are, so every token that is derived from --pitch there (--accent, --ring) follows. After the [data-game] rules, and of equal or greater weight, because the crossword's --accent is a literal there. No logos, stills or cast images: colour only. */ :root[data-xi-set="friends"]:not([data-theme="dark"]){ --paper:#F7F3FA; --card:#FFFFFF; --line:#E2D9EE; --ink:#2B1F3D; --ink-soft:#6E5F86; --ink-faint:#9C90AE; --pitch:#5B3C88; --pitch-deep:#3E2766; --pitch-ink:#5B3C88; --on-pitch:#FFFFFF; --pitch-hover:#3E2766; --on-pitch-soft:#DCCDF2; --accent:#5B3C88; --accent-ink:#5B3C88; --accent-on:#FFFFFF; --xi-ink:#B58A12; --tint:rgba(62,39,102,.06); --tint-strong:rgba(62,39,102,.12); --scrim:rgba(43,31,61,.6); --shadow-1:0 1px 2px rgba(62,39,102,.07),0 2px 8px rgba(62,39,102,.07); --sel:#D9C8F0; --sel-word:#E5DAF5; --sel-ring:#E8C547; --sel-line:#B79FD9; --grid-cell:#FFFFFF; --grid-line:#E2D9EE; --grid-block:#3E2766; --grid-field:#EEE6F6; --grid-field-line:rgba(62,39,102,.10); --got:#1E6B45; --on-got:#FFFFFF; --got-soft:#9FE1CB; --board-frame:#E8C547; --board-frame-w:8px; } :root[data-theme="dark"][data-xi-set="friends"]{ --paper:#16101F; --card:#211833; --line:#3A2D52; --ink:#EEE8F6; --ink-soft:#B9AECB; --ink-faint:#857A99; --pitch:#7A55B0; --pitch-deep:#2A1A45; --pitch-ink:#CDB8F0; --on-pitch:#FFFFFF; --pitch-hover:#9470C8; --on-pitch-soft:#DCCDF2; --accent:#7A55B0; --accent-ink:#CDB8F0; --accent-on:#FFFFFF; --xi-ink:#E8C547; --tint:rgba(238,232,246,.07); --tint-strong:rgba(238,232,246,.14); --scrim:rgba(43,31,61,.6); --sel:#4A3A66; --sel-word:#3A2D52; --sel-ring:#E8C547; --sel-line:#7E6AA0; --grid-cell:#5E5470; --grid-line:#8F84A3; --grid-block:#0B0712; --grid-field:#1E1630; --grid-field-line:rgba(255,255,255,.08); --got:#2C8A5C; --on-got:#FFFFFF; --got-soft:#9FE1CB; --board-frame:#E8C547; --board-frame-w:8px; } /* Motion collapses to nothing in ONE place. A game that uses the tokens gets reduced motion for free; one that hardcodes 200ms has to remember. */ @media (prefers-reduced-motion:reduce){ :root{ --t-fast:0ms; --t-base:0ms; --t-slow:0ms; --t-move:0ms; } }