/* ========================================================================== XXXGames - design tokens ========================================================================== The single source of truth for colour, geometry, type, elevation and motion. Everything else (styles.css, play-page.css, page-level CSS) should read these instead of hard-coding values. LOAD ORDER (important): bootstrap.min.css -> tokens.css -> styles.css -> page CSS tokens.css has to come after Bootstrap (it overrides Bootstrap's own custom properties) and before the site stylesheets (so they can consume it). THEMES: default, "Plum Noir" "Paper Lilac" Dark is declared in :root, so a page that never sets the attribute still gets the dark palette. COLOUR MODEL: Every neutral/accent is declared as an "R G B" channel triple first, then the usable colour is derived with rgb(var(--x-rgb)) / rgb(var(--x-rgb) / 0.5). That is what makes translucent layers, gradients and ambience possible without a second copy of the value or color-mix() support. RULES THE PALETTE ENCODES (see _theme-lab.html for the measured proof): 1. Red is IDENTITY ONLY (logo, live/new signal, danger). Never a border, never body text, never the primary action. 2. Exactly ONE action colour (--xg-action) for primary buttons, links and focus. Cyan is chosen deliberately: every cover art sampled in this niche is warm red/pink/coral, so a red CTA competes with the artwork. 3. Media surfaces (--xg-media-*) stay dark in BOTH themes. Bright chrome around a dark video reads as broken. 4. Depth comes from surface STEPS + hairlines in dark (shadows are invisible on dark) and from SHADOWS in light. 5. Disabled ink is exempt from WCAG 1.4.3 and is allowed to fail 4.5:1. ========================================================================== */ /* ========================================================================== 1. COLOUR - DARK (default) ========================================================================== */ :root { /* --- surfaces: one violet-tinted ramp, three usable steps + a canvas pair --- */ --xg-canvas-rgb: 11 9 18; --xg-canvas-2-rgb: 16 13 26; --xg-canvas: rgb(var(--xg-canvas-rgb)); --xg-canvas-2: rgb(var(--xg-canvas-2-rgb)); --xg-surface-1-rgb: 21 18 31; /* panel */ --xg-surface-2-rgb: 27 23 39; /* raised: tile, chip, bar */ --xg-surface-3-rgb: 35 32 51; /* hover, selected, focus-within */ --xg-surface-1: rgb(var(--xg-surface-1-rgb)); --xg-surface-2: rgb(var(--xg-surface-2-rgb)); --xg-surface-3: rgb(var(--xg-surface-3-rgb)); --xg-inset-rgb: 10 8 18; /* wells: input, code, media box */ --xg-inset: rgb(var(--xg-inset-rgb)); /* --- ink: 3 text roles + disabled + on-media --- */ --xg-ink-1-rgb: 244 242 248; /* 17.8:1 on canvas */ --xg-ink-2-rgb: 189 184 204; /* 10.3:1 */ --xg-ink-3-rgb: 146 140 166; /* 6.1:1 - metadata still passes AA */ --xg-ink-1: rgb(var(--xg-ink-1-rgb)); --xg-ink-2: rgb(var(--xg-ink-2-rgb)); --xg-ink-3: rgb(var(--xg-ink-3-rgb)); --xg-ink-disabled: #5f5973; /* exempt (1.4.3): never use for information */ --xg-ink-on-media: rgba(255, 255, 255, 0.92); /* --- lines: one hairline + one emphasis, both tinted like the ink --- */ --xg-hairline: 1px; --xg-line-rgb: 236 232 255; --xg-line-alpha: 0.10; --xg-line-alpha-strong: 0.18; --xg-line: rgb(var(--xg-line-rgb) / var(--xg-line-alpha)); --xg-line-strong: rgb(var(--xg-line-rgb) / var(--xg-line-alpha-strong)); /* --- glass: the ONLY two surfaces allowed to be translucent --- */ --xg-glass-rgb: 14 4 22; --xg-glass-alpha: 0.78; --xg-glass: rgb(var(--xg-glass-rgb) / var(--xg-glass-alpha)); --xg-glass-blur: 16px; /* --- brand: identity + danger, never decoration --- */ --xg-brand-rgb: 255 59 92; --xg-brand: rgb(var(--xg-brand-rgb)); --xg-brand-soft: rgb(var(--xg-brand-rgb) / 0.14); /* --- action: the one interactive colour --- */ --xg-action-rgb: 13 202 240; --xg-action: rgb(var(--xg-action-rgb)); --xg-action-to: #0a9ec0; /* gradient end stop */ --xg-action-hover: #3adcff; --xg-action-ink: #04161d; /* 9.4:1 on the fill - AA at any size */ --xg-action-text: rgb(var(--xg-action-rgb)); /* the action used AS text/border. On a dark canvas the cyan itself passes (9.4:1), so light is the only theme that needs a separate value - see below. */ --xg-action-soft: rgb(var(--xg-action-rgb) / 0.14); /* --- semantic --- */ --xg-success: #3dd68c; --xg-warn: #f5b84a; --xg-danger: #ff4d6d; --xg-focus: rgb(var(--xg-action-rgb)); /* --- per-game ambience: THE ONLY THREE TOKENS THAT VARY PER PAGE --- The defaults below are the SITE's own accent pair (the pink/violet glow the site already used), so every page that does not opt into cover colours still looks like the product. A play page overrides all three with its cover art, NORMALISED for the theme: dark lifts lightness into 58-68% keeping relative saturation, light drops it into 34-46% so the accent also works as ink/border on white. The page generator writes those three lines; see _theme-lab.html section 5. */ --xg-tint-a: 244 96 168; /* brand pink */ --xg-tint-b: 139 92 246; /* brand violet */ --xg-tint-deep: 26 16 34; /* deep plum wash for the top of the canvas */ --xg-ambience-a: 0.22; /* how strongly the page backdrop is tinted */ --xg-ambience-b: 0.18; --xg-ambience-c: 0.10; /* top-of-page canvas tone: keeps the deep cover tone in dark, light paper in light */ --xg-canvas-top: rgb(var(--xg-tint-deep) / 0.55); /* --- media: fixed dark, both themes --- */ --xg-media-bg: #08060d; --xg-media-scrim: linear-gradient(to top, rgba(6, 4, 10, 0.92) 0%, rgba(6, 4, 10, 0.35) 45%, rgba(6, 4, 10, 0.10) 72%); /* --- elevation: dark mode leans on steps + hairlines, shadows are subtle --- */ --xg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --xg-shadow-2: 0 14px 36px rgba(0, 0, 0, 0.55); --xg-shadow-3: 0 24px 60px rgba(0, 0, 0, 0.65); --xg-ring: 2px; --xg-ring-offset: 2px; } /* ========================================================================== 2. COLOUR - LIGHT ("Paper Lilac") ========================================================================== */ [data-bs-theme="light"] { --xg-canvas-rgb: 247 245 251; --xg-canvas-2-rgb: 240 237 247; --xg-surface-1-rgb: 255 255 255; --xg-surface-2-rgb: 251 249 254; --xg-surface-3-rgb: 241 237 249; --xg-inset-rgb: 237 233 246; --xg-ink-1-rgb: 26 20 41; /* 16.5:1 */ --xg-ink-2-rgb: 75 68 96; /* 8.5:1 */ --xg-ink-3-rgb: 108 102 131; /* 5.0:1 on white, 4.7:1 on s3 - still AA */ --xg-ink-disabled: #a9a4b8; --xg-line-rgb: 28 20 48; --xg-line-alpha: 0.10; --xg-line-alpha-strong: 0.18; --xg-glass-rgb: 255 255 255; --xg-glass-alpha: 0.94; --xg-brand-rgb: 196 30 63; /* 5.8:1 on white */ --xg-brand-soft: rgb(var(--xg-brand-rgb) / 0.10); --xg-action-rgb: 25 184 214; --xg-action-to: #0a8fa8; /* #04161d ink measures 4.84:1 on this stop (AA) */ --xg-action-hover: #0fa3c0; /* cyan is only 2.37:1 on a light canvas, so as TEXT or a border the action has to be the deep teal instead: 5.81:1 on white, 5.4:1 on the canvas */ --xg-action-text: #0a6f83; --xg-success: #0f7a5a; --xg-warn: #8a5a00; --xg-danger: #c2294a; --xg-focus: #0a6f83; /* a focus ring is a non-text boundary (3:1), but 5.37:1 is free here */ /* same hues, normalised for a light canvas: usable as ink/border on white */ --xg-tint-a: 190 24 93; --xg-tint-b: 109 40 217; --xg-ambience-a: 0.08; --xg-ambience-b: 0.10; --xg-ambience-c: 0.05; --xg-canvas-top: #faf8fd; /* depth is carried by shadows here, because surface steps are barely visible */ --xg-shadow-1: 0 1px 2px rgba(28, 20, 48, 0.06); --xg-shadow-2: 0 1px 2px rgba(28, 20, 48, 0.06), 0 10px 28px rgba(28, 20, 48, 0.10); --xg-shadow-3: 0 2px 4px rgba(28, 20, 48, 0.06), 0 24px 60px rgba(28, 20, 48, 0.14); } /* ========================================================================== 3. GEOMETRY ========================================================================== */ :root { --xg-radius-sm: 8px; --xg-radius-md: 12px; --xg-radius-lg: 18px; --xg-radius-pill: 50rem; --xg-space-1: 4px; --xg-space-2: 8px; --xg-space-3: 12px; --xg-space-4: 16px; --xg-space-5: 24px; --xg-space-6: 32px; --xg-space-7: 48px; /* layout */ --xg-shell: 1200px; --xg-rail: 120px; /* desktop page padding that clears the side rail / right edge */ --xg-page-pad: 64px; --xg-nav-h: 76px; /* overwritten per page from the measured navbar height */ --xg-z-rail: 20; --xg-z-bar: 30; --xg-z-mobile-bar: 40; --xg-z-modal: 1000; } /* ========================================================================== 4. TYPE ========================================================================== */ :root { --xg-font-display: var(--font-display, 'Orbitron', system-ui, sans-serif); --xg-font-body: var(--font-body, system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif); --xg-text-xs: 0.75rem; /* labels, flags, spec keys */ --xg-text-sm: 0.8125rem; /* metadata */ --xg-text-tile: 0.95rem; /* tile titles: body font, NOT the display font */ --xg-text-bar: 1.0625rem; /* section bar label */ --xg-text-body: 1rem; --xg-text-h2: 1.35rem; --xg-text-h1: clamp(1.45rem, 2.6vw, 1.95rem); --xg-leading-prose: 1.75; --xg-tracking-label: 0.02em; --xg-tracking-wide: 0.08em; } /* ========================================================================== 5. MOTION ========================================================================== */ :root { --xg-dur-fast: 150ms; --xg-dur-base: 220ms; --xg-ease: cubic-bezier(0.2, 0.7, 0.3, 1); } @media (prefers-reduced-motion: reduce) { :root { /* tokens carry the preference, so every component that uses them opts out */ --xg-dur-fast: 1ms; --xg-dur-base: 1ms; } } /* ========================================================================== 6. BOOTSTRAP BRIDGE Bootstrap 5.3 drives most of its components from --bs-* custom properties, so bridging the neutral ones here re-skins Bootstrap itself with no override rules. Load order matters: this file must come after bootstrap.min.css. Deliberately NOT bridged: --bs-danger / --bs-primary / --bs-success, because Bootstrap's semantic names do not match ours (the site uses .btn-danger for its brand CTA). Those are handled in xg-theme.css where the change is opt-in. ========================================================================== */ :root, [data-bs-theme="dark"], [data-bs-theme="light"] { --bs-body-bg: var(--xg-canvas); --bs-body-color: var(--xg-ink-1); --bs-secondary-color: var(--xg-ink-2); --bs-tertiary-color: var(--xg-ink-3); --bs-emphasis-color: var(--xg-ink-1); --bs-border-color: var(--xg-line); --bs-border-color-translucent: var(--xg-line); --bs-heading-color: var(--xg-ink-1); --bs-link-color: var(--xg-action); --bs-link-hover-color: var(--xg-action-hover); --bs-focus-ring-color: rgb(var(--xg-action-rgb) / 0.45); --bs-body-font-family: var(--xg-font-body); --bs-border-radius: var(--xg-radius-md); --bs-border-radius-lg: var(--xg-radius-lg); --bs-border-radius-sm: var(--xg-radius-sm); } /* ========================================================================== 7. LEGACY ALIASES (temporary - delete when migration finishes) The redesign prototype uses --rd-*, the colour lab uses --c-*. Aliasing them here means those two files (and any page mid-migration) pick up the tokens from one place instead of carrying their own copies. ========================================================================== */ :root { /* prototype / redesign names */ --rd-canvas: var(--xg-canvas-rgb); --rd-canvas-2: var(--xg-canvas-2-rgb); --rd-bg: var(--xg-canvas); --rd-bg-2: var(--xg-canvas-2); --rd-s1: var(--xg-surface-1); --rd-s2: var(--xg-surface-2); --rd-s3: var(--xg-surface-3); --rd-line: var(--xg-line); --rd-line-strong: var(--xg-line-strong); --rd-ink: var(--xg-ink-1); --rd-ink-2: var(--xg-ink-2); --rd-ink-3: var(--xg-ink-3); --rd-cover: var(--xg-tint-a); --rd-cover-2: var(--xg-tint-b); --rd-cover-deep: var(--xg-tint-deep); --rd-cta: var(--xg-action); --rd-cta-2: var(--xg-action-to); --rd-cta-ink: var(--xg-action-ink); --rd-r-sm: var(--xg-radius-sm); --rd-r-md: var(--xg-radius-md); --rd-r-lg: var(--xg-radius-lg); --rd-sp-1: var(--xg-space-1); --rd-sp-2: var(--xg-space-2); --rd-sp-3: var(--xg-space-3); --rd-sp-4: var(--xg-space-4); --rd-sp-5: var(--xg-space-5); --rd-sp-6: var(--xg-space-6); --rd-sp-7: var(--xg-space-7); --rd-fs-h1: var(--xg-text-h1); --rd-fs-h2: var(--xg-text-bar); --rd-fs-h3: var(--xg-text-tile); --rd-fs-body: var(--xg-text-body); --rd-fs-sm: var(--xg-text-sm); --rd-fs-xs: var(--xg-text-xs); --rd-shadow-1: var(--xg-shadow-1); --rd-shadow-2: var(--xg-shadow-2); --rd-nav-h: var(--xg-nav-h); /* colour lab names */ --c-canvas: var(--xg-canvas); --c-canvas-2: var(--xg-canvas-2); --c-s1: var(--xg-surface-1); --c-s2: var(--xg-surface-2); --c-s3: var(--xg-surface-3); --c-inset: var(--xg-inset); --c-ink: var(--xg-ink-1); --c-ink-2: var(--xg-ink-2); --c-ink-3: var(--xg-ink-3); --c-ink-off: var(--xg-ink-disabled); --c-line: var(--xg-line); --c-line-strong: var(--xg-line-strong); --c-brand: var(--xg-brand); --c-brand-soft: var(--xg-brand-soft); --c-action: var(--xg-action); --c-action-to: var(--xg-action-to); --c-action-hover: var(--xg-action-hover); --c-action-ink: var(--xg-action-ink); --c-action-soft: var(--xg-action-soft); --c-success: var(--xg-success); --c-warn: var(--xg-warn); --c-danger: var(--xg-danger); --c-focus: var(--xg-focus); --c-shadow: var(--xg-shadow-2); --c-shadow-sm: var(--xg-shadow-1); --tint-a: rgb(var(--xg-tint-a)); --tint-b: rgb(var(--xg-tint-b)); }