/* Sotto — shared design system. Elegant, simple, functional. One stylesheet, full light/dark theming via CSS custom properties. Theme is selected by `data-theme="light|dark"` on (set by theme.js); when absent we honour the OS via prefers-color-scheme. Colour tokens are SEMANTIC, not literal, so the same component markup styles correctly in both themes. The advice-type accents (now/ambient/answer/note/ action/summary/translation) mirror web/panel.html so the wire contract and the visual language stay in lockstep. */ /* ----------------------------------------------------------------- tokens */ :root { /* Geometry & type — shared across themes. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px -12px rgba(0, 0, 0, .25); --ring: 0 0 0 3px var(--accent-ring); --t-fast: .14s ease; --t-med: .22s ease; } /* Dark theme (default look — matches the existing panel). */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1116; --bg-grad: radial-gradient(1200px 600px at 80% -10%, #141b26 0%, #0e1116 60%); --surface: #151a21; --surface-2: #12161c; --surface-3: #1b212a; --input-bg: #0b0e12; --border: #232a33; --border-strong: #2f3a47; --text: #e6e9ee; --text-dim: #aab3c0; --text-faint: #6b7686; --accent: #2563eb; --accent-hi: #3b82f6; --accent-contrast: #ffffff; --accent-ring: rgba(59, 130, 246, .35); --good: #4ade80; --bad: #f87171; --c-now: #f87171; --c-now-bg: rgba(248, 113, 113, .10); --c-ambient: #3b82f6; --c-ambient-bg: transparent; --c-answer: #a78bfa; --c-answer-bg: rgba(167, 139, 250, .08); --c-note: #64748b; --c-note-bg: rgba(100, 116, 139, .08); --c-action: #fbbf24; --c-action-bg: rgba(251, 191, 36, .08); --c-summary: #34d399; --c-summary-bg: rgba(52, 211, 153, .10); --c-translation: #22d3ee;--c-translation-bg: rgba(34, 211, 238, .08); --c-you: #4ade80; --c-you-bg: rgba(74, 222, 128, .08); } /* Light theme. */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f6f9; --bg-grad: radial-gradient(1200px 600px at 80% -10%, #eaf0fb 0%, #f4f6f9 60%); --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eef1f6; --input-bg: #ffffff; --border: #e2e7ef; --border-strong: #d2d9e4; --text: #1a2230; --text-dim: #4a5567; --text-faint: #8a94a6; --accent: #2563eb; --accent-hi: #1d4ed8; --accent-contrast: #ffffff; --accent-ring: rgba(37, 99, 235, .22); --good: #16a34a; --bad: #dc2626; --c-now: #dc2626; --c-now-bg: rgba(220, 38, 38, .07); --c-ambient: #2563eb; --c-ambient-bg: transparent; --c-answer: #7c3aed; --c-answer-bg: rgba(124, 58, 237, .06); --c-note: #64748b; --c-note-bg: rgba(100, 116, 139, .06); --c-action: #d97706; --c-action-bg: rgba(217, 119, 6, .07); --c-summary: #059669; --c-summary-bg: rgba(5, 150, 105, .08); --c-translation: #0891b2;--c-translation-bg: rgba(8, 145, 178, .07); --c-you: #16a34a; --c-you-bg: rgba(22, 163, 74, .06); } /* When no explicit theme is set, follow the OS. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #f4f6f9; --bg-grad: radial-gradient(1200px 600px at 80% -10%, #eaf0fb 0%, #f4f6f9 60%); --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eef1f6; --input-bg: #ffffff; --border: #e2e7ef; --border-strong: #d2d9e4; --text: #1a2230; --text-dim: #4a5567; --text-faint: #8a94a6; --accent: #2563eb; --accent-hi: #1d4ed8; --accent-ring: rgba(37, 99, 235, .22); --good: #16a34a; --bad: #dc2626; --c-now: #dc2626; --c-now-bg: rgba(220, 38, 38, .07); --c-ambient: #2563eb; --c-ambient-bg: transparent; --c-answer: #7c3aed; --c-answer-bg: rgba(124, 58, 237, .06); --c-note: #64748b; --c-note-bg: rgba(100, 116, 139, .06); --c-action: #d97706; --c-action-bg: rgba(217, 119, 6, .07); --c-summary: #059669; --c-summary-bg: rgba(5, 150, 105, .08); --c-translation: #0891b2;--c-translation-bg: rgba(8, 145, 178, .07); --c-you: #16a34a; --c-you-bg: rgba(22, 163, 74, .06); } } /* ----------------------------------------------------------------- base */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font: 15px/1.5 var(--font); background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; color: var(--text); -webkit-font-smoothing: antialiased; transition: background-color var(--t-med), color var(--t-med); } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--accent-ring); } /* Scrollbars — quiet in both themes. */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); } *::-webkit-scrollbar-track { background: transparent; } /* ----------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 9px 14px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text); cursor: pointer; font-size: 14px; font-weight: 500; /* 23 of these are , not