/* Design tokens — every colour, type, spacing, radius, motion comes from here. */ :root { /* ── Palette ─────────────────────────────────── */ --color-soil: #1A1209; --color-bark: #2C1F0E; --color-moss: #2D3B1F; --color-amber: #C8860A; --color-parchment: #E8D5A3; --color-ash: #7A6E5F; --color-sunflower: #F5C842; --color-vine: #4A6741; --color-ember: #8B2E0F; --color-admin-accent: #B8732E; /* ── Surface ladder (dark-UI depth via overlay) ──────────── Each step is a slightly lighter overlay on top of soil; instead of shadows (which barely register on dark), we layer surfaces. */ --surface-0: #15100A; /* page base */ --surface-1: #1F1810; /* card resting */ --surface-2: #2A2118; /* card hover, popover */ --surface-3: #342A1F; /* nested, raised */ --surface-inset: #120D07; /* inset (inputs) */ /* ── Border ladder ───────────────────────────── */ --border-subtle: rgba(232, 213, 163, 0.06); --border-default: rgba(232, 213, 163, 0.10); --border-strong: rgba(232, 213, 163, 0.18); --border-amber: rgba(200, 134, 10, 0.35); /* ── Transparent variants (kept for legacy callers) ─────── */ --color-amber-05: rgba(200, 134, 10, 0.05); --color-amber-08: rgba(200, 134, 10, 0.08); --color-amber-10: rgba(200, 134, 10, 0.10); --color-amber-20: rgba(200, 134, 10, 0.20); --color-amber-30: rgba(200, 134, 10, 0.30); --color-ember-20: rgba(139, 46, 15, 0.20); --color-vine-20: rgba(74, 103, 65, 0.20); --color-parchment-10: rgba(232, 213, 163, 0.10); --color-white-05: rgba(255, 255, 255, 0.05); --color-white-06: rgba(255, 255, 255, 0.06); --color-white-10: rgba(255, 255, 255, 0.10); --color-black-40: rgba(0, 0, 0, 0.40); /* ── Typography ─────────────────────────────── */ --font-display: 'Cinzel', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Type scale — modular ~1.2 ratio, tuned by hand */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 — denser than 14 for Linear-like density */ --text-base: 0.9375rem; /* 15 — body */ --text-lg: 1.0625rem; /* 17 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --text-5xl: 3rem; /* 48 */ --text-6xl: 4rem; /* 64 */ --leading-tight: 1.15; --leading-snug: 1.4; --leading-normal: 1.55; --leading-relaxed: 1.7; /* Letter spacing */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.1em; --tracking-display: 0.12em; /* ── Spacing — 4px base ──────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ── Radius ──────────────────────────────────── */ --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* ── Layout ──────────────────────────────────── */ --sidebar-width: 240px; --nav-height: 52px; --max-content-width: 1240px; --max-prose-width: 680px; --max-form-width: 560px; /* ── Motion ──────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* gentle deceleration */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 260ms; --transition-fast: var(--duration-fast) var(--ease-out); --transition-base: var(--duration-base) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); /* ── Elevation (used sparingly on dark) ──────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55); /* ── Focus ───────────────────────────────────── */ --focus-ring: 0 0 0 2px var(--color-soil), 0 0 0 4px var(--color-amber); /* ── Starfield — a single pre-rasterized SVG tile (not live radial-gradient layers) so the renderer just decodes and tiles one small image instead of compositing ten gradients on every paint of the surface it's on. No animation, so it costs nothing beyond the initial paint either way. */ --starfield-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='20' cy='40' r='1.5' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='64' cy='136' r='2' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='104' cy='24' r='2.5' fill='%23fff' fill-opacity='0.85'/%3E%3Ccircle cx='142' cy='84' r='1.5' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='172' cy='156' r='2' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='36' cy='176' r='2.5' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='92' cy='184' r='1.5' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='190' cy='50' r='2' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='124' cy='110' r='1.5' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='10' cy='110' r='2' fill='%23fff' fill-opacity='0.7'/%3E%3C/svg%3E"); --starfield-size: 200px 200px; /* ── Z-index scale ───────────────────────────── */ --z-sticky: 100; --z-sidebar: 120; --z-overlay: 150; --z-drawer: 160; --z-dropdown: 200; --z-modal: 300; --z-toast: 400; } /* Admin context — retints amber accents to copper when current user is admin. */ .admin-context { --color-amber: var(--color-admin-accent); --border-amber: rgba(184, 115, 46, 0.35); --color-amber-05: rgba(184, 115, 46, 0.05); --color-amber-08: rgba(184, 115, 46, 0.08); --color-amber-10: rgba(184, 115, 46, 0.10); --color-amber-20: rgba(184, 115, 46, 0.20); --color-amber-30: rgba(184, 115, 46, 0.30); } /* World themes set their accent vars on ; let body inherit them back through .admin-context instead of staying pinned to admin copper. */ html[data-game-view="minecraft"] .admin-context, html[data-game-view="vintage-story"] .admin-context { --color-amber: unset; --border-amber: unset; --color-amber-05: unset; --color-amber-08: unset; --color-amber-10: unset; --color-amber-20: unset; --color-amber-30: unset; }