/** * @file tokens.css * @project KAINYNE Website * @description [REQ-559] Canonical design-token sheet for the * `` component family. Declares every `--kn-*` token * used by `src/ui/kainyne-button.js`, `src/ui/kainyne-frame.js`, * and `src/ui/kainyne-carousel.js`. Token values default to the * existing brand vars (`--bg`, `--accent`, `--font-body`, …) via * `var(fallback)` so today's per-game `:root { --accent: ... }` * overrides keep flowing through to the components for free. * * Loaded once at the host-page level via ``. CSS custom properties inherit * through Shadow DOM, so a single declaration at `:root` reaches * every component instance without re-linking inside each shadow * root. The `:host` selector mirror is included so the sheet * could also be ``'d inside a shadow root if a future * component opts into self-contained theming. * @module UI/Components/Tokens * @requirements REQ-555, REQ-556, REQ-557, REQ-559 * @hazards [PTR-N/A] Every token reads through `var(existing-token, * default)` so per-game `:root` overrides win without the games * needing to know about `--kn-*` names. Do NOT replace the * fallback chain with hard-coded values — that would break the * per-game theming contract. * @notes Tokens prefixed `--kn-` to avoid colliding with the * existing site-wide vars (`--bg`, `--accent`, etc.) that every * page already declares. */ :root, :host { /* [REQ-559] Brand palette — read the existing vars via fallback so per-game overrides continue to flow without per-game awareness. */ --kn-bg: var(--bg, #0a0b0f); --kn-surface: var(--surface, #111318); --kn-border: var(--border, #2a2d38); --kn-text: var(--text, #e8e9ef); --kn-muted: var(--muted, #80849a); --kn-accent: var(--accent, #e8f020); /* [REQ-559] Typography. */ --kn-font-display: var(--font-display, 'Bebas Neue', sans-serif); --kn-font-mono: var(--font-mono, 'DM Mono', monospace); --kn-font-body: var(--font-body, 'DM Sans', sans-serif); /* [REQ-559] Semantic tones — referenced by every component's `tone` attribute. */ --kn-tone-neutral: var(--kn-surface); --kn-tone-accent: var(--kn-accent); --kn-tone-danger: #e84660; --kn-tone-muted: var(--kn-muted); /* [REQ-559] Size scale — used by `size` attribute on buttons + `padding` attribute on frames. */ --kn-size-sm-pad: 0.40rem 0.75rem; --kn-size-md-pad: 0.60rem 1.10rem; --kn-size-lg-pad: 0.85rem 1.60rem; --kn-size-sm-font: 0.85rem; --kn-size-md-font: 0.95rem; --kn-size-lg-font: 1.10rem; /* [REQ-559] Corner-radius scale. */ --kn-radius-sm: 2px; --kn-radius-md: 4px; --kn-radius-lg: 8px; /* [REQ-555] Component-scoped — button surface. */ --kn-btn-bg: var(--kn-tone-neutral); --kn-btn-fg: var(--kn-text); --kn-btn-border: var(--kn-border); /* [REQ-555] Re-export the button-press.css press-feedback contract so the shadow-DOM button's `:active` styling stays in lockstep with the rest of the site when per-game pages override the base tokens. */ --kn-btn-pressed-scale: var(--btn-pressed-scale, 0.95); --kn-btn-pressed-shadow: var(--btn-pressed-shadow, inset 0 2px 6px rgba(0, 0, 0, 0.45)); --kn-btn-pressed-duration: var(--btn-pressed-duration, 0.12s); /* [REQ-556] Component-scoped — frame surface. */ --kn-frame-bg: var(--kn-surface); --kn-frame-border: var(--kn-border); --kn-frame-pad-none: 0; --kn-frame-pad-sm: 0.75rem; --kn-frame-pad-md: 1.50rem; --kn-frame-pad-lg: 2.25rem; /* [REQ-557] Component-scoped — carousel surface. */ --kn-carousel-gap: 1rem; --kn-carousel-dot-size: 0.55rem; --kn-carousel-dot-bg: var(--kn-border); --kn-carousel-dot-active: var(--kn-accent); /* [REQ-561, REQ-562] Component-scoped — input + select surface. */ --kn-input-bg: var(--kn-bg); --kn-input-fg: var(--kn-text); --kn-input-border: var(--kn-border); --kn-input-border-focus: var(--kn-accent); --kn-input-radius: var(--kn-radius-md); --kn-input-placeholder: var(--kn-muted); --kn-input-invalid: var(--kn-tone-danger); --kn-input-help-fg: var(--kn-muted); /* [REQ-563] Component-scoped — checkbox surface. */ --kn-checkbox-bg: var(--kn-input-bg); --kn-checkbox-border: var(--kn-input-border); --kn-checkbox-checked-bg: var(--kn-accent); --kn-checkbox-checked-mark: var(--kn-bg); --kn-checkbox-size-sm: 0.85rem; --kn-checkbox-size-md: 1rem; --kn-checkbox-size-lg: 1.25rem; /* [REQ-565] Component-scoped — modal window surface. */ --kn-window-bg: var(--kn-surface); --kn-window-border: var(--kn-border); --kn-window-radius: var(--kn-radius-lg); --kn-window-pad: 1.5rem; --kn-window-shadow: 0 8px 32px rgba(0, 0, 0, 0.55); --kn-window-scrim: rgba(10, 11, 15, 0.7); --kn-window-max-w-sm: 24rem; --kn-window-max-w-md: 36rem; --kn-window-max-w-lg: 56rem; /* [REQ-566] Component-scoped — menu / popover surface. */ --kn-menu-bg: var(--kn-surface); --kn-menu-border: var(--kn-border); --kn-menu-radius: var(--kn-radius-md); --kn-menu-pad: 0.35rem; --kn-menu-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); --kn-menu-item-pad: 0.5rem 0.85rem; --kn-menu-item-hover-bg: color-mix(in srgb, var(--kn-accent) 12%, transparent); /* [REQ-567, REQ-568, REQ-569] Page-template scale. */ --kn-page-hero-pad: 4rem 1.5rem; --kn-page-section-pad: 2.5rem 1.5rem; --kn-page-section-gap: 1.5rem; --kn-page-grid-min-col: 280px; --kn-page-grid-gap: 1rem; /* [REQ-570] Theme-switcher palettes — `` swaps these by re-declaring `--kn-accent` / `--kn-bg` / etc. on the host element so descendant components inherit the override. Default palette is the base brand vars above; named palettes layer on top. */ --kn-theme-palette: default; /* [REQ-581, REQ-582] Shared elevation tokens — referenced by tooltip + toast (and any future overlay) so authors override shadow depth in one place. Match the established window-shadow contract. */ --kn-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --kn-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --kn-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); }