/* ============================================================================= Project design tokens — game-dev-demo showroom ----------------------------------------------------------------------------- Three layers, in dependency order: 1. PRIMITIVE raw scales. No meaning. Never referenced by components. 2. SEMANTIC role aliases. This is the only layer UI code should touch. 3. PLAY canvas palette. Read at runtime by js/engine/palette.js so all 51 games are skinned by the same source of truth. Retheming the showroom = replace the PRIMITIVE block and the `--yj-play-*` hues. The SEMANTIC layer and every consumer stay untouched. Tuned dark-first: this runs on a projector / large screen in a lit room, where a light UI blooms and washes out. Light theme is provided for completeness via [data-theme="light"]. ========================================================================== */ :root { /* ---------------------------------------------------------------- 1. PRIMITIVE */ /* Neutral ramp — slightly blue-cool so accents read warm against it */ --yj-neutral-0: #06070c; --yj-neutral-50: #0b0d16; --yj-neutral-100: #11141f; --yj-neutral-200: #191d2b; --yj-neutral-300: #252a3c; --yj-neutral-400: #38405a; --yj-neutral-500: #5b6480; --yj-neutral-600: #8b93ad; --yj-neutral-700: #b6bcd0; --yj-neutral-800: #dcdfe8; --yj-neutral-900: #f4f6fb; /* Accent hues — each picked to stay distinguishable under projector gamma and to survive the three most common colour-vision deficiencies. */ --yj-hue-cherry: #ff4d6d; --yj-hue-amber: #ffb020; --yj-hue-lime: #8ce563; --yj-hue-jade: #2ee6a8; --yj-hue-cyan: #3ad8ff; --yj-hue-azure: #4d8dff; --yj-hue-violet: #a97bff; --yj-hue-magenta: #ff6ad5; /* Type */ --yj-font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", Roboto, sans-serif; --yj-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "D2Coding", monospace; /* Type scale — 1.25 minor third, 16px base */ --yj-text-2xs: 0.694rem; --yj-text-xs: 0.8rem; --yj-text-sm: 0.9rem; --yj-text-md: 1rem; --yj-text-lg: 1.25rem; --yj-text-xl: 1.563rem; --yj-text-2xl: 1.953rem; --yj-text-3xl: 2.441rem; --yj-text-4xl: 3.052rem; --yj-weight-regular: 400; --yj-weight-medium: 500; --yj-weight-semibold: 600; --yj-weight-bold: 700; --yj-leading-tight: 1.18; --yj-leading-snug: 1.35; --yj-leading-normal: 1.6; --yj-tracking-tight: -0.02em; --yj-tracking-normal: 0; --yj-tracking-wide: 0.08em; /* Space — 4px base grid */ --yj-space-0: 0; --yj-space-1: 0.25rem; --yj-space-2: 0.5rem; --yj-space-3: 0.75rem; --yj-space-4: 1rem; --yj-space-5: 1.5rem; --yj-space-6: 2rem; --yj-space-7: 3rem; --yj-space-8: 4rem; /* Radius */ --yj-radius-sm: 6px; --yj-radius-md: 10px; --yj-radius-lg: 16px; --yj-radius-xl: 24px; --yj-radius-full: 999px; /* Elevation — low-spread and dark, so cards separate without haze */ --yj-shadow-1: 0 1px 2px rgb(0 0 0 / 0.4); --yj-shadow-2: 0 4px 12px rgb(0 0 0 / 0.45); --yj-shadow-3: 0 12px 32px rgb(0 0 0 / 0.55); --yj-shadow-glow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 8px 40px rgb(0 0 0 / 0.6); /* Motion — one duration scale, two easings. Presentation pacing: nothing slower than 320ms, or it reads as lag from the back row. */ --yj-duration-fast: 120ms; --yj-duration-base: 200ms; --yj-duration-slow: 320ms; --yj-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --yj-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --yj-z-stage: 100; --yj-z-overlay: 200; --yj-z-toast: 300; /* ---------------------------------------------------------------- 2. SEMANTIC */ --yj-bg-canvas: var(--yj-neutral-0); --yj-bg-surface: var(--yj-neutral-100); --yj-bg-raised: var(--yj-neutral-200); --yj-bg-overlay: rgb(6 7 12 / 0.86); --yj-bg-inset: var(--yj-neutral-50); --yj-fg-primary: var(--yj-neutral-900); --yj-fg-secondary: var(--yj-neutral-700); --yj-fg-muted: var(--yj-neutral-600); --yj-fg-faint: var(--yj-neutral-500); --yj-fg-on-accent: var(--yj-neutral-0); --yj-border-subtle: rgb(255 255 255 / 0.07); --yj-border-default: rgb(255 255 255 / 0.12); --yj-border-strong: rgb(255 255 255 / 0.22); --yj-accent: var(--yj-hue-cherry); --yj-accent-soft: rgb(255 77 109 / 0.14); --yj-accent-border: rgb(255 77 109 / 0.42); --yj-focus-ring: var(--yj-hue-cyan); --yj-status-live: var(--yj-hue-jade); --yj-status-warn: var(--yj-hue-amber); --yj-status-danger: var(--yj-hue-cherry); /* ---------------------------------------------------------------- 3. PLAY */ /* Canvas-facing palette. js/engine/palette.js resolves these once at boot and hands every game the same object, so all 51 genres share a family look instead of each inventing its own colours. */ --yj-play-bg: #090b13; --yj-play-bg-alt: #10131f; --yj-play-grid: #1b2032; --yj-play-ink: #f4f6fb; --yj-play-ink-dim: #8b93ad; --yj-play-hero: var(--yj-hue-cyan); --yj-play-ally: var(--yj-hue-jade); --yj-play-foe: var(--yj-hue-cherry); --yj-play-neutral: var(--yj-hue-azure); --yj-play-prize: var(--yj-hue-amber); --yj-play-special: var(--yj-hue-violet); --yj-play-terrain: #2b3247; --yj-play-accent: var(--yj-hue-magenta); /* Ordered ramp for games that need N distinguishable series colours (match-3 gems, puzzle pieces, deck suits, sim zones). */ --yj-play-ramp-1: var(--yj-hue-cyan); --yj-play-ramp-2: var(--yj-hue-cherry); --yj-play-ramp-3: var(--yj-hue-amber); --yj-play-ramp-4: var(--yj-hue-jade); --yj-play-ramp-5: var(--yj-hue-violet); --yj-play-ramp-6: var(--yj-hue-lime); --yj-play-ramp-7: var(--yj-hue-magenta); --yj-play-ramp-8: var(--yj-hue-azure); } /* Light theme — kept in sync by role, not by copy-paste of raw values. */ :root[data-theme="light"] { --yj-bg-canvas: #f7f8fc; --yj-bg-surface: #ffffff; --yj-bg-raised: #eef0f7; --yj-bg-overlay: rgb(247 248 252 / 0.9); --yj-bg-inset: #e8ebf3; --yj-fg-primary: #0b0d16; --yj-fg-secondary: #383f57; --yj-fg-muted: #5b6480; --yj-fg-faint: #8b93ad; --yj-fg-on-accent: #ffffff; --yj-border-subtle: rgb(11 13 22 / 0.08); --yj-border-default: rgb(11 13 22 / 0.14); --yj-border-strong: rgb(11 13 22 / 0.26); --yj-shadow-1: 0 1px 2px rgb(11 13 22 / 0.08); --yj-shadow-2: 0 4px 12px rgb(11 13 22 / 0.10); --yj-shadow-3: 0 12px 32px rgb(11 13 22 / 0.14); --yj-shadow-glow: 0 0 0 1px rgb(11 13 22 / 0.06), 0 8px 40px rgb(11 13 22 / 0.12); } /* Governance: honour reduced-motion. Games keep simulating — only the showroom chrome stops animating — because a frozen demo reads as a crash. */ @media (prefers-reduced-motion: reduce) { :root { --yj-duration-fast: 1ms; --yj-duration-base: 1ms; --yj-duration-slow: 1ms; } }