/* ══════════════════════════════════════════════════════════════════════════ RYAN'S WORLD — MASTER DESIGN TOKENS One foundation for every surface: door/landing, art, pickleball, PT, Nexus. PRINCIPLE — neutral base, nested specialization: 90% neutral surfaces + text (warm greys: cream/ivory light, umber dark) 8% muted secondary (dim text, borders, hairlines, subtle tints) 2% functional color (--accent gold + status colors) — signal only Sub-areas MAY override: --accent* , texture/grid vars, motion vars. Sub-areas MUST NOT override: type scale, spacing, radius, frame/surface ramp. Default theme = DARK UMBER. Light theme = CREAM/IVORY via . ══════════════════════════════════════════════════════════════════════════ */ /* Share Tech Mono backs --font-mono below. It was declared but never loaded here, so every hub outside the art site silently fell back to the system monospace and the shared "← Ryan's World" button didn't match. */ @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&family=Source+Sans+3:wght@300;400;500;600&family=Share+Tech+Mono&display=swap'); :root { /* ── SURFACES — dark umber (warm dark brown, never near-black) ───────── */ --bg: #1c1611; /* canvas / floor */ --bg-raised: #241d16; /* cards, panels */ --bg-float: #2c241b; /* nested / hovered surfaces */ --bg-inner: #352b21; /* inputs, wells, active states */ --bg-frame: #191309; /* chrome bars, footers — recedes below canvas */ /* ── LINES (8% band) ─────────────────────────────────────────────────── */ --line: rgba(240, 226, 200, 0.09); --line-mid: rgba(240, 226, 200, 0.17); --line-strong: rgba(240, 226, 200, 0.34); /* ── TEXT ────────────────────────────────────────────────────────────── */ --text-1: rgba(245, 236, 220, 0.92); /* primary */ --text-2: rgba(245, 236, 220, 0.58); /* secondary */ --text-3: rgba(245, 236, 220, 0.32); /* tertiary / labels */ --text-on-accent: #1c1611; /* ── ACCENT — gold. 2% budget. Signal, never decoration. ─────────────── */ --accent: #c9a84c; --accent-mid: rgba(201, 168, 76, 0.50); --accent-dim: rgba(201, 168, 76, 0.20); --accent-bg: rgba(201, 168, 76, 0.07); /* ── FUNCTIONAL — status only ────────────────────────────────────────── */ --fn-confirm: #4fae62; --fn-confirm-bg: rgba(79, 174, 98, 0.12); --fn-destruct: #d15a4e; --fn-destruct-bg: rgba(209, 90, 78, 0.12); --fn-warn: #d2a02c; --fn-warn-bg: rgba(210, 160, 44, 0.12); --fn-info: #5a86bd; --fn-info-bg: rgba(90, 134, 189, 0.12); /* ── ELEVATION (theme-dependent weight) ──────────────────────────────── */ --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.35); /* Tightened from 0 6px 20px: that reached ~26px past the bar and washed over the first heading of every hub's workspace. */ --shadow-bar: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-float:0 16px 40px rgba(0, 0, 0, 0.60); --scrim: rgba(12, 8, 4, 0.60); /* ── TYPOGRAPHY (LOCKED — sub-areas inherit) ─────────────────────────── */ --font-head: 'Lora', Georgia, serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --font-mono: 'Share Tech Mono', ui-monospace, monospace; --fs-xs: 0.70rem; --fs-sm: 0.82rem; --fs-md: 0.95rem; --fs-lg: 1.15rem; --fs-xl: 1.55rem; --fs-2xl: 2.05rem; --fs-3xl: 2.75rem; --lh-tight: 1.2; --lh-body: 1.55; --track-label: 0.10em; /* uppercase micro-labels */ /* ── SPACING (LOCKED — 4px base) ─────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ── SHAPE (LOCKED) ──────────────────────────────────────────────────── */ --radius: 2px; /* default — sharp, precise */ --radius-md: 6px; --radius-lg: 16px; /* drawers, pills only */ --border: 1px; --maxw: 880px; /* ── MOTION (sub-areas may retune) ───────────────────────────────────── */ --ease-fast: all 0.15s ease; --ease: all 0.20s ease; --ease-slow: all 0.35s ease; } /* ══ LIGHT — cream / ivory ════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #f5f0e8; --bg-raised: #faf6ee; --bg-float: #efe9de; --bg-inner: #e5ded0; --bg-frame: #e8e1d4; --line: rgba(60, 45, 20, 0.11); --line-mid: rgba(60, 45, 20, 0.21); --line-strong: rgba(60, 45, 20, 0.40); --text-1: rgba(30, 22, 8, 0.92); --text-2: rgba(30, 22, 8, 0.58); --text-3: rgba(30, 22, 8, 0.34); --text-on-accent: #faf6ee; --accent: #8a6a1a; --accent-mid: rgba(138, 106, 26, 0.50); --accent-dim: rgba(138, 106, 26, 0.18); --accent-bg: rgba(138, 106, 26, 0.06); --fn-confirm: #3a7d44; --fn-confirm-bg: rgba(58, 125, 68, 0.10); --fn-destruct: #b94040; --fn-destruct-bg: rgba(185, 64, 64, 0.10); --fn-warn: #9a7020; --fn-warn-bg: rgba(154, 112, 32, 0.10); --fn-info: #3a5fa0; --fn-info-bg: rgba(58, 95, 160, 0.10); --shadow-1: 0 1px 3px rgba(60, 45, 20, 0.10); --shadow-bar: 0 2px 8px rgba(60, 45, 20, 0.10); --shadow-float:0 16px 40px rgba(60, 45, 20, 0.18); --scrim: rgba(30, 22, 8, 0.35); } /* ══ BASE ═════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } body { margin: 0; background: var(--bg); color: var(--text-1); font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; transition: background 0.25s ease, color 0.25s ease; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; line-height: var(--lh-tight); margin: 0; } /* ── Shared primitives ───────────────────────────────────────────────────── */ .rw-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-3); } .rw-card { background: var(--bg-raised); border: var(--border) solid var(--line); border-radius: var(--radius); padding: var(--sp-5); color: var(--text-1); text-decoration: none; display: block; transition: var(--ease); } .rw-card:hover { border-color: var(--line-strong); transform: translateY(-2px); } .rw-btn { font-family: var(--font-body); font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); border: var(--border) solid var(--line-mid); background: var(--bg-raised); color: var(--text-1); cursor: pointer; transition: var(--ease-fast); } .rw-btn:hover { border-color: var(--line-strong); background: var(--bg-float); } .rw-btn-accent { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } /* ── Theme toggle (shared across all hubs) ──────────────────────────────── */ .rw-theme-toggle { position: fixed; top: var(--sp-4); right: var(--sp-4); z-index: 50; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius); cursor: pointer; background: var(--bg-raised); border: var(--border) solid var(--line); color: var(--text-2); transition: var(--ease-fast); padding: 0; } .rw-theme-toggle:hover { color: var(--accent); border-color: var(--line-strong); } .rw-theme-toggle .rw-icon-sun { display: none; } [data-theme="light"] .rw-theme-toggle .rw-icon-sun { display: block; } [data-theme="light"] .rw-theme-toggle .rw-icon-moon { display: none; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }