/* ============================================================ Legion Comps — Color System Direction: clean off-white canvas, dark navy accent panels, imperial gold as accent (not atmosphere), crimson as the action color. WCAG AA targeted on all text pairings. ============================================================ */ :root { /* ---- Paper neutrals (the light canvas — traditional off-whites) ---- */ --paper-0: #ffffff; /* card surface */ --paper-50: #fafaf7; /* raised / hover fill */ --paper-100: #f3f3ef; /* page background — clean off-white (eggshell) */ --paper-200: #e9e8e1; /* subtle fills, table stripes */ --paper-300: #d9d6cd; /* default border on light */ --paper-400: #c2bfb4; /* stronger border / divider */ /* ---- Ink (dark text & marks on light) ---- */ --ink-900: #191820; /* headings / Cinzel display */ --ink-800: #26252f; --ink-700: #34333f; /* strong body */ --ink-600: #4c4b57; /* body */ --ink-500: #5f5e68; /* secondary text — 6.4:1 on paper */ --ink-400: #69666f; /* muted / captions — 4.6:1 on the sunken fill, 5.0:1 on paper */ --ink-300: #b3afb8; /* faint / disabled controls only — below AA, never body copy */ /* ---- Slate (dark navy/charcoal accent panels) ---- */ --slate-950: #101019; /* deepest — footer base */ --slate-900: #16161f; /* hero / dark panel */ --slate-850: #1b1c27; /* dark panel raised */ --slate-800: #23242f; /* dark card / elevated-on-dark */ --slate-700: #2e3040; /* border on dark */ --slate-600: #3e4054; /* stronger border on dark */ /* text & marks that sit ON dark panels */ --on-dark-hi: #f3f5f8; /* clean cool white — headings on dark */ --on-dark: #ced3db; /* body on dark (cool grey) */ --on-dark-mut: #9ea3ad; /* muted on dark */ --on-dark-faint: #82868e; /* faint on dark — 4.9:1 on slate-900 */ /* ---- Imperial gold (accent: CTAs, key numbers, highlights) ---- */ --gold-800: #7c6322; --gold-700: #836927; /* gold text on light — 5.2:1 on paper (#9a7b2e only reached 4.0) */ --gold-600: #b8902f; /* metallic accent — fails AA as text on light, use gold-700 there */ --gold-500: #d4af37; /* primary metallic gold */ --gold-400: #e2c265; /* gold on dark / highlights */ --gold-300: #efd58e; --gold-100: #f6eccf; /* gold tint fill on light */ --gold-tint: rgba(212, 175, 55, 0.10); /* ---- Crimson (the action color) ---- */ --crimson-800: #7c1322; --crimson-700: #98182b; /* crimson text on light — AA */ --crimson-600: #b81e32; --crimson-500: #c8233b; /* primary button */ --crimson-400: #dd4a5e; /* crimson on dark / hover-light */ --crimson-300: #f26a7c; /* crimson text on a panel — AA (4.7:1 on the urgent pill, 5.2:1 on slate-800) */ --crimson-100: #f7e2e4; /* crimson tint fill */ --crimson-tint: rgba(200, 35, 59, 0.09); /* ---- Semantic ---- */ --success-700: #1f7a4d; /* text on light */ --success-500: #2f9e63; --success-400: #57c489; /* on dark */ --success-tint: rgba(47, 158, 99, 0.12); --warning-700: #8f6212; /* warning text on light — 4.8:1 on paper (#9a6a16 reached 4.2) */ --warning-500: #d99425; --warning-tint: rgba(217, 148, 37, 0.13); --danger-700: #98182b; --danger-500: #c8233b; --danger-tint: rgba(200, 35, 59, 0.10); /* arcane violet — reserved for instant-win only, muted & deliberate */ --arcane-700: #574baa; /* text on light */ --arcane-500: #6a5bc2; --arcane-400: #8e80d6; /* on dark */ --arcane-100: #edebf8; /* opaque twin of the tint, for fills over photography */ --arcane-tint: rgba(106, 91, 194, 0.12); /* ============================================================ SEMANTIC TOKENS — the theme contract (docs/site-theming.md) Templates and component CSS use ONLY these. A theme (static/css/themes/.css) re-points them under [data-theme=""]; the values here are the classic theme. "Page" tokens are the canvas and cards on it; "dark" / "on-dark" tokens are panels (hero, stat bar, footer, dark bands). A dark theme makes both dark — never mix the two contexts. ============================================================ */ color-scheme: light; /* surfaces — page */ --surface-page: var(--paper-100); --surface-card: var(--paper-0); --surface-raised: var(--paper-50); --surface-sunken: var(--paper-200); --surface-overlay: rgba(16, 16, 25, 0.6); /* modal / drawer backdrop */ --surface-inverse: var(--ink-900); /* active chip / current page number */ --surface-page-texture: /* .lc-page-texture wash */ radial-gradient(circle at 18% 22%, rgba(212, 175, 55, 0.018) 0, transparent 42%), radial-gradient(circle at 82% 78%, rgba(152, 24, 43, 0.015) 0, transparent 45%); /* surfaces — panel */ --surface-dark: var(--slate-900); /* hero / stat bar / dark band */ --surface-dark-raised: var(--slate-850); --surface-dark-card: var(--slate-800); /* card or button on a panel */ --surface-dark-deep: var(--slate-950); /* footer base */ --surface-dark-tint: rgba(255, 255, 255, 0.06); /* light wash on a panel */ --surface-scrim: rgba(10, 10, 15, 0.5); /* mobile menu backdrop */ /* borders */ --border-soft: var(--paper-300); --border-strong: var(--paper-400); --border-dark: var(--slate-700); --border-dark-strong: var(--slate-600); --border-dark-soft: var(--slate-800); /* hairline between rows on a panel */ /* Card edge that classic has never drawn: templates have always written `border: 1px solid var(--border-default)` against an undefined token, so the declaration drops and there is no border. `initial` is the guaranteed-invalid value, which keeps that rendering exactly. A theme may give it a colour to switch those edges on (it adds 1-2px of height where it does). */ --border-default: initial; /* text — page */ --text-display: var(--ink-900); --text-heading: var(--ink-800); --text-strong: var(--ink-700); --text-body: var(--ink-600); --text-secondary: var(--ink-500); --text-muted: var(--ink-400); --text-disabled: var(--ink-300); /* text — panel */ --text-on-dark: var(--on-dark-hi); --text-on-dark-body: var(--on-dark); --text-on-dark-muted: var(--on-dark-mut); --text-on-dark-faint: var(--on-dark-faint); --on-dark-body: var(--on-dark); /* legacy alias of --text-on-dark-body */ /* text — on a filled accent */ --text-on-gold: var(--ink-900); --text-on-action: #fff; --text-on-status: #fff; /* text on a solid status fill */ --text-on-inverse: #fff; /* text on --surface-inverse */ /* accent — gold */ --accent-gold: var(--gold-500); /* fills, bars, icons */ --accent-gold-strong: var(--gold-600); /* metallic border/icon on page — not text */ --accent-gold-ink: var(--gold-700); /* gold text on page, AA */ --accent-gold-ink-strong: var(--gold-800); --accent-gold-on-dark: var(--gold-400); /* gold text/marks on panel */ --accent-gold-bright: var(--gold-400); /* light gold edge / gradient stop on page — not text */ --accent-gold-pale: var(--gold-300); /* paler gold edge on page — not text */ --accent-gold-on-dark-soft: var(--gold-300); --accent-gold-fill: var(--gold-100); --accent-gold-tint: var(--gold-tint); --accent-gold-border: rgba(184, 144, 47, 0.35); --accent-gold-glow-border: rgba(212, 175, 55, 0.5); /* accent — action (crimson) */ --accent-action: var(--crimson-500); --accent-action-hover: var(--crimson-600); --accent-action-ink: var(--crimson-700); /* crimson text on page, AA */ --accent-action-deep: var(--crimson-800); --accent-action-on-dark: var(--crimson-300); --accent-action-text: var(--crimson-500); /* crimson text/icon on page (marks, required *) */ --accent-action-text-strong: var(--crimson-600); /* crimson error text on page */ --accent-action-fill: var(--crimson-100); --accent-action-tint: var(--crimson-tint); --accent-action-border: rgba(200, 35, 59, 0.30); /* status — success / warning / danger / arcane (instant wins only) */ --status-success: var(--success-500); --status-success-ink: var(--success-700); --status-success-on-dark: var(--success-400); --status-success-tint: var(--success-tint); --status-success-fill: var(--success-tint); --status-success-border: rgba(47, 158, 99, 0.30); --status-warning: var(--warning-500); --status-warning-ink: var(--warning-700); --status-warning-on-dark: var(--warning-500); --status-warning-tint: var(--warning-tint); --status-warning-fill: var(--warning-tint); --status-warning-border: rgba(217, 148, 37, 0.30); --status-warning-strong: var(--warning-700); /* solid fill under --text-on-status */ --status-danger: var(--danger-500); --status-danger-ink: var(--danger-700); --status-danger-on-dark: var(--crimson-300); --status-danger-tint: var(--danger-tint); --status-danger-fill: var(--crimson-100); --status-danger-border: rgba(200, 35, 59, 0.30); --status-arcane: var(--arcane-500); --status-arcane-ink: var(--arcane-700); --status-arcane-on-dark: var(--arcane-400); --status-arcane-tint: var(--arcane-tint); --status-arcane-fill: var(--arcane-100); --status-arcane-border: rgba(106, 91, 194, 0.30); --status-arcane-dark-tint: rgba(109, 40, 217, 0.22); /* instant-win chip on a panel */ --status-arcane-on-dark-hi: #b3a4f5; /* Off-palette accents the templates already use. Each keeps its classic value exactly; a theme re-points them. Washes mix them: color-mix(in srgb, var(--x) N%, transparent). */ --status-instant: #7c3aed; /* instant-win violet: recent winners, not-found tiles, error art */ --status-info: #2563eb; /* dashboard "Answered" marks */ --status-success-bright: #22c55e; /* tick icons, Verified dot, success rings (not text) */ --status-success-soft: #10b981; /* free-entry / guarantee note washes on the competition page */ --status-live: #4ade80; /* OPEN pulse dot on a dark chip (not text) */ --text-on-success: #04140b; /* text on a --status-success fill */ --text-on-dark-warm: #f5f0e8; /* warm cream on a panel (current competition card) */ --surface-dark-track: rgba(255, 255, 255, 0.10); /* progress track on a panel */ --surface-avatar: #78788c; /* placeholder avatar circle, mixed at 12% fill / 30% ring */ --accent-gold-glow: #c9951a; /* gold CTA glow, help link hover */ --accent-gold-soft: #fdf3d8; /* blog notice strip (was only ever the var() fallback) */ --accent-action-glow: #8b1538; /* rpg button shadow */ --surface-backdrop: #0f0c0a; /* purchase / signup modal and lightbox backdrop, mixed at 85% / 92% */ /* Media overlays: chips and controls drawn over prize photos. The photo doesn't change with the theme, so these stay dark glass in every theme. */ --media-glass: #101019; /* mix at 75–88% for chips on a photo */ --media-shade: #000; /* mix at 40% (gallery arrows) / 75% (OPEN chip) */ --media-badge: rgba(30, 30, 40, 0.85); /* status badge on a photo: Sold Out, Completed */ --media-badge-deep: rgba(13, 13, 20, 0.85); /* countdown badge on the competition hero */ --media-badge-arcane: rgba(109, 40, 217, 0.85); /* Instant badge on a photo */ --media-text: rgba(255, 255, 255, 0.9); /* small text on media glass */ --media-control-text: #fff; /* gallery arrow glyph */ /* focus ring */ --focus-ring: var(--gold-600); --focus-ring-dark: var(--gold-400); }