/* * Design tokens — single source of truth for all blocks and templates. * Edit ONLY via team agreement (see CLAUDE.md §4 and §12 Decisions log). * * Direction: "Bold Typography" (ENG asset #2, keyword `casinos not on * GamStop`) — poster design translated to the web. Typography is not * decoration here, it is the entire visual language: colour exists to create * contrast, space exists to frame letterforms, and the only ornament allowed * is a rule or a bar. Black, white and ONE accent. Nothing is rounded. * * THIS SKIN INVERTS THE SIBLING ENG SITE ON EVERY AXIS, and that is the point. * `eng-asset` is also English, also UK, also non-GamStop, and can share a SERP * with this one, so separation cannot be a matter of palette: * * eng-asset ("Material You") eng-asset2 (this file) * ───────────────────────────── ───────────────────────────── * light warm ground #FFFBFE near-black ground #0A0A0A * violet #6750A4, white ink on it vermillion #FF3D00, BLACK ink on it * radius 12/24/32/48 + pills radius 0, everywhere, no exceptions * soft elevation shadows no shadows at all — depth is type + rules * tonal surface ladder = structure borders and scale = structure * headings 500, nothing uppercase headings 600, labels uppercase at .1em+ * friendly, adaptive, personal confident, editorial, deliberate * * EVERY PAIR BELOW IS MEASURED (WCAG 2.1 relative luminance), not eyeballed, * and the supplied design system turned out to carry FOUR problems. All four * are recorded where they apply, and the fourth is new to this skin: * * 1. THE SYSTEM'S OWN ACCESSIBILITY SECTION IS WRONG ABOUT ITS SECONDARY * TEXT COLOUR. It states mutedForeground #737373 on the background is * "5.3:1 ✓ (AA)". Measured, it is 4.18 on the page, 4.04 on a card and * 3.67 on the muted surface — i.e. it fails AA for normal text on all * three, and this is the most-used ink in the theme after the body * colour (captions, bylines, table meta, the whole footer). It is * lightened to #A3A3A3 here (7.85 / 7.60 / 6.90). #737373 survives as * --sn-border-strong, where 4.18 is comfortably over the 3:1 that WCAG * 1.4.11 asks of a control edge — so the value is kept, it is simply * used for the job it can actually do. * * 2. WHITE ON THE ACCENT IS 3.40:1 AND MUST NEVER BE USED. Ink on * vermillion is near-black (5.58). This is the exact reverse of the * sibling skin, where On Primary was white, and it is the single easiest * mistake to make when porting a block across — which is why the button * label routes through --sn-btn-ink and nothing sets `color` directly * (CLAUDE.md §12, 2026-08-10). * * 3. --sn-border (#262626) IS 1.31:1. It is a barely-there divider, exactly * as the system describes it, and it is NOT allowed on an input, a * toggle or an outlined button. --sn-border-strong is the only token * permitted on a control edge. Two border tokens, for the third market * running, for the same reason each time. * * 4. THE PRESSED STATE CANNOT DARKEN ON A DARK GROUND, which is the mirror * image of the problem the sibling light skin had. There the design's * lightened press (#8572B6) dropped its label to 4.13:1 and had to * darken instead. Here darkening runs out of room immediately: the * accent one step down is #E03600 (4.43:1 on the page, and 4.43 for its * own near-black label), two steps is #CC3100 (3.78). There is no * headroom below vermillion on black. So the press state goes UP, not * down — and the real press affordance is the design system's own * translate-y-px, which costs no contrast at all. */ /* ---------- Fonts (self-hosted, latin subset) ---------- */ /* * TWO families, 85KB, and both earn it. * * Inter Tight is the whole page: display and body alike. It is Inter drawn on * a narrower advance with tighter default sidebearings, which is precisely * what a system built on -0.04em to -0.06em display tracking needs — setting * ordinary Inter that tight closes its counters and the headline turns to * mud. Read from fvar, not assumed: wght 100–900, one axis. * * JetBrains Mono carries labels, statistics, the section indices and the * calculator's figures. This is the one place this network has ever shipped a * mono, and it is not decoration: the design system reserves monospace for * "labels, stats, technical details", and on a page whose job is to publish * numbers a reader can check — turnover, RTP, play time, cost per hour — a * tabular face is the honest way to set them. wght 100–800, one axis. * * WEIGHTS: 400 body, 500 labels, 600 headings and buttons. The system forbids * anything under 400. NOTE THE CEILING — JetBrains Mono stops at 800, so a * rule asking for 900 in mono silently renders 800; nothing does, and nothing * should start. * * "Bold Typography" IS NOT A WEIGHT INSTRUCTION. The drama in this system * comes from SCALE and TRACKING (a 6:1 ratio between H1 and body), not from * stroke thickness. Headings are 600. At 80px a 700 or 800 heading closes its * apertures and reads heavier but smaller, which is the opposite of the goal. * * PLAYFAIR DISPLAY IS DELIBERATELY NOT SHIPPED. The system lists it "for pull * quotes and testimonials only" and this theme has neither — no block renders * a pull quote and Michael has no component to put one in. It would be ~30KB * on every page for zero consumers. If a pull-quote block is ever built, add * the face in the same commit as the block, not before. * * SUBSET: Google's "latin". Verified against both files with fontTools rather * than assumed — £ (U+00A3), the en/em dashes, curly quotes, U+00A0, € and ™ * are all present, which is everything an en-GB site sets. * * WHAT NEITHER FACE CARRIES, and this has now been true of every font this * network has shipped: ✓ (U+2713), ✗, ⚠, ★, ℹ and ○ (U+25CB) are absent. * Symbols are therefore drawn as INLINE SVG — stroke, never fill, at 1.5px * per the system's iconography rules — so they cannot fall back to whatever * the OS supplies and arrive at a different size and weight per platform. */ @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-tight-vf.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../fonts/jetbrains-mono-vf.woff2') format('woff2'); } /* ---------- Tokens ---------- */ :root { /* SURFACES. Three near-blacks, and the steps between them are deliberately almost invisible (1.14:1 and 1.31:1 apart) — in this system a card is not a tonal step, it is a RULE and a change of type. The sibling skin built its entire structure from tonal separation; this one is forbidden from doing that, which is why the borders below carry real weight. bg page ground — near-black, never #000 surface cards, panels (system: card #0F0F0F) surface-2 recessed: inputs, tiles, table bands (system: muted #1A1A1A) */ --sn-bg: #0A0A0A; --sn-surface: #0F0F0F; --sn-surface-2: #1A1A1A; /* Legacy container slots. Blocks across the theme reference these by name from the MD3 era; they are kept defined so nothing breaks, and they now resolve into the two-colour system rather than inventing a second hue. THERE IS NO SECOND BRAND COLOUR IN THIS SKIN — the design system allows "black, white, and one accent, maybe two" and this build takes one. Any consumer that used to reach for a tertiary now degrades to plain white, which is the correct answer here rather than a colour nobody chose. */ --sn-secondary-container: #1A1A1A; --sn-on-secondary-container: #FAFAFA; /* 16.67 on it */ --sn-tertiary: #FAFAFA; /* no second hue — see above */ --sn-tertiary-container: #1A1A1A; --sn-on-tertiary-container: #FAFAFA; /* RULES. Two tokens, and the distinction is load-bearing (note 3). --sn-border-thick is the accent underline weight the system specifies for interactive affordances; it is a token because eleven stylesheets would otherwise each pick their own 2 or 3px. */ --sn-border: #262626; /* hairline dividers only — 1.31 on page */ --sn-border-strong: #737373; /* control edges — 4.18 / 4.04 / 3.67 */ --sn-border-w: 1px; --sn-border-thick: 2px; /* TEXT. Warm white, never #FFF — the system's own foreground. */ --sn-heading: #FAFAFA; /* 18.97 page / 18.36 card / 16.67 recessed */ --sn-text: #FAFAFA; --sn-text-muted: #A3A3A3; /* 7.85 / 7.60 / 6.90 — see note 1 */ /* THE ACCENT. Vermillion: warm, urgent, and the only chromatic thing on the page. Spent on links, on the section indices, on the underline that marks anything interactive, and on the one filled control. Used anywhere else it stops meaning "this is the important one". Legacy names (--sn-primary-dark, --sn-pink) are kept because block stylesheets reference them; what changed is what they resolve to. --sn-primary-dark has ALWAYS meant "the ink that sits ON primary" and it means it here too — it is just black now instead of white. */ --sn-primary: #FF3D00; /* 5.58 page / 5.40 card / 4.91 recessed */ --sn-primary-hover: #FE5926; /* BRIGHTER — 6.29. See below. */ --sn-primary-press: #FE6C3E; /* brighter still — 7.00. See note 4. */ --sn-primary-dark: #0A0A0A; /* ink ON the accent — 5.58 */ --sn-btn-ink: #0A0A0A; /* button label routes through THIS, never `color` — CLAUDE.md §12 2026-08-10 */ --sn-accent: #FF3D00; --sn-pink: #FAFAFA; /* legacy second-accent slot — no second hue */ /* HOVERS BRIGHTEN AGAIN. The sibling skin's rule was "hovers deepen", which is a LIGHT-page rule: on a light ground a lighter link fades into the page. Back on black the direction flips for the third time in this network's history, so treat any hover value inherited from eng-asset as wrong until it has been re-measured. */ /* STATE LAYERS. Neutral, not accent-tinted: colour is rationed in this system and a table row does not deserve any. A white wash at 6%/10% over the ground reads as a lift without introducing a hue. */ --sn-state-hover: color-mix(in srgb, var(--sn-heading) 6%, transparent); --sn-state-press: color-mix(in srgb, var(--sn-heading) 10%, transparent); /* Chrome (header/footer) — legacy names from the era when the chrome was a coloured bar. It is not one here: the header is the page ground with a hairline under it, and the footer is the page ground with a hairline over it. Structure comes from the rule, not from a band of colour. */ --sn-purple: #0A0A0A; --sn-purple-2: #0A0A0A; --sn-purple-deep: #0A0A0A; /* footer ground */ --sn-on-chrome: #FAFAFA; /* SEMANTIC (callouts). All four are inks first — 6.16 to 11.86 on the page — because on a near-black ground a tinted panel is nearly invisible and the ICON has to carry the state. DANGER IS ROSE, NOT RED, ON PURPOSE. The obvious #FF5A4D sits four degrees of hue from the vermillion accent, and the previous dark skin in this network shipped exactly that mistake: its semantic colours collapsed into its accent and "warning" stopped being distinguishable from "this is a link". As always, state is NEVER signalled by colour alone — the icon and the heading do that work. */ --sn-info: #4DA3FF; /* 7.54 page / 7.30 card */ --sn-tip: #4ADE80; /* 11.36 / 11.00 */ --sn-warning: #FBBF24; /* 11.86 / 11.48 */ --sn-danger: #FF4D6D; /* 6.16 / 5.96 */ /* Tints, derived so a retint propagates (2026-07-16 decision). At 10% over the page they resolve to #111922 / #101F16 / #221C0D / #221211, on which --sn-text reads 16.2–17.3 and --sn-text-muted 6.7–7.2. */ --sn-info-tint: color-mix(in srgb, var(--sn-info) 10%, transparent); --sn-tip-tint: color-mix(in srgb, var(--sn-tip) 10%, transparent); --sn-warning-tint: color-mix(in srgb, var(--sn-warning) 10%, transparent); --sn-danger-tint: color-mix(in srgb, var(--sn-danger) 10%, transparent); --sn-primary-tint: color-mix(in srgb, var(--sn-primary) 10%, transparent); /* TYPOGRAPHY — the system's scale, verbatim from xs to 9xl. ONE DELIBERATE DEVIATION, and it is the same one every market in this network has made: the system's body is 16px, which is a marketing-page size. These are 2000–3000-word articles, so --sn-fs-md (18px) is the article body and --sn-fs-base keeps the true 16px for controls, chips and table cells. Everything above 2rem is poster scale and is opt-in. */ --sn-font: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --sn-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --sn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sn-fs-xs: .75rem; /* 12 — fine print, the uppercase label */ --sn-fs-sm: .875rem; /* 14 — captions, button text */ --sn-fs-base: 1rem; /* 16 — controls, table cells */ --sn-fs-md: 1.125rem; /* 18 — ARTICLE BODY (see above) */ --sn-fs-lead: 1.25rem; /* 20 — lead paragraphs, section intros */ --sn-fs-lg: 1.5rem; /* 24 — h3 */ --sn-fs-xl: 2rem; /* 32 — h2 floor */ --sn-fs-2xl: 2.5rem; /* 40 — h2 ceiling */ --sn-fs-3xl: 3.5rem; /* 56 — h1 mobile ceiling */ --sn-fs-4xl: 4.5rem; /* 72 — h1 tablet */ --sn-fs-5xl: 6rem; /* 96 — h1 desktop, hero statement */ --sn-fs-6xl: 10rem; /* 160 — decorative numerals only, never text */ /* TRACKING. The system's whole signature in two directions at once: display type is pulled tight, labels are pushed wide. Nothing is left at the font's default. */ --sn-tracking-tighter: -.06em; /* display headlines */ --sn-tracking-display: -.04em; /* large headings */ --sn-tracking-body: -.01em; /* body — slightly tightened */ --sn-tracking-wide: .05em; /* small labels */ --sn-tracking-label: .1em; /* ALL-CAPS labels, buttons */ --sn-tracking-widest: .2em; /* sparse emphasis, the eyebrow */ /* LINE HEIGHT. Single-line display type sits at 1 — it is set as a shape, not as a paragraph. Body goes the other way for long-form reading. */ --sn-lh-display: 1; /* one-line headlines */ --sn-lh-heading: 1.1; /* multi-line headlines */ --sn-lh-compact: 1.25; /* subheads, chips, buttons */ --sn-lh-body: 1.6; --sn-lh-relaxed: 1.75; /* long-form prose */ /* Spacing scale (multiples of 4). The system's sections are py-20 to py-40 — 80px to 160px — which is what sp-24 and sp-32 are for. */ --sn-sp-1: .25rem; --sn-sp-2: .5rem; --sn-sp-3: .75rem; --sn-sp-4: 1rem; --sn-sp-6: 1.5rem; --sn-sp-8: 2rem; --sn-sp-12: 3rem; --sn-sp-16: 4rem; --sn-sp-24: 6rem; --sn-sp-32: 8rem; /* SHAPE — ZERO. "No border-radius anywhere. Sharp edges only." The token NAMES are legacy and are kept because 21 block stylesheets reference them; every one of them resolves to 0 here, including --sn-radius-pill. Nothing in this skin is a pill, a capsule or a rounded card, and a single 4px radius reintroduced anywhere is the first thing that would make this page read as a generic dark theme. The circular avatars and number discs inherited from the sibling skin were squared off in the same pass — grep for `50%` before adding one. */ --sn-radius-sm: 0; --sn-radius: 0; --sn-radius-lg: 0; --sn-radius-xl: 0; --sn-radius-pill: 0; /* ELEVATION — NONE. Depth in this system comes from three things and no others: layered type (large muted text behind bright text), accent underlines, and full-width rules. The tokens stay defined so the stylesheets that reference them keep parsing; they all resolve to `none`, so a block that "adds a shadow" adds nothing and the omission is visible in review rather than silently shipping a soft card. */ --sn-shadow: none; --sn-shadow-md: none; --sn-shadow-lg: none; --sn-glow: none; /* MOTION. "Fast and decisive. No bouncy easing. No playful delays." 150ms micro-interactions, 200ms standard, 500ms for the one image hover. The easing is the system's own fast-out/crisp-stop curve. Every consumer must still answer prefers-reduced-motion. */ --sn-motion-fast: 150ms; --sn-motion: 200ms; --sn-motion-slow: 500ms; --sn-ease: cubic-bezier(.25, 0, 0, 1); /* LAYOUT. --sn-container IS 1320px, NOT the design system's 1200px, and that is a deliberate reversal (Andy, 2026-08-19, after looking at the list on a desktop). 1200px plus the system's own 64px container padding leaves 1072px of usable width, and the casino grid's auto-fill floor of 280px then yields THREE columns where the sibling skin fitted FOUR. Losing a column on the money block is a layout regression the poster styling does not pay for. The grid geometry now matches the sibling exactly. --sn-content DROPPED FROM 820px TO 720px and that is a typographic decision, not a tidy-up: at 18px Inter Tight, 820px runs to roughly 90 characters a line, and this system asks for constrained measures (max-w-2xl) precisely because a poster-scale headline over a 90-character paragraph looks like two unrelated designs. 720px is ~80 characters. The image dimensions in img-prompt.md are derived from this number — change one and the other is wrong. */ --sn-container: 1320px; --sn-container-wide: 95vw; --sn-content: 720px; }