/* ============================================================ tokens.css — the ONLY file that defines color values. Everything else references var(--…). Two themes: :root → Light (Sands of Time by day) :root[data-theme=dark]→ Night at the beach ============================================================ */ :root { /* ---------- Ground / Neutrals — warm sand ---------- */ --ground: #F5EBD3; --ground-2: #EFE0BF; --surface: #FDF6E4; /* card / panel background */ --surface-2: #EAD9B1; /* muted surface */ --ink: #2B1E12; /* primary text */ --ink-2: #5B4530; /* secondary text */ --muted: #8B735B; /* tertiary text / captions */ --border: #E1CFA6; --border-strong: #C8B27F; /* ---------- Primary accents ---------- */ --ocean: #2C7C8E; --ocean-deep: #1B5A69; --ocean-soft: #D5EBEE; --sun: #E68A2E; --sun-deep: #B96A1A; --sun-soft: #FBE4C8; /* ---------- Start-up org status pill ---------- Deliberately NOT one of the four cluster hues — a start-up is a status, not a twelfth cluster. Warm like the sun accent, but the ink is darker than --sun-deep so 11px bold clears 4.5:1 on the soft fill (--sun-deep itself only reaches 3.3:1 there). */ --startup-soft: #FBE4C8; --startup-ink: #8A4A0C; --startup-edge: #E68A2E; /* ---------- Category accents ---------- */ --blue: #4285F4; --blue-ink: #1A56CB; --blue-soft: #E3ECFD; --red: #EA4335; --red-ink: #B21E10; --red-soft: #FCE0DE; --yellow: #EFB100; --yellow-ink: #7E5B00; --yellow-soft: #FCEEC1; --green: #34A853; --green-ink: #1B7A38; --green-soft: #DAEEDF; /* ---------- Compass ---------- */ --compass-face: #B8A576; --compass-tick: #C8B27F; /* ============================================================ THE XAVIER CUP — pitch green, trophy gold, floodlit white. Defined in BOTH skins on purpose: the Cup tab keeps its own identity whichever design the visitor has chosen. Everything world-cup-shaped reads from these and nothing else. ============================================================ */ --cup-green: #0E7A43; --cup-green-dk: #0A5B32; --cup-green-lt: #1E9A58; --cup-green-soft: #DDF0E4; --cup-gold: #EFB100; --cup-gold-dk: #B98604; --cup-gold-lt: #FBD96B; --cup-gold-soft: #FCEFCF; --cup-navy: #10243A; --cup-line: rgba(255, 255, 255, 0.88); --cup-ink-on: #FFFFFF; /* text on green */ /* Hero stadium bands */ --cup-sky-top: #7FC8EA; --cup-sky-mid: #A6DCF1; --cup-sky-bot: #D7F0F7; --cup-stand-back: #23415C; --cup-stand-mid: #2F5578; --cup-stand-front:#3C6A92; --cup-crowd: rgba(255, 255, 255, 0.55); --cup-hoarding: #0C3A6B; --cup-pitch-1: #2F9E5B; /* mow stripe A */ --cup-pitch-2: #268A50; /* mow stripe B */ --cup-pitch-3: #1C7042; /* far edge, fading to the page */ --cup-mast: #35506B; --cup-glow: rgba(255, 248, 214, 0.55); --cup-shadow: rgba(8, 40, 24, 0.28); /* ---------- Sea scene (five ocean layers, foam, wet sand) ---------- */ --sea-foam: #FFFFFF; --sea-foam-soft: #E8F5F8; --sea-1: #7CC4D6; --sea-2: #3E9FB8; --sea-3: #1F6E88; --sea-4: #0F4E68; --sea-5: #082F41; --sand-wet: #D9B87E; --sea-sky: transparent; /* night sky overlay */ /* ---------- Sailboat / bird / creature accents ---------- */ --boat-sail: #FDF6E4; --boat-sail-red: #EA4335; --boat-hull: #B96A1A; --boat-flag: #EFB100; --bird-line: #2B1E12; /* ---------- Hourglass ---------- */ --glass-wood: #8B5A2B; --glass-wood-dk: #5B3F1F; --glass-wood-lt: #A0703E; --glass-body: #FDF6E4; --glass-shine: #FFFFFF; --glass-sand: #E68A2E; --glass-grain: #F4B400; /* ---------- Elevation shadow ---------- */ --shadow-sm: 0 2px 8px rgba(80,50,20,0.08); --shadow-md: 0 6px 18px rgba(80,50,20,0.09); --shadow-lg: 0 14px 40px rgba(80,50,20,0.14); --shadow-modal: 0 30px 80px rgba(30,20,10,0.35); /* ---------- Radii ---------- */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 30px; --radius-pill: 999px; /* ---------- Spacing rhythm ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---------- Layout ---------- */ --nav-h: 68px; --nav-h-mob: 60px; --content-max: 1200px; --content-max-mob: 380px; /* ---------- Focus ring ---------- */ --focus-ring: 0 0 0 3px rgba(44,124,142,0.45); /* ---------- Typography stacks (per DESIGN.md — system-font strategy) ---------- */ --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-script: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive; --font-body: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: Consolas, "SF Mono", Menlo, monospace; /* ============================================================ LANDING HERO SCENE — bright cel-shaded palette. Scoped to .screen--landing .hero-scene so the rest of the site keeps its Sands-of-Time neutrals + night-beach dark. ============================================================ */ --scene-sky-top: #A8DDF0; --scene-sky-mid: #BFE6F5; --scene-sky-bot: #D4EFF7; --scene-cloud: #FFFFFF; --scene-hill: #4A9088; /* used at 0.55 opacity */ --scene-sea-deep: #2E9BC4; /* at the horizon (far) */ /* --- Venue map: the printed org-fair map's own colour key. These are the colours students see on the paper map, so they are deliberately NOT the four cluster hues. --- */ --venue-field: #E7F5E3; /* the quad */ --venue-field-line: #9CC49A; --venue-building: #A89078; /* Chapel / SBM / Eng / Faber */ --venue-building-ink: #FFFFFF; --venue-tent: #FFFFFF; /* the three marquee circles */ --venue-stage: #16161A; --venue-pin-ink: #FFFFFF; /* tent number on the lit square */ --venue-pin-halo: rgba(0,0,0,0.55); --vz-tech: #16161A; --vz-csg-aeco: #4B2FD6; --vz-media: #F02C8C; --vz-engineering: #8B1A1A; --vz-cas: #E62020; --vz-aggies: #63C463; --vz-sbm: #F5C43C; --vz-nursing: #AECBF0; --vz-compstud: #7C8894; --vz-soe: #12468C; --vz-sports: #B45CE8; --vz-service: #D2820E; --vz-faith: #46D6BE; --vz-socio: #F8A6A6; --vz-environment: #1E6B25; --vz-sci-eng-tech: #8C3E6B; --scene-sea-mid: #3FAEBE; --scene-sea-shallow: #B8ECE8; /* at the shore (near) */ --scene-water-1: #7FD8D0; /* back wave (lightest) */ --scene-water-2: #5EC5C1; /* middle wave */ --scene-water-3: #4FB8B4; /* front wave (darkest) */ --scene-water-shim: #E8FBFA; /* thin reflection strokes */ --scene-foam: #F5EAD0; /* foam edge cream */ --scene-foam-hi: #FFFFFF; /* foam blink highlight */ --scene-sand-wet: #E8C48C; /* damp sand just past the surf */ --scene-sand-top: #F0D19A; --scene-sand-bot: #E0B070; --scene-sand-dark: #B8863E; /* buried edge / footprints */ --scene-moon: transparent; /* no moon by day */ --scene-moon-glow: transparent; --scene-moon-crater: transparent; --scene-star-dot: transparent; /* Wood + glass for the hero hourglass */ --scene-wood: #8B6B4A; --scene-wood-dk: #3D2817; --scene-wood-lt: #A88564; --scene-glass: #E8F5F5; --scene-glass-stroke: #3D2817; --scene-hg-sand-lt: #E5B87A; --scene-hg-sand-dk: #B8863E; /* Wordmark colors */ --scene-word-orange: #E8823A; --scene-word-cream: #FFF8E7; --scene-word-stroke: #3D2817; --scene-tagline-fill: #FFF8E7; --scene-tagline-stroke: #E8823A; /* Body copy sitting directly on the scene */ --scene-ink: #4A3520; --scene-ink-warm: #5A3F1E; --scene-ink-muted: #6B5232; --scene-ink-halo: rgba(255, 248, 231, 0.75); /* Palm fronds */ --scene-frond: #5FA850; --scene-frond-hi: #7BC26C; --scene-frond-stem: #2E5028; /* Chip + search + card on bright background */ --scene-chip-bg: #FFFFFF; --scene-chip-ink: #3D2817; --scene-search-btn: #1F6B6B; --scene-card-cream: #FFF8E7; /* Beach accent colors (cel-shaded, dark-outlined) */ --scene-shell-1: #F5D0BE; --scene-shell-2: #F4B8A0; --scene-star: #E68A2E; --scene-star-dk: #B96A1A; --scene-crab: #EA4335; --scene-crab-dk: #B21E10; /* ============================================================ MATCH ROLES — used by the team picker, match cards, featured match and calendar, which all three designs share. They point at each design's own accents, so World Cup and Sands of Time pick them up with no extra rules. The Xavier Cup 2026 design sets them directly (bottom of this file). ============================================================ */ --tx-tile: var(--ocean-deep); --tx-tile-ink: #FFFFFF; --tx-tile-muted: rgba(255, 255, 255, 0.78); --tx-tile-line: rgba(255, 255, 255, 0.18); --tx-tile-wash: rgba(255, 255, 255, 0.08); --tx-accent: var(--sun); --tx-on-accent: var(--ink); --tx-primary: var(--ocean); --tx-on-primary: #FFFFFF; --tx-on-primary-hi: #FFFFFF; --tx-live: var(--red-ink); --tx-on-live: #FFFFFF; --tx-final: var(--yellow); --tx-on-final: var(--ink); --tx-scorebox: var(--surface-2); --tx-glow: transparent; /* ============================================================ CAMPUS MAP — the Xavier Cup's drawing of the campus. Every value is built from the tokens above rather than given a colour of its own, so all three designs and both themes colour the map with no extra rules: the grounds take the Cup's soft green, buildings the muted surface, and the sports venues the four site hues. Pitch lines stay chalk-white. ============================================================ */ --campus-ground: var(--surface-2); --campus-land: color-mix(in srgb, var(--cup-green-soft) 72%, var(--surface)); --campus-land-edge: color-mix(in srgb, var(--cup-green) 30%, var(--campus-land)); --campus-walk: color-mix(in srgb, var(--surface) 78%, var(--campus-land)); --campus-road: color-mix(in srgb, var(--ink) 10%, var(--surface-2)); --campus-road-line: var(--surface); --campus-building: color-mix(in srgb, var(--ink) 6%, var(--surface-2)); --campus-building-edge: color-mix(in srgb, var(--ink) 24%, var(--surface-2)); --campus-roof: color-mix(in srgb, var(--ink) 22%, transparent); --campus-label: var(--ink-2); --campus-landmark: var(--muted); --campus-field: color-mix(in srgb, var(--green) 42%, var(--surface)); --campus-field-edge: color-mix(in srgb, var(--green) 64%, var(--surface)); --campus-court: color-mix(in srgb, var(--blue) 28%, var(--surface)); --campus-gym: color-mix(in srgb, var(--yellow) 36%, var(--surface)); --campus-church: color-mix(in srgb, var(--red) 26%, var(--surface)); --campus-marking: rgba(255, 255, 255, 0.88); --campus-select: var(--tx-primary); --campus-on-select: var(--tx-on-primary); --campus-live: var(--tx-live); --campus-on-live: var(--tx-on-live); --campus-tag: var(--surface); --campus-tag-ink: var(--ink); --campus-shadow: color-mix(in srgb, var(--ink) 22%, transparent); /* Building names on the drawing: a condensed face, so the long ones fit inside their footprints. Archivo is already loaded (index.html) with its width axis. */ --font-map: "Archivo", "Arial Narrow", "Roboto Condensed", var(--font-body); } /* ============================================================ Night at the beach — dark mode Warm palette shifts to deep-sand + moonlit ocean. Sun becomes a lantern-warm accent; category accents brighten slightly to hold contrast against dark surfaces. ============================================================ */ :root[data-theme="dark"] { --ground: #1A140D; /* deep night sand */ --ground-2: #221B12; --surface: #2A2116; /* warm card in moonlight */ --surface-2: #3A2E1E; --ink: #F5EBD3; /* day's sand is night's text */ --ink-2: #D9C8A6; --muted: #A48C6A; --border: #3E3020; --border-strong: #5A4530; --ocean: #4FA7BA; /* brighter for legibility */ --ocean-deep: #2C7C8E; --ocean-soft: #1E3A46; --sun: #F4A050; /* lantern glow */ --sun-deep: #E68A2E; --sun-soft: #3A2818; /* Start-up pill after dark — lantern-warm ink on deep sand. */ --startup-soft: #3A2818; --startup-ink: #F4A050; --startup-edge: #E68A2E; --blue: #6BA0FF; --blue-ink: #A9C7FF; --blue-soft: #1E2A45; --red: #FF6B5F; --red-ink: #FFB0A9; --red-soft: #3A1D1B; --yellow: #F5C43C; --yellow-ink: #FBE393; --yellow-soft: #3A2E10; --green: #5DC076; --green-ink: #A9E4B7; --green-soft: #1B3524; --compass-face: #C8B27F; --compass-tick: #B8A576; /* ---------- The Xavier Cup after dark — a floodlit night match ---------- */ --cup-green: #1E9A58; --cup-green-dk: #0E7A43; --cup-green-lt: #34B871; --cup-green-soft: #12301F; --cup-gold: #F5C43C; --cup-gold-dk: #C98A12; --cup-gold-lt: #FBE08A; --cup-gold-soft: #33280C; --cup-navy: #070F1A; --cup-line: rgba(236, 255, 242, 0.72); --cup-ink-on: #FFFFFF; --cup-sky-top: #060D1B; --cup-sky-mid: #0C1B2E; --cup-sky-bot: #14293F; --cup-stand-back: #0B1622; --cup-stand-mid: #12202F; --cup-stand-front:#1A2C3E; --cup-crowd: rgba(255, 244, 214, 0.30); --cup-hoarding: #081F36; --cup-pitch-1: #116039; --cup-pitch-2: #0E5231; --cup-pitch-3: #0A3E26; --cup-mast: #1E2E40; --cup-glow: rgba(255, 246, 214, 0.42); --cup-shadow: rgba(0, 0, 0, 0.5); /* Night ocean — indigo-teal descending to midnight */ --sea-foam: #E8F0FA; --sea-foam-soft: #A8C4E0; --sea-1: #2A4A6A; --sea-2: #1E3654; --sea-3: #142440; --sea-4: #0A1830; --sea-5: #050A1A; --sand-wet: #6B5533; --sea-sky: #0F1626; --boat-sail: #E8DDBF; --boat-sail-red: #C43A2E; --boat-hull: #7A4614; --boat-flag: #F5C43C; --bird-line: #C8B27F; --glass-wood: #6B4520; --glass-wood-dk: #3A2510; --glass-wood-lt: #7A5528; --glass-body: #2A2116; --glass-shine: rgba(255,255,255,0.35); --glass-sand: #F4A050; /* amber lantern glow */ --glass-grain: #FBD34E; --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 6px 18px rgba(0,0,0,0.4); --shadow-lg: 0 14px 40px rgba(0,0,0,0.5); --shadow-modal: 0 30px 80px rgba(0,0,0,0.65); --focus-ring: 0 0 0 3px rgba(79,167,186,0.55); /* Match roles after dark: keep white-on-red legible, and put dark ink on the (now bright) accent fill. */ --tx-live: #B21E10; --tx-on-accent: #1A140D; --tx-on-final: #1A140D; /* ============================================================ NIGHT BEACH — the landing scene after dark. Same scene, different hour: the sun sets, a moon comes up, the water goes deep indigo, and the hourglass sand is the warmest thing on the page (it reads as a lantern). ============================================================ */ --scene-sky-top: #0E1F3D; /* deep zenith */ --scene-sky-mid: #1B3A5C; --scene-sky-bot: #2E5A78; /* horizon glow just above the sea */ --scene-cloud: #2C4B68; --scene-hill: #0A1526; /* near-black headland silhouettes */ --scene-sea-deep: #0A1A2E; /* horizon, almost black */ --scene-sea-mid: #10293F; --scene-sea-shallow: #2A5C6B; /* moonlit shallows at the shore */ --scene-water-1: #2F6E7E; /* back wave, moonlit */ --scene-water-2: #1E4C60; --scene-water-3: #14344A; /* front wave, darkest */ --scene-water-shim: #9FD8E8; --scene-foam: #B9D2DE; /* cool foam, not cream */ /* --- Venue map at night: the quad reads as a lit field, the zone hues keep their identity but lift for contrast. --- */ --venue-field: #22303A; --venue-field-line: #3A4E5C; --venue-building: #4A3F33; --venue-building-ink: #EDE3D4; --venue-tent: #33424E; --venue-stage: #0C0C0F; --venue-pin-ink: #FFFFFF; /* tent number on the lit square */ --venue-pin-halo: rgba(0,0,0,0.55); --vz-tech: #6E7480; --vz-csg-aeco: #8A78F0; --vz-media: #FF6FB0; --vz-engineering: #D4635F; --vz-cas: #FF6B5F; --vz-aggies: #7FD98A; --vz-sbm: #FBD34E; --vz-nursing: #B9D6F5; --vz-compstud: #9BA6B2; --vz-soe: #5A8FD6; --vz-sports: #C98BF0; --vz-service: #E8A63C; --vz-faith: #6FE3CF; --vz-socio: #FFB9B9; --vz-environment: #5FA86A; --vz-sci-eng-tech: #C07AA0; --scene-foam-hi: #E8F4FA; --scene-sand-wet: #5E4B33; --scene-sand-top: #6E5A3E; /* sand under moonlight */ --scene-sand-bot: #55442D; --scene-sand-dark: #33281A; --scene-moon: #FFF6DC; --scene-moon-glow: rgba(255, 246, 220, 0.30); --scene-moon-crater: #E6D6B4; --scene-star-dot: #FFFFFF; --scene-wood: #6B4B2C; --scene-wood-dk: #241708; --scene-wood-lt: #85623D; --scene-glass: #1B3040; --scene-glass-stroke: #120C06; --scene-hg-sand-lt: #FFD79A; /* glowing */ --scene-hg-sand-dk: #E39A3C; --scene-word-orange: #F5A54F; --scene-word-cream: #23303F; /* outline goes dark at night */ --scene-word-stroke: #FFF3DC; /* ink goes light */ --scene-tagline-fill: #FFEBCB; --scene-tagline-stroke: #A85B1C; --scene-ink: #E3D2B4; --scene-ink-warm: #F0DFC0; --scene-ink-muted: #C3AF8D; --scene-ink-halo: rgba(0, 0, 0, 0.45); --scene-frond: #2C5A34; --scene-frond-hi: #3E7A44; --scene-frond-stem: #14301A; --scene-chip-bg: #23384C; --scene-chip-ink: #EEF6FF; --scene-search-btn: #2E8C8C; --scene-card-cream: #2A2116; --scene-shell-1: #C7A08C; --scene-shell-2: #B98D77; --scene-star: #C9812C; --scene-star-dk: #8A5615; --scene-crab: #B5342A; --scene-crab-dk: #781A12; } /* ============================================================ WORLD CUP SKIN — data-skin="worldcup" on . Only the palette changes here; the structural swaps (which scene is painted, hourglass vs trophy) are in skins.css. The four cluster hues are deliberately untouched: they are the org taxonomy, not the season's decoration. Two blocks, and they must stay in step — anything declared in the day block needs a night value below it, or dark mode will inherit a daylight colour. ============================================================ */ :root[data-skin="worldcup"] { /* ---------- Ground / neutrals — chalk and clipped grass ---------- */ --ground: #EDF4EE; --ground-2: #DFECE1; --surface: #FFFFFF; --surface-2: #E4EFE6; --ink: #11251A; --ink-2: #3A5444; --muted: #6B8574; --border: #D2E2D6; --border-strong: #AEC8B5; /* ---------- Primary accents — pitch green and trophy gold ---------- */ --ocean: #0E7A43; --ocean-deep: #0A5B32; --ocean-soft: #DDF0E4; --sun: #EFB100; --sun-deep: #B98604; --sun-soft: #FCEFCF; --startup-soft: #FCEFCF; --startup-ink: #8A5E08; --startup-edge: #EFB100; --compass-face: #C9A227; --compass-tick: #AEC8B5; --focus-ring: 0 0 0 3px rgba(14, 122, 67, 0.45); --shadow-sm: 0 2px 8px rgba(12, 48, 28, 0.08); --shadow-md: 0 6px 18px rgba(12, 48, 28, 0.10); --shadow-lg: 0 14px 40px rgba(12, 48, 28, 0.16); --shadow-modal: 0 30px 80px rgba(6, 26, 16, 0.38); /* ---------- Hero content sitting on the pitch ---------- The lockup, tagline and chips are shared markup; re-pointing these tokens re-dresses them without touching a rule. */ --scene-ink: #F2FBF4; --scene-ink-warm: #FFFFFF; --scene-ink-muted: #CFE7D7; --scene-ink-halo: rgba(6, 40, 22, 0.55); --scene-word-orange: #FBD96B; /* "Campus" */ --scene-word-cream: #0A3A22; /* the outline around both words */ --scene-word-stroke: #FFFFFF; /* "Compass" */ --scene-tagline-fill: #FFFFFF; --scene-tagline-stroke: #0A5B32; --scene-chip-bg: #FFFFFF; --scene-chip-ink: #11251A; --scene-search-btn: #0A5B32; --scene-card-cream: #FFFFFF; } :root[data-skin="worldcup"][data-theme="dark"] { --ground: #0C1712; --ground-2: #101F18; --surface: #16261D; --surface-2: #1D3227; --ink: #E9F5EC; --ink-2: #BED6C6; --muted: #86A392; --border: #263E30; --border-strong: #3B5A48; --ocean: #34B871; --ocean-deep: #1E9A58; --ocean-soft: #12301F; --sun: #F5C43C; --sun-deep: #C98A12; --sun-soft: #33280C; --startup-soft: #33280C; --startup-ink: #F5C43C; --startup-edge: #C98A12; --compass-face: #E3C766; --compass-tick: #3B5A48; --focus-ring: 0 0 0 3px rgba(52, 184, 113, 0.5); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55); --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.7); --scene-ink: #DCEFE2; --scene-ink-warm: #F0FBF3; --scene-ink-muted: #A8C7B4; --scene-ink-halo: rgba(0, 0, 0, 0.6); --scene-word-orange: #FBD96B; --scene-word-cream: #04160D; --scene-word-stroke: #F2FBF4; --scene-tagline-fill: #F2FBF4; --scene-tagline-stroke: #0A3A22; --scene-chip-bg: #1D3227; --scene-chip-ink: #E9F5EC; --scene-search-btn: #1E9A58; --scene-card-cream: #16261D; } /* ============================================================ XAVIER CUP 2026 SKIN — data-skin="txc" on . The default. Navy, lime and cream, sampled from the TXC reference. Like the World Cup skin, only the palette changes here; skins.css swaps the landing scene for the tile layout and sets the type. Rules the palette depends on (contrast): navy on white 14.0:1 · navy on cream 11.1:1 · lime on navy 9.8:1 lime on white 1.4:1 and gold on white 2.3:1 FAIL — so lime and gold are only ever fills, with navy text on them. The four cluster hues stay untouched: they are the org taxonomy. ============================================================ */ :root[data-skin="txc"] { /* ---------- Brand constants (same in both themes) ---------- */ --tx-navy: #0E2B55; --tx-navy-deep: #092040; --tx-lime: #B0EA00; --tx-cream: #E8E4DB; --tx-gold: #CDA54E; --tx-red: #A00B23; /* ---------- Roles ---------- */ --tx-tile: #0E2B55; /* the big headline tiles */ --tx-tile-ink: #FFFFFF; --tx-tile-muted: #C3CDE0; --tx-tile-line: rgba(255, 255, 255, 0.16); --tx-tile-wash: rgba(255, 255, 255, 0.06); --tx-accent: #B0EA00; /* lime fill */ --tx-on-accent: #0E2B55; --tx-primary: #0E2B55; /* buttons, active nav, selected chips */ --tx-on-primary: #FFFFFF; --tx-on-primary-hi: #B0EA00; /* the active nav item: lime on navy */ --tx-live: #A00B23; --tx-on-live: #FFFFFF; --tx-final: #CDA54E; --tx-on-final: #0E2B55; --tx-scorebox: #E8E4DB; --tx-glow: rgba(176, 234, 0, 0.17); /* ---------- Ground / neutrals — paper and cream ---------- */ --ground: #F4F1EC; --ground-2: #ECE7DE; --surface: #FFFFFF; --surface-2: #E8E4DB; --ink: #0E2B55; --ink-2: #3F5275; --muted: #66748C; --border: #DDD7CB; --border-strong: #C2BAA9; /* ---------- Accents mapped onto the shared names ---------- */ --ocean: #0E2B55; /* primary interactive */ --ocean-deep: #071B3A; --ocean-soft: #E1E7F0; --sun: #B0EA00; /* warm accent becomes lime */ --sun-deep: #4F6A00; /* lime dark enough to be text */ --sun-soft: #EEF8CC; --startup-soft: #F6EBD0; --startup-ink: #6E5210; --startup-edge: #CDA54E; --compass-face: #0E2B55; --compass-tick: #C2BAA9; --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #0E2B55; --shadow-sm: 0 1px 2px rgba(14, 43, 85, 0.06), 0 2px 8px rgba(14, 43, 85, 0.05); --shadow-md: 0 8px 22px rgba(14, 43, 85, 0.10); --shadow-lg: 0 16px 40px rgba(14, 43, 85, 0.14); --shadow-modal: 0 30px 80px rgba(7, 20, 41, 0.40); /* ---------- The Cup's own tokens, re-pointed ---------- */ --cup-green: #0E2B55; /* map pins */ --cup-green-dk: #092040; --cup-green-lt: #1D4A85; --cup-green-soft: #E3EAD2; /* the quad and the field, a pale lime-grey */ --cup-gold: #B0EA00; --cup-gold-dk: #B0EA00; /* selected pin — lime, navy text (skins.css) */ --cup-gold-lt: #B0EA00; /* highlight text on the navy banner */ --cup-gold-soft: #EEF8CC; --cup-navy: #0E2B55; --cup-line: rgba(255, 255, 255, 0.85); /* ---------- Type ---------- Archivo for display (set expanded in skins.css), Figtree for reading. Both from Google Fonts, linked in index.html; the system stacks behind them are the old ones, so a failed font load degrades to the original look rather than to Times. */ --font-serif: "Archivo", "Arial Black", "Segoe UI", -apple-system, sans-serif; --font-script: "Archivo", "Arial Black", "Segoe UI", -apple-system, sans-serif; --font-body: "Figtree", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; /* Landing hero chips + search when they sit on a tile */ --scene-chip-bg: #FFFFFF; --scene-chip-ink: #0E2B55; --scene-search-btn: #0E2B55; --scene-card-cream: #FFFFFF; } /* Night: the ground goes to deep navy, the tiles stay navy but lift off it, and lime takes over as the primary fill. */ :root[data-skin="txc"][data-theme="dark"] { --tx-tile: #12305C; --tx-tile-ink: #FFFFFF; --tx-tile-muted: #BCC8DD; --tx-tile-line: rgba(255, 255, 255, 0.14); --tx-tile-wash: rgba(255, 255, 255, 0.05); --tx-accent: #B0EA00; --tx-on-accent: #0E2B55; --tx-primary: #B0EA00; --tx-on-primary: #0E2B55; --tx-on-primary-hi: #0E2B55; --tx-live: #C8102E; --tx-on-live: #FFFFFF; --tx-final: #CDA54E; --tx-on-final: #0E2B55; --tx-scorebox: #1A3868; --tx-glow: rgba(176, 234, 0, 0.12); --ground: #071429; --ground-2: #0A1A33; --surface: #0E2340; --surface-2: #15305A; --ink: #EEEBE3; --ink-2: #BAC5D8; --muted: #8C9AB3; --border: #1F3A63; --border-strong: #2E4E7E; --ocean: #B0EA00; --ocean-deep: #C9F53D; --ocean-soft: #1B3A1F; --sun: #B0EA00; --sun-deep: #C9F53D; --sun-soft: #1E3A24; --startup-soft: #33280C; --startup-ink: #E8C46E; --startup-edge: #CDA54E; --compass-face: #B0EA00; --compass-tick: #2E4E7E; --focus-ring: 0 0 0 2px #071429, 0 0 0 4px #B0EA00; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.42); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.7); --cup-green: #3B6AB0; --cup-green-dk: #2A5596; --cup-green-lt: #5582C4; --cup-green-soft: #16341F; --cup-gold: #B0EA00; --cup-gold-dk: #B0EA00; --cup-gold-lt: #B0EA00; --cup-gold-soft: #1E3A24; --cup-navy: #0A1D3B; --scene-chip-bg: #15305A; --scene-chip-ink: #EEEBE3; --scene-search-btn: #B0EA00; --scene-card-cream: #0E2340; }