/* * Lamplight design system — shared tokens + base components for Epic 4. * * This file is purely additive: it must not change how any current page * looks. Every page links this file BEFORE its own stylesheet, so a page's * local `:root` block (which still redeclares the overlapping token names) * wins by source order. Base components below are namespaced under `ds-` * so they cannot collide with existing classes like `.primary-button`, * `.toggle-switch`, or `.setting-panel`. * * See docs/design-vision.md for the full palette + typography rationale. */ :root { /* Palette — light (default) */ --bg: #f4f1f6; --surface: #ffffff; --surface-2: #f8f5fb; --surface-3: #efeaf5; --line: #e5def0; --text: #241d2b; --text-dim: #534a5e; --muted: #736980; --honey: #df8a21; --honey-bright: #f0a23b; --honey-deep: #b76b13; --peri: #5763cb; /* Supporting tokens not in the palette table, grounded in current usage */ --danger: #b3453f; --success: #4f8f5b; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 4px 14px rgba(36, 29, 43, 0.08); --shadow-md: 0 20px 60px rgba(36, 29, 43, 0.14); /* Typography */ --font-display: ui-rounded, "SF Pro Rounded", Quicksand, Comfortaa, system-ui, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.5rem; } /* Night — theme.js (#100) toggles this via [data-theme="night"] on ; legacy pages still ship their own light :root block so this stays dormant there until #104–#111 migrate them onto the shared tokens. */ [data-theme="night"] { --bg: #16121c; --surface: #211a2b; --surface-2: #2a2236; --surface-3: #352b44; --line: #382f48; --text: #f3ede9; --text-dim: #cbc1d2; --muted: #9b90ad; --honey: #f6b65a; --honey-bright: #ffc878; --honey-deep: #d68f37; --peri: #a9b8f4; } /* ---------------------------------------------------------------------- */ /* Base components — all namespaced under `ds-` to avoid clobbering */ /* existing page-local component classes. */ /* ---------------------------------------------------------------------- */ .ds-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; padding: 10px 20px; border: none; border-radius: var(--radius-pill); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .ds-btn--primary { background: linear-gradient(135deg, var(--honey-bright), var(--honey)); color: #ffffff; box-shadow: var(--shadow-sm); } .ds-btn--primary:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .ds-btn--secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); } .ds-btn--ghost { background: transparent; color: var(--text-dim); } .ds-btn--ghost:hover { background: var(--surface-2); } .ds-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px; } .ds-field { display: flex; flex-direction: column; gap: 6px; } .ds-field input, .ds-field textarea { font-family: var(--font-body); font-size: var(--text-md); color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 14px; } .ds-field input:focus, .ds-field textarea:focus { outline: none; border-color: var(--peri); box-shadow: 0 0 0 3px rgba(87, 99, 203, 0.15); } .ds-switch { position: relative; display: inline-flex; align-items: center; width: 44px; height: 24px; border-radius: var(--radius-pill); background: var(--surface-3); border: 1px solid var(--line); cursor: pointer; transition: background 0.15s ease; } .ds-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.15s ease; } .ds-switch[aria-checked="true"] { background: var(--honey); } .ds-switch[aria-checked="true"]::after { transform: translateX(20px); } /* Avatars sit on a faint honey-tinted disc so the buddy always reads as "lit" */ .ds-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle, rgba(223, 138, 33, 0.22), rgba(223, 138, 33, 0) 70%); overflow: visible; } .ds-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }