/* ========================================================================== Chatterbug — foundations Design tokens, reset, typography and the eight colour themes. Themes are applied by setting data-theme on ; every surface derives from --accent so one attribute recolours the whole interface. ========================================================================== */ :root { /* Neutrals — warm greys, so the interface feels friendly rather than clinical */ --ink: #1b1d23; --ink-soft: #4a4f5c; --ink-faint: #767d8c; --line: #e2e5ec; --line-soft: #eef0f5; --surface: #ffffff; --surface-2: #f7f8fb; --surface-3: #eff1f6; /* Semantic */ --ok: #1a8a4f; --ok-tint: #e2f4ea; --warn: #b26a00; --warn-tint: #fdf1de; --danger: #c22b2b; --danger-tint: #fbe9e9; --info: #0d6ecd; --info-tint: #e6f0fc; /* Default theme (ocean) — overridden by [data-theme] below */ --accent: #0d7ee0; --accent-deep: #0a5fa8; --accent-tint: #e5f1fc; --on-accent: #ffffff; /* Shape and depth */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(20, 24, 35, .06), 0 1px 3px rgba(20, 24, 35, .04); --shadow-md: 0 4px 10px rgba(20, 24, 35, .07), 0 2px 4px rgba(20, 24, 35, .04); --shadow-lg: 0 18px 40px rgba(20, 24, 35, .13), 0 4px 12px rgba(20, 24, 35, .06); --space: 4px; --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-round: 'Segoe UI Variable Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --speed: 180ms; --ease: cubic-bezier(.22, .68, .36, 1); } [data-theme="ocean"] { --accent:#0d7ee0; --accent-deep:#0a5fa8; --accent-tint:#e5f1fc; } [data-theme="grape"] { --accent:#7c4dd6; --accent-deep:#5e37a8; --accent-tint:#efe8fb; } [data-theme="forest"] { --accent:#1a8a4f; --accent-deep:#12653a; --accent-tint:#e2f4ea; } [data-theme="sunset"] { --accent:#e2611b; --accent-deep:#b34813; --accent-tint:#fdeee4; } [data-theme="bubblegum"] { --accent:#d63b83; --accent-deep:#a72a64; --accent-tint:#fce8f2; } [data-theme="sunshine"] { --accent:#b8860b; --accent-deep:#8a6508; --accent-tint:#fdf3d9; } [data-theme="teal"] { --accent:#0d8a8a; --accent-deep:#0a6666; --accent-tint:#e0f4f4; } [data-theme="cherry"] { --accent:#cf3030; --accent-deep:#a02323; --accent-tint:#fce9e9; } /* --------------------------------------------------------------- reset --- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--surface-2); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } h1 { font-size: 1.75rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--accent-deep); text-decoration-thickness: 1.5px; text-underline-offset: 2px; } a:hover { color: var(--accent); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } img, svg { max-width: 100%; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Visible, consistent focus for keyboard users on every interactive element. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link, for keyboard and screen-reader users. */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 999; background: var(--accent); color: var(--on-accent); padding: 10px 18px; border-radius: var(--r-md); font-weight: 600; transition: top var(--speed) var(--ease); } .skip-link:focus { top: 8px; color: var(--on-accent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------- utilities --- */ .stack { display: flex; flex-direction: column; gap: 12px; } .stack-s { display: flex; flex-direction: column; gap: 6px; } .stack-l { display: flex; flex-direction: column; gap: 20px; } .row { display: flex; align-items: center; gap: 10px; } .row-tight { display: flex; align-items: center; gap: 6px; } .spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .wrap { flex-wrap: wrap; } .grow { flex: 1 1 auto; min-width: 0; } .center { display: flex; align-items: center; justify-content: center; } .muted { color: var(--ink-faint); } .soft { color: var(--ink-soft); } .small { font-size: .875rem; } .tiny { font-size: .78rem; } .bold { font-weight: 700; } .semi { font-weight: 600; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .hidden { display: none !important; } .mono { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; }