/* ============================================================ Gaming brand: tokens "The display cabinet": a warm near-black ground that lets painted miniatures and box art carry the colour, bone-white type, verdigris (oxidised bronze) for actions and brass hairlines as the family link to Legion's gold. Same faces as the competitions site (Cinzel display, Inter body), self-hosted via tokens/fonts.css. Scoped to :root[data-theme="gaming"], which only gaming/base.html sets, so nothing here reaches the competitions site. Two layers: 1. --gm-* tokens, used by gaming.css (the gm-* components); 2. the shared semantic tokens (colors.css) re-pointed, so the shared lc-* pages the gaming site also renders (sign-in, register, password reset, errors, legal) sit in the same palette. Contrast pairs are noted as ratio on --gm-ground / --gm-card. ============================================================ */ :root[data-theme="gaming"] { color-scheme: dark; /* ---- Grounds ---- */ --gm-ground: #110f0d; /* page */ --gm-ground-alt: #16130f; /* alternate band */ --gm-card: #1b1815; /* card / panel */ --gm-raised: #24201b; /* hover, inputs */ --gm-sunken: #0b0a09; /* photo wells, footer */ --gm-scrim: rgba(6, 5, 4, 0.82); /* ---- Lines ---- */ --gm-line: #312b24; /* decorative edges */ --gm-line-soft: #26211c; --gm-line-strong: #7c7164; /* control edges: 3.6:1 on ground, 3.3:1 on card */ /* ---- Type ---- */ --gm-bone: #f3ede2; /* headings 16.4:1 / 15.2:1 */ --gm-text: #d9d1c4; /* body 12.4:1 / 11.5:1 */ --gm-muted: #a99f92; /* secondary 7.2:1 / 6.7:1 */ --gm-faint: #8b8276; /* captions 5.0:1 / 4.6:1 */ /* ---- Accents ---- */ --gm-verdigris: #67c6ad; /* accent text, links, icons 9.0:1 / 8.4:1 */ --gm-verdigris-fill: #4fb197; /* primary button fill; text on it --gm-on-accent 7.6:1 */ --gm-verdigris-hover:#6cc8b0; --gm-verdigris-tint: rgba(103, 198, 173, 0.12); --gm-verdigris-line: rgba(103, 198, 173, 0.40); --gm-on-accent: #0b0a09; --gm-brass: #c9ab73; /* hairlines, eyebrow labels 8.6:1 / 8.0:1 */ --gm-brass-dim: rgba(201, 171, 115, 0.35); /* ---- Status ---- */ --gm-ok: #86d6a8; --gm-ok-tint: rgba(134, 214, 168, 0.12); --gm-warn: #e8bb6a; --gm-warn-tint: rgba(232, 187, 106, 0.12); --gm-danger: #f2958a; --gm-danger-tint: rgba(242, 149, 138, 0.12); --gm-info: #9cc3e6; --gm-info-tint: rgba(156, 195, 230, 0.12); /* ---- Shape & depth ---- */ --gm-r-xs: 4px; --gm-r-sm: 6px; --gm-r: 10px; --gm-r-lg: 16px; --gm-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 30px -18px rgba(0, 0, 0, 0.9); --gm-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 22px 40px -20px rgba(0, 0, 0, 0.95); --gm-focus: #f3ede2; /* ---- Layout ---- */ --gm-max: 76rem; --gm-narrow: 46rem; --gm-gutter: clamp(1rem, 4vw, 2rem); --gm-header-h: 4rem; /* ---- Type ---- */ --gm-font-display: var(--font-display); --gm-font-body: var(--font-body); } /* ---- The shared semantic tokens, re-pointed (docs/site-theming.md). ---- */ :root[data-theme="gaming"] { --surface-page: var(--gm-ground); --surface-card: var(--gm-card); --surface-raised: var(--gm-raised); --surface-sunken: var(--gm-sunken); --surface-inverse: var(--gm-bone); --surface-overlay: var(--gm-scrim); --surface-page-texture: none; --surface-dark: var(--gm-ground-alt); --surface-dark-raised: var(--gm-card); --surface-dark-card: var(--gm-raised); --surface-dark-deep: var(--gm-sunken); --surface-dark-tint: rgba(255, 255, 255, 0.05); --surface-scrim: var(--gm-scrim); --border-soft: var(--gm-line); --border-strong: var(--gm-line-strong); --border-dark: var(--gm-line); --border-dark-strong: var(--gm-line-strong); --border-dark-soft: var(--gm-line-soft); --border-default: var(--gm-line); --text-display: var(--gm-bone); --text-heading: var(--gm-bone); --text-strong: var(--gm-bone); --text-body: var(--gm-text); --text-secondary: var(--gm-muted); --text-muted: var(--gm-muted); --text-disabled: #6a6157; --text-on-dark: var(--gm-bone); --text-on-dark-body: var(--gm-text); --text-on-dark-muted: var(--gm-muted); --text-on-dark-faint: var(--gm-faint); --on-dark-body: var(--gm-text); --text-on-gold: var(--gm-on-accent); --text-on-action: var(--gm-on-accent); --text-on-status: var(--gm-on-accent); --text-on-inverse: var(--gm-on-accent); /* "gold" becomes brass, "action" becomes verdigris */ --accent-gold: var(--gm-brass); --accent-gold-strong: var(--gm-brass); --accent-gold-ink: var(--gm-brass); --accent-gold-ink-strong: var(--gm-bone); --accent-gold-on-dark: var(--gm-brass); --accent-gold-on-dark-soft: var(--gm-brass); --accent-gold-bright: var(--gm-brass); --accent-gold-pale: var(--gm-brass); --accent-gold-fill: #2a241b; --accent-gold-tint: rgba(201, 171, 115, 0.10); --accent-gold-border: var(--gm-brass-dim); --accent-gold-glow-border: var(--gm-brass-dim); --accent-gold-glow: var(--gm-brass); --accent-gold-soft: #2a241b; --accent-action: var(--gm-verdigris-fill); --accent-action-hover: var(--gm-verdigris-hover); --accent-action-ink: var(--gm-verdigris); --accent-action-deep: #2f7b68; --accent-action-on-dark: var(--gm-verdigris); --accent-action-text: var(--gm-verdigris); --accent-action-text-strong: var(--gm-danger); --accent-action-fill: #18302a; --accent-action-tint: var(--gm-verdigris-tint); --accent-action-border: var(--gm-verdigris-line); --accent-action-glow: #2f7b68; --status-success: var(--gm-ok); --status-success-ink: var(--gm-ok); --status-success-on-dark: var(--gm-ok); --status-success-tint: var(--gm-ok-tint); --status-success-fill: #1a2a21; --status-success-border: rgba(134, 214, 168, 0.4); --status-warning: var(--gm-warn); --status-warning-ink: var(--gm-warn); --status-warning-on-dark: var(--gm-warn); --status-warning-tint: var(--gm-warn-tint); --status-warning-fill: #2e2618; --status-warning-border: rgba(232, 187, 106, 0.4); --status-warning-strong: var(--gm-warn); --status-danger: var(--gm-danger); --status-danger-ink: var(--gm-danger); --status-danger-on-dark: var(--gm-danger); --status-danger-tint: var(--gm-danger-tint); --status-danger-fill: #33201d; --status-danger-border: rgba(242, 149, 138, 0.4); --status-info: var(--gm-info); --text-on-success: var(--gm-on-accent); --surface-backdrop: #050403; --focus-ring: var(--gm-focus); --focus-ring-dark: var(--gm-focus); --ring-gold: 0 0 0 2px var(--gm-focus); --ring-crimson: 0 0 0 2px var(--gm-danger); --shadow-card: var(--gm-shadow); --shadow-card-hover: var(--gm-shadow-lift); --shadow-sm: var(--gm-shadow); --shadow-md: var(--gm-shadow); }