/* * GameTecX Design Tokens (WP9, D-0021 (2); UI-Design-Principles Sec. 3/4). * * The single source of colour, spacing, radius, z-index, motion and type tokens. * `:root` is the DARK theme (the product default, Sec. 2.3); `[data-theme="light"]` * overrides only what must change. Components consume ONLY these semantic tokens, * never raw hex values (Sec. 11.2). * * ------------------------------------------------------------------------- * WCAG-AA contrast (checked against the tokens, Sec. 9 — 4.5:1 text, 3:1 UI): * * DARK (:root, on --gtx-bg #16130F): * text #EDE6DA ~14:1 PASS (text) * text-dim #A89C8A ~7.1:1 PASS (text) * ember #E8862E ~6.3:1 PASS (text + UI) -> also readable on --gtx-surface * ok #4CAF6D ~7:1 PASS (text) * warn #D9A13B ~8:1 PASS (text) * info #5B9BC9 ~5.9:1 PASS (text) * danger #D95B4A ~4.8:1 PASS (text, tight) -> paired with glyph+label (Sec. 9) * idle #7D7468 ~4.1:1 PASS as UI/large/disabled (3:1); not body text * Primary button = ember fill + near-black text (#16130F): ~6.3:1 PASS. * * LIGHT ([data-theme="light"], on --gtx-bg #F7F3EC): * text #2A241C ~13:1 PASS (text) * Ember #E8862E as TEXT on paper is only ~2.7:1 (FAIL) -> the light theme uses * the deeper --gtx-ember-deep (#B95F14, ~4.5:1) for link/accent TEXT via * --gtx-accent-text, while ember stays the FILL colour (with near-black label). * Status hues are darkened for AA as TEXT on paper (Sec. 3.1 allows this): * ok #1E6B3D, warn #8A5A00, danger #B23120, info #245C82 -> all >4.5:1; * idle #5C544A ~4.7:1. * ------------------------------------------------------------------------- */ :root { /* Base palette (dark) — Sec. 3.1 */ --gtx-bg: #16130F; /* page ground, warm near-black */ --gtx-surface: #201B15; /* cards, panels */ --gtx-surface-2: #2A241C; /* raised surfaces: modals, dropdowns */ --gtx-line: #3A3226; /* hairlines, table lines */ --gtx-text: #EDE6DA; /* primary text, warm off-white */ --gtx-text-dim: #A89C8A; /* secondary text, labels */ --gtx-ember: #E8862E; /* accent: primary actions, active states */ --gtx-ember-deep: #B95F14; /* hover / pressed */ /* Accent used specifically for TEXT/links (theme-aware for AA) */ --gtx-accent-text: var(--gtx-ember); /* Foreground placed on an ember fill (primary button label) */ --gtx-on-ember: #16130F; /* Status (semantic, same names in both themes) — Sec. 3.1 */ --gtx-ok: #4CAF6D; /* online, active, success */ --gtx-warn: #D9A13B; /* starting/stopping, updates, caution */ --gtx-danger: #D95B4A; /* unexpected offline, error, destructive */ --gtx-idle: #7D7468; /* stopped-on-purpose, disabled, neutral */ --gtx-info: #5B9BC9; /* hints, running jobs */ /* Spacing scale (px) — Sec. 3.2 */ --gtx-s1: 4px; --gtx-s2: 8px; --gtx-s3: 12px; --gtx-s4: 16px; --gtx-s5: 24px; --gtx-s6: 32px; --gtx-s7: 48px; --gtx-s8: 64px; /* Radii — Sec. 3.2 */ --gtx-r-s: 4px; /* inputs, badges */ --gtx-r-m: 8px; /* cards, modals */ --gtx-r-btn: 6px; /* buttons */ /* Elevation — two steps; dark theme prefers a 1px inner line over heavy shadow */ --gtx-shadow-card: 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.03); --gtx-shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.55); /* Z-index scale — Sec. 3.3 */ --gtx-z-sticky: 10; --gtx-z-dropdown: 100; --gtx-z-modal: 1000; --gtx-z-toast: 1100; /* Motion — Sec. 3.3 / 8 */ --gtx-t-fast: 120ms; --gtx-t-med: 200ms; --gtx-ease: ease-out; /* Focus ring — Sec. 9 */ --gtx-focus: var(--gtx-ember); --gtx-focus-width: 2px; --gtx-focus-offset: 2px; /* Type — Sec. 4. System fallbacks make every screen render without the WOFF2. */ --gtx-font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --gtx-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --gtx-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Cascadia Mono', Consolas, 'Courier New', monospace; /* Type scale (rem) — Sec. 4 */ --gtx-fs-meta: 0.75rem; --gtx-fs-ui: 0.875rem; --gtx-fs-body: 1rem; --gtx-fs-h3: 1.25rem; --gtx-fs-h2: 1.5rem; --gtx-fs-h1: 2rem; --gtx-fs-hero: 3rem; /* The log/console surface is ALWAYS dark, in both themes (Sec. 6 Log-Viewer) */ --gtx-log-bg: #14110D; --gtx-log-text: #EDE6DA; color-scheme: dark; } [data-theme="light"] { --gtx-bg: #F7F3EC; /* warm paper */ --gtx-surface: #FFFFFF; --gtx-surface-2: #FBF7F0; --gtx-line: #E0D8CB; --gtx-text: #2A241C; --gtx-text-dim: #6B6357; --gtx-ember: #E8862E; /* unchanged as a fill */ --gtx-ember-deep: #B95F14; --gtx-accent-text: var(--gtx-ember-deep); /* AA-readable ember for link/text */ --gtx-on-ember: #16130F; /* Status darkened for AA as text on paper (Sec. 3.1 permits per-theme tuning) */ --gtx-ok: #1E6B3D; --gtx-warn: #8A5A00; --gtx-danger: #B23120; --gtx-idle: #5C544A; --gtx-info: #245C82; --gtx-shadow-card: 0 1px 2px rgba(42, 36, 28, 0.08), inset 0 0 0 1px rgba(42, 36, 28, 0.05); --gtx-shadow-overlay: 0 12px 40px rgba(42, 36, 28, 0.22); color-scheme: light; } /* * Self-hosted fonts (Sec. 4 / 11.4). The WOFF2 binaries are an accepted, documented * asset seam (D-0021 (3)): they are NOT in the repo — drop them into /fonts/ per * public/fonts/README.md. Until then the system fallbacks in the font stacks render * every screen. `font-display: swap` avoids invisible text while a font loads. */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/space-grotesk-600.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/space-grotesk-700.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/jetbrains-mono-700.woff2') format('woff2'); }