/* ════════════════════════════════════════════════════════════════════ base.css — design tokens, reset, typography. Dark is the default; the .light class on flips the palette. The accent color is injected by JS as --accent / --on-accent. ════════════════════════════════════════════════════════════════════ */ :root { --text-scale: 1; /* dark palette (default) */ --bg0: #0c0f14; --bg1: #11151c; --card: #161b24; --card-2: #1d2330; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); --text: #edf1f7; --dim: rgba(237, 241, 247, 0.6); --faint: rgba(237, 241, 247, 0.38); --accent: #ff6b5e; --on-accent: #ffffff; --danger: #ff5d6c; --good: #3ddc97; --warn: #f5a623; --shadow: 0 12px 32px rgba(0, 0, 0, 0.38); --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.25); --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; --serif: Georgia, "Iowan Old Style", "Times New Roman", serif; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; color-scheme: dark; } html.light { --bg0: #f4f2ee; --bg1: #faf8f5; --card: #ffffff; --card-2: #f3f1ed; --line: rgba(22, 27, 36, 0.1); --line-strong: rgba(22, 27, 36, 0.2); --text: #1b202a; --dim: rgba(27, 32, 42, 0.62); --faint: rgba(27, 32, 42, 0.4); --shadow: 0 12px 32px rgba(30, 30, 40, 0.12); --shadow-soft: 0 4px 14px rgba(30, 30, 40, 0.08); color-scheme: light; } /* ── reset ── */ * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: calc(16px * var(--text-scale)); } body { font-family: var(--sans); background: var(--bg0); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* subtle ambient glow that follows the accent */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(1100px 500px at 75% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 65%), radial-gradient(900px 600px at -10% 110%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%); z-index: 0; } #app { position: relative; z-index: 1; min-height: 100vh; } /* ── western backdrop (campaigns whose starter world carries it) ── A dusty sunset wash replaces the accent glow, and a mesa-and-saguaro horizon rises along the bottom — faint enough to read over. */ html.backdrop-western body::before { background: radial-gradient(1100px 520px at 72% -10%, rgba(232, 148, 58, 0.13), transparent 65%), radial-gradient(900px 600px at -10% 110%, rgba(176, 98, 45, 0.1), transparent 60%); } html.backdrop-western body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: min(26vh, 240px); pointer-events: none; z-index: 0; opacity: 0.11; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='240' viewBox='0 0 700 240'%3E%3Cg fill='%23b06f3a'%3E%3Cpath d='M0 240 L0 178 L28 172 L40 120 L52 116 L60 70 L120 70 L128 114 L142 120 L150 170 L190 178 L230 240 Z'/%3E%3Cpath d='M450 240 L450 196 L470 192 L478 148 L530 148 L538 190 L560 196 L575 240 Z'/%3E%3Cpath d='M0 240 L0 230 Q175 222 350 230 Q525 238 700 228 L700 240 Z'/%3E%3C/g%3E%3Cg stroke='%23b06f3a' fill='none' stroke-linecap='round'%3E%3Cpath d='M331 240 V108' stroke-width='20'/%3E%3Cpath d='M303 172 v-26' stroke-width='13'/%3E%3Cpath d='M303 150 q0 24 28 26' stroke-width='13'/%3E%3Cpath d='M359 152 v-18' stroke-width='12'/%3E%3Cpath d='M359 138 q0 22 -28 24' stroke-width='12'/%3E%3Cpath d='M628 240 V160' stroke-width='14'/%3E%3Cpath d='M609 196 v-16' stroke-width='9'/%3E%3Cpath d='M609 182 q0 16 19 18' stroke-width='9'/%3E%3C/g%3E%3C/svg%3E") left bottom / auto 100% repeat-x; } html.light.backdrop-western body::after { opacity: 0.08; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } a { color: var(--accent); } ul { list-style-position: inside; } em { font-style: italic; } code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.9em; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; padding: 0.05em 0.4em; } h1, h2, h3 { line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; } .dim { color: var(--dim); } .small { font-size: 0.86rem; } .accent-text { color: var(--accent); font-weight: 600; } /* generic card */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--shadow-soft); } /* banners */ .banner { border-radius: var(--r-md); padding: 0.9rem 1.1rem; margin-bottom: 1.2rem; border: 1px solid var(--line-strong); background: var(--card); } .banner-warn { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--card)); } /* scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); } ::-webkit-scrollbar-track { background: transparent; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* screen transitions */ .screen { animation: screenIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }