/* Sprint 8 Lane 2 — `tartan` palette. * * Green-and-red tartan felt (a nod to the legacy Highlander theme in * themes.css, which used a yellow-on-black tartan card-back). The * tartan pattern lives on the felt surface via a stack of repeating * linear gradients (kept here, not in tokens.css, because the base * contract is "felt-mid is a color"; tartan extends to a gradient * overlay applied separately to .table-shell__felt below — felt-mid * itself stays a solid base green so derived felt-deep / felt-light * remain valid color-mix inputs). * * Tokens differ from green-felt baseline: * felt-mid solid green WITH a layered tartan gradient overlay * drawn on top via tartan-pattern (applied to * .table-shell__felt below) * accent warm gold to cream/off-white (lifts off the green+red * tartan without competing with either stripe) * team-ns green (the tartan's green stripe is the NS team color) * team-ew crimson (matches the red stripe in the tartan) * * Tartan rendering hand-off: * The 13-token contract says felt-mid is a color. We honor that * here — felt-mid is a solid base green so derived felt-deep / * felt-light stay valid. The actual tartan stripes are exposed * via the additional tartan-pattern token, which the felt layer * reads when present. Other palettes leave tartan-pattern unset; * only the tartan palette opts in. * * This keeps the 13-primary contract intact while still allowing * a textured felt — L5 contrast linter only audits the 13 primaries, * so the extra token is invisible to it. * * Same 13 primary tokens, same order as green-felt.css. * * Authoring note: comments here intentionally do NOT include a colon * after a leading `--token-name` reference, because the L5 contrast * test's regex matches the FIRST `--name: ;` it finds in the * file — putting that pattern in a comment causes the test to read * the comment text as the token value and skip the file. */ body[data-theme="tartan"] { --bg: #e8e4dc; --paper: #fafaf6; --ink: #1a1f1a; --ink-soft: #4a554a; --felt-mid: #2f5a3a; --card-bg: #ffffff; --card-border: #d8d4c8; --red: #c44545; --spade: #1a1f1a; --accent: #f1ead8; --team-ns: #2f5a3a; --team-ew: #b03030; --amber: #f59e0b; /* Sprint 13 bespoke card back — proper green-and-red tartan plaid that mirrors the felt surface pattern (warp + weft stripe sett identical to the .table-shell__felt overlay below). Each card shows a full self-contained tartan inside its SVG viewBox; the cream cross-hatch + thin black weft lines give the classic Scottish-tartan weave. Paired with highlander's black/gold tartan as a "two clans" deck pair. */ --card-back-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 144'%3E%3Cdefs%3E%3Cpattern id='t' x='0' y='0' width='24' height='24' patternUnits='userSpaceOnUse'%3E%3Crect width='24' height='24' fill='%232f5a3a'/%3E%3Crect x='3' y='0' width='3' height='24' fill='%23b03030' opacity='0.78'/%3E%3Crect x='13' y='0' width='4' height='24' fill='%23b03030' opacity='0.85'/%3E%3Crect x='9' y='0' width='1' height='24' fill='%23f1ead8' opacity='0.75'/%3E%3Crect x='20' y='0' width='1' height='24' fill='%23000' opacity='0.4'/%3E%3Crect x='0' y='3' width='24' height='3' fill='%23b03030' opacity='0.78'/%3E%3Crect x='0' y='13' width='24' height='4' fill='%23b03030' opacity='0.85'/%3E%3Crect x='0' y='9' width='24' height='1' fill='%23f1ead8' opacity='0.75'/%3E%3Crect x='0' y='20' width='24' height='1' fill='%23000' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='144' fill='url(%23t)'/%3E%3Crect x='3' y='3' width='94' height='138' rx='4' fill='none' stroke='%23f1ead8' stroke-width='2'/%3E%3C/svg%3E"); --card-back-size: 100% 100%; --card-back-repeat: no-repeat; --card-back-position: center; --card-back-mask: none; --card-emblem-display: none; /* Sprint 12 — rebuild as a rectilinear plaid sett that actually tiles. The previous version stacked diagonals at 18px with orthogonal cross-bars at 36px — the mismatched periods produced a visible moiré band roughly every 36-60px which read as a hard seam in the rendered felt. Real tartan setts are warp + weft: identical stripe pattern run in two perpendicular directions, layered so the crossings produce darker squares and the gaps produce a checker pattern. One shared period (40px) means every tile lines up cleanly with its neighbors — no moiré, no seams, even at large felt sizes. Sett within each 40px run (warp / weft identical): 0–6 transparent (green felt shows) 6–10 red 0.42 (thick red stripe) 10–14 transparent 14–16 cream 0.30 (thin cream tram-line — adds plaid detail) 16–22 transparent 22–28 red 0.42 (paired thick red — the doubled-stripe that gives the classic woven look) 28–34 transparent 34–36 black 0.22 (thin black accent) 36–40 transparent */ --tartan-pattern: repeating-linear-gradient( to right, transparent 0, transparent 6px, rgba(176, 48, 48, 0.42) 6px, rgba(176, 48, 48, 0.42) 10px, transparent 10px, transparent 14px, rgba(241, 234, 216, 0.30) 14px, rgba(241, 234, 216, 0.30) 16px, transparent 16px, transparent 22px, rgba(176, 48, 48, 0.42) 22px, rgba(176, 48, 48, 0.42) 28px, transparent 28px, transparent 34px, rgba(0, 0, 0, 0.22) 34px, rgba(0, 0, 0, 0.22) 36px, transparent 36px, transparent 40px ), repeating-linear-gradient( to bottom, transparent 0, transparent 6px, rgba(176, 48, 48, 0.42) 6px, rgba(176, 48, 48, 0.42) 10px, transparent 10px, transparent 14px, rgba(241, 234, 216, 0.30) 14px, rgba(241, 234, 216, 0.30) 16px, transparent 16px, transparent 22px, rgba(176, 48, 48, 0.42) 22px, rgba(176, 48, 48, 0.42) 28px, transparent 28px, transparent 34px, rgba(0, 0, 0, 0.22) 34px, rgba(0, 0, 0, 0.22) 36px, transparent 36px, transparent 40px ); } /* Tartan-only: paint the stripe overlay over the central felt rectangle. The base felt-mid green stays as the background-color so derived tokens (color-mix on felt-mid) keep their fallback shade; the gradient stack sits on top via background-image. Only this palette adds the overlay — other palettes leave .table-shell__felt's single-color background untouched. */ body[data-theme="tartan"] .table-shell__felt { background-image: var(--tartan-pattern); }