/* Design tokens — Linen. * * Semantic names, as the Design System canvas (5a) names them: a component asks for * --surface-raised, never for a colour. Light and dark are two values of the same token, chosen * separately, so dark is a night version of the same room rather than a negative. * * THEME IS TWO COLOURS (Theme canvas). --accent-base and --ground-base are the only inputs, set on * from the person's choice; every other light-mode colour is mixed from them in OKLCH with * the canvas's own ratios. Dark surfaces are fixed brown-blacks; the dark accent is the accent * lifted 22 % toward white. Ink, danger and success never change, so meaning survives any theme. * * `data-theme` on is always "light" or "dark": "Match" is resolved to one of them by * theme.js (and by the inline script in index.html before first paint), so these rules exist once. */ :root { --accent-base: #B9542A; --ground-base: #F5F0E8; /* Type. Newsreader only at 21 px and above, only for names and questions. `--ts` is the text * size a person chose on You (0.875 – 1.25); every size in the ramp scales with it. */ --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; --ts: 1; --t-display: calc(44px * var(--ts)); --t-title: calc(38px * var(--ts)); --t-question: calc(28px * var(--ts)); --t-heading: calc(21px * var(--ts)); --t-lead: calc(19px * var(--ts)); --t-conversation: calc(16.5px * var(--ts)); --t-body: calc(15.5px * var(--ts)); --t-control: calc(15px * var(--ts)); --t-button: calc(14px * var(--ts)); --t-meta: calc(14px * var(--ts)); --t-small: calc(13px * var(--ts)); --t-label: calc(12px * var(--ts)); --t-code: calc(13.5px * var(--ts)); /* Space: 4-based, named by use. */ --s-hair: 4px; --s-tight: 8px; --s-inset: 12px; --s-gap: 16px; --s-card: 20px; --s-message: 26px; --s-margin: 32px; --s-page: 56px; --w-conversation: 720px; --w-settings: 760px; --w-sidebar: 284px; --hit: 34px; /* Radius. */ --r-chip: 6px; --r-row: 10px; --r-control: 14px; --r-card: 16px; --r-sheet: 20px; --r-bubble: 22px 22px 6px 22px; --r-pill: 999px; /* Motion (Motion canvas). Exits are entrances × 0.8; nothing exceeds 300 ms. */ --d-press: 100ms; --d-micro: 140ms; --d-fade: 160ms; --d-message: 180ms; --d-menu-in: 180ms; --d-menu-out: 144ms; --d-modal-in: 240ms; --d-modal-out: 190ms; --d-permission: 260ms; --d-open: 260ms; --stagger: 40ms; --breath: 2400ms; --ease-enter: cubic-bezier(0.23, 1, 0.32, 1); --ease-exit: cubic-bezier(0.23, 1, 0.32, 1); --ease-move: cubic-bezier(0.77, 0, 0.175, 1); --ease-spring: cubic-bezier(0.34, 1.11, 0.64, 1); } /* ------------------------------------------------------------------------------------------ */ /* Light: mixed from the two inputs. */ :root, :root[data-theme='light'] { color-scheme: light; --ground: var(--ground-base); --ground-sunken: color-mix(in oklch, var(--ground-base), #B8945E 8%); --surface-raised: color-mix(in oklch, var(--ground-base), white 60%); --surface-you: color-mix(in oklch, var(--ground-base), #B8945E 14%); --surface-selected: color-mix(in oklch, var(--ground-base), #B8945E 22%); --surface-hover: var(--ground-sunken); --line: color-mix(in oklch, var(--ground-base), #A08462 18%); --line-strong: color-mix(in oklch, var(--ground-base), #A08462 28%); --line-soft: color-mix(in oklch, var(--ground-base), #B8945E 8%); --track: color-mix(in oklch, var(--ground-base), #B8945E 22%); --avatar-you: color-mix(in oklch, var(--ground-base), #B8945E 40%); --knob: #fff; --knob-off: #fff; --switch-off: color-mix(in oklch, var(--ground-base), #B8945E 30%); --ink: #1E1A16; --ink-soft: #4F4840; --ink-quiet: #857B70; --ink-placeholder: #9A9085; --ink-disabled: #C9BFB0; --accent: var(--accent-base); --accent-hover: color-mix(in oklch, var(--accent-base), #1E1A16 10%); --accent-pressed: color-mix(in oklch, var(--accent-base), #1E1A16 22%); --accent-text: var(--accent-base); --accent-wash: color-mix(in oklch, var(--accent-base) 12%, var(--ground-base)); --accent-line: color-mix(in oklch, var(--accent-base) 30%, var(--ground-base)); --on-accent: #fff; --danger: #A8382B; --danger-hover: #963226; --danger-pressed: #7E2A20; --danger-wash: #F6E4E0; --success: #2F7A4A; --on-danger: #fff; /* Elevation: ink at low alpha, never grey. */ --e-lifted: 0 1px 0 rgba(30, 26, 22, 0.03), 0 10px 30px -18px rgba(30, 26, 22, 0.25); --e-lifted-strong: 0 1px 0 rgba(30, 26, 22, 0.03), 0 18px 40px -22px rgba(30, 26, 22, 0.28); --e-floating: 0 2px 6px rgba(30, 26, 22, 0.06), 0 22px 50px -18px rgba(30, 26, 22, 0.32); --e-card: 0 1px 2px rgba(30, 26, 22, 0.08), 0 24px 60px -24px rgba(30, 26, 22, 0.25); --scrim: rgba(30, 26, 22, 0.32); /* Toasts and tooltips invert whichever theme is active. */ --inverse: #1E1A16; --inverse-ink: #F1EBE2; --inverse-quiet: #968C80; --inverse-accent: color-mix(in oklch, var(--accent-base), white 22%); } /* ------------------------------------------------------------------------------------------ */ /* Dark: the same tokens, chosen again. */ :root[data-theme='dark'] { color-scheme: dark; --ground: #1B1815; --ground-sunken: #221E1A; --surface-raised: #26221D; --surface-you: #2E2924; --surface-selected: #3A3129; --surface-hover: #26221D; --line: #3F332B; --line-strong: #4A3F36; --line-soft: #332E28; --track: #3F332B; --avatar-you: #3A3129; --knob: #1B1815; --knob-off: #968C80; --switch-off: #3F332B; --ink: #F1EBE2; --ink-soft: #CFC6BA; --ink-quiet: #968C80; --ink-placeholder: #6F665C; --ink-disabled: #5A524A; --accent: color-mix(in oklch, var(--accent-base), white 22%); --accent-hover: color-mix(in oklch, var(--accent-base), white 32%); --accent-pressed: color-mix(in oklch, var(--accent-base), white 12%); --accent-text: color-mix(in oklch, var(--accent-base), white 52%); --accent-wash: color-mix(in oklch, var(--accent-base) 22%, #1B1815); --accent-line: color-mix(in oklch, var(--accent-base) 38%, #1B1815); /* Dark ink on the accent: white-on-orange fails at 14 px. */ --on-accent: #1B1815; --danger: #E07A6B; --danger-hover: #E88C7E; --danger-pressed: #C9685A; --danger-wash: #3A2320; --success: #6FB98A; --on-danger: #1B1815; --e-lifted: 0 1px 0 rgba(0, 0, 0, 0.2), 0 12px 32px -16px rgba(0, 0, 0, 0.6); --e-lifted-strong: 0 1px 0 rgba(0, 0, 0, 0.2), 0 18px 40px -20px rgba(0, 0, 0, 0.65); --e-floating: 0 2px 8px rgba(0, 0, 0, 0.35), 0 24px 56px -16px rgba(0, 0, 0, 0.7); --e-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 60px -24px rgba(0, 0, 0, 0.6); --scrim: rgba(0, 0, 0, 0.5); --inverse: #F1EBE2; --inverse-ink: #1E1A16; --inverse-quiet: #857B70; --inverse-accent: var(--accent-base); } /* Hit targets never under 44 px on the phone. */ @media (max-width: 859px) { :root { --hit: 44px; } }