/* tokens.css - GaMeZz World design tokens * * Patterns taken from Poki / Playzen: * - flat white surface, no gradients * - 1-2px subtle borders instead of heavy shadows * - chunky 16px border-radius on cards * - 100px pill radius on buttons and search * - generous whitespace (4pt grid, but Poki's spacing scale is * xs=4, s=8, m=16, l=24, xl=32, 2xl=48, 3xl=64) * - single accent color used sparingly (links, primary buttons, focus rings) * - Inter for body, bold weights for headings */ :root { /* Color tokens */ --bg: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #f5f6f8; --bg-soft: #fafbfc; --bg-canvas: #f0f2f6; --surface: #ffffff; --surface-2: #eef0f4; --border: #e4e7eb; --border-strong: #cdd2da; --text: #0f1320; --text-muted: #4d5468; --text-dim: #8a92a6; /* Accent: royal blue, deliberately not Poki-teal and not Playzen-purple. Distinct enough to be its own identity. */ --accent: #2a5cff; --accent-hover: #1a44d9; --accent-soft: #e8edff; --accent-text: #ffffff; --warn: #f5a623; --danger: #ef4444; --success: #10b981; --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.05); --shadow-md: 0 4px 12px rgba(20, 24, 40, 0.08); --shadow-lg: 0 8px 24px rgba(20, 24, 40, 0.12); /* Spacing scale (Poki-inspired) */ --space-xs: 4px; --space-s: 8px; --space-m: 16px; --space-l: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* Border radius */ --radius-1: 4px; --radius-2: 8px; --radius-3: 12px; --radius-4: 16px; --radius-pill: 100px; /* Typography */ --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --fs-4xl: 40px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.2; --lh-base: 1.5; --lh-loose: 1.7; /* Motion: minimal. We rely on hover-preview iframes for visual interest, not on CSS transforms/transitions. */ --motion-fast: 0ms; --motion-default: 0ms; --motion-slow: 0ms; --ease-out: linear; --ease-in-out: linear; /* Layout: full-width container (no side margin), sticky header, narrow sidebar. The page is edge-to-edge; section backgrounds do the visual segmentation. */ --container-max: 100%; --container-pad: 24px; --header-height: 64px; --sidebar-width: 240px; --grid-gap: var(--space-m); --grid-gap-mobile: var(--space-m); color-scheme: light; } /* ============================================================ DARK THEME — applied when . Site.js toggles the attribute on click and on prefers-color-scheme: dark (when user hasn't picked explicitly). Override every color token used across the app. Don't override spacing, radius, type, or motion — those stay constant. ============================================================ */ [data-theme="dark"] { --bg: #0f1320; --bg-elevated: #181c2c; --bg-subtle: #1b2032; --bg-soft: #141826; --bg-canvas: #1a1f30; --surface: #181c2c; --surface-2: #232838; --border: #2a3046; --border-strong: #3a4262; --text: #f2f4fa; --text-muted: #b1b8cc; --text-dim: #7d8499; /* Accent — slightly brighter in dark for contrast on dark surfaces. */ --accent: #5b7cff; --accent-hover: #7795ff; --accent-soft: #1f2a55; --accent-text: #ffffff; --warn: #f5a623; --danger: #ef4444; --success: #10b981; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); color-scheme: dark; }