@charset "UTF-8"; /* * Support Inbox — design system foundation. * Compiled by `yarn build:css` (Dart Sass) into app/assets/builds/application.css, * then fingerprinted and served by Propshaft. Tokens first, then layout regions, * then components. Light tokens on :root; named themes ride [data-theme="…"]. * System leaves unstamped so prefers-color-scheme picks Default or Midnight. * * Adding a theme (FRO-155): a catalog entry in Appearance::CATALOG, a `theme-` mixin that * starts from `theme-light` or `theme-dark`, and a `[data-theme=""]` line below. Nothing else — * the picker's preview, swatches and the contrast check (spec/system/theme_contrast_spec.rb) all * read the tokens. Literal colors live ONLY inside `@mixin theme-*` blocks; * spec/lib/stylesheet_theme_guardrails_spec.rb fails on one anywhere else. */ /* Self-hosted webfont for a theme. Declared globally but fetched lazily: a browser only downloads a face once something on the page is set in that family, and only the owning theme's tokens name it — so a theme's font loads when that theme is active (or its card is on screen in the picker), and never otherwise. The file goes in app/assets/fonts, a Propshaft load-path root, so the relative url resolves the way Phosphor's does; CSP font-src is 'self'. */ /* Gotham's faces (FRO-156): open stand-ins for Nooklyn's Hoefler Chronicle Display and Gotham SSm, whose cloud.typography kit is domain-locked and may not be copied. Both OFL-1.1; the license texts sit beside the files. Libre Caslon Display has one weight, and it is already the hairline display cut Genghis sets its headings in at 300 — so it answers every weight rather than letting the browser smear a faux bold onto it. */ @font-face { font-family: "Libre Caslon Display"; src: url("/assets/libre-caslon-display-latin-400-normal-25e2304e.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/assets/montserrat-latin-400-normal-a441a262.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/assets/montserrat-latin-500-normal-f289678f.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/assets/montserrat-latin-600-normal-806047de.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("/assets/montserrat-latin-700-normal-4cbfa40d.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* What every theme gets unless it says otherwise: the optional tokens and the formulas derived from the primitives. Included at the top of theme-light and theme-dark, so it lands on every element that carries data-theme — , and each mini-preview card in the picker — and a theme mixin can override any of it simply by setting the token after its base include. */ /* One assignment for both ways Midnight can arrive — an explicit Dark choice, or System on a dark OS — so the two selectors cannot drift. Comment / hairline / gradient tokens keep their theme-defaults formulas and retint themselves from the primitives below. */ /* Slack-style aubergine: warm plum chrome, pink accent. Built on Midnight so danger / success / shadows stay readable on a dark surface. */ /* Slack-style Hoth: icy paper, deep lake-blue accent. Light primitives only — Midnight's shadows and danger tones must not leak onto a pale page. */ /* TMS Hub as it actually looks: pale lavender page, white cards, purple-950 ink, electric violet accent — the Hub purple ramp, not Frontier blue, and not a dark invert of it. */ /* Nooklyn's own building (FRO-156): the near-black pages, white serif headlines, small uppercase sans captions and gold of nooklyn.com and Matrix. Values are Nooklyn's Genghis tokens — the dark palette, which is Nooklyn's default theme — named in each comment. Built on Midnight so the soft tints, comment band and shadows retint from these primitives. */ /* Creamsicle (FRO-158): orange sherbet on vanilla. Light primitives, so Default's danger, success and shadows stay tuned for a pale page. Ratios on #fffaf5: text 16.1:1, muted 5.9:1, accent as a link 5.0:1, white on the accent 5.2:1. The brighter #f76707 is for non-text fills only — it is 2.9:1 under white text, so it never goes on a button. */ /* Ember (FRO-158): glowing coals. Built on Midnight so the soft tints, comment band and shadows retint from these primitives. Ratios: text 16.4:1, muted 8.3:1, accent 7.1:1, and dark ink on the accent 7.1:1 — white on #ff7a1a would be 2.6:1. */ /* Bubblegum (FRO-159): pink on a pale blush. Light primitives, so Default's danger, success and shadows stay tuned for a pale page. Ratios on #fff7fb: text 15.5:1, muted 5.8:1, accent as a link 5.4:1, white on the accent 5.7:1. The bright #ff8cc6 is for decorative fills only (the picker card's bubble) — it is 2.2:1 under white text. */ /* Neon Flamingo (FRO-159): Miami night. Built on Midnight so the soft tints, comment band and shadows retint from these primitives. Ratios: text 16.6:1, muted 8.6:1, accent 6.1:1, and dark ink on the accent 6.1:1. Cyan is the second neon: the focus ring and links under the pointer. */ :root { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #ffffff; --color-surface-sunken: #f6f7f9; --color-surface-raised: #ffffff; --color-border: #e3e6ea; --color-border-strong: #cdd2d9; --color-text: #1b1f24; --color-muted: #6b7280; --color-accent: #2f6feb; --color-accent-soft: #eaf1fe; --color-danger: #b42318; --color-danger-soft: #fef3f2; --color-success: #067647; --color-success-soft: #ecfdf3; --color-warning: #b54708; --color-warning-soft: #fffaeb; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.10); --shadow-lg: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -8px rgba(16, 24, 40, 0.10); color-scheme: light; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 20px; /* Display sizes for the public explainer and the analytics report, where a figure has to outrank the label above it. The features hero has to hold a Chatwoot-scale headline without inventing a second type ramp. */ --text-2xl: 28px; --text-display: 40px; /* Large figures set at their default tracking read loose. Only worth applying at --text-xl and up; at body sizes it closes the letters up. */ --tracking-tight: -0.02em; } /* System (no data-theme) follows the OS. Any stamped theme owns the tokens completely — otherwise a dark OS would overlay Midnight on Aubergine / TMS / Hoth. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #1c2128; --color-surface-sunken: #111418; --color-surface-raised: #252b33; --color-border: #2e343c; --color-border-strong: #3d4450; --color-text: #f2f4f6; --color-muted: #9aa3af; --color-accent: #4c8dff; --color-accent-soft: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); /* White on #4c8dff is 3.2:1; the sunken ink is 5.8:1. */ --color-on-accent: #111418; --color-danger: #f97066; --color-danger-soft: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)); --color-success: #3bbf7a; --color-success-soft: color-mix(in srgb, var(--color-success) 16%, var(--color-surface)); --color-warning: #f79009; --color-warning-soft: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.55); color-scheme: dark; } } /* Not :root-only on purpose: the picker stamps data-theme on each card's mini-preview, so a card paints from the real tokens of the theme it shows rather than from a hand-copied swatch. */ [data-theme=light] { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #ffffff; --color-surface-sunken: #f6f7f9; --color-surface-raised: #ffffff; --color-border: #e3e6ea; --color-border-strong: #cdd2d9; --color-text: #1b1f24; --color-muted: #6b7280; --color-accent: #2f6feb; --color-accent-soft: #eaf1fe; --color-danger: #b42318; --color-danger-soft: #fef3f2; --color-success: #067647; --color-success-soft: #ecfdf3; --color-warning: #b54708; --color-warning-soft: #fffaeb; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.10); --shadow-lg: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -8px rgba(16, 24, 40, 0.10); color-scheme: light; } [data-theme=dark] { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #1c2128; --color-surface-sunken: #111418; --color-surface-raised: #252b33; --color-border: #2e343c; --color-border-strong: #3d4450; --color-text: #f2f4f6; --color-muted: #9aa3af; --color-accent: #4c8dff; --color-accent-soft: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); /* White on #4c8dff is 3.2:1; the sunken ink is 5.8:1. */ --color-on-accent: #111418; --color-danger: #f97066; --color-danger-soft: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)); --color-success: #3bbf7a; --color-success-soft: color-mix(in srgb, var(--color-success) 16%, var(--color-surface)); --color-warning: #f79009; --color-warning-soft: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.55); color-scheme: dark; } [data-theme=aubergine] { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #1c2128; --color-surface-sunken: #111418; --color-surface-raised: #252b33; --color-border: #2e343c; --color-border-strong: #3d4450; --color-text: #f2f4f6; --color-muted: #9aa3af; --color-accent: #4c8dff; --color-accent-soft: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); /* White on #4c8dff is 3.2:1; the sunken ink is 5.8:1. */ --color-on-accent: #111418; --color-danger: #f97066; --color-danger-soft: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)); --color-success: #3bbf7a; --color-success-soft: color-mix(in srgb, var(--color-success) 16%, var(--color-surface)); --color-warning: #f79009; --color-warning-soft: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.55); color-scheme: dark; --color-surface: #3f1242; --color-surface-sunken: #2a0c2d; --color-surface-raised: #4a154b; --color-border: #5c2a5e; --color-border-strong: #7a3d7c; --color-text: #f7eef7; --color-muted: #c9a8cb; --color-accent: #e01e5a; --color-on-accent: #ffffff; /* The #e01e5a fill as link text on plum is 3.3:1. */ --color-accent-text: #ff6b9a; /* Midnight's #f97066 on its own plum-tinted soft (an alert toast) is 4.2:1. */ --color-danger: #ff8077; } [data-theme=hoth] { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #ffffff; --color-surface-sunken: #f6f7f9; --color-surface-raised: #ffffff; --color-border: #e3e6ea; --color-border-strong: #cdd2d9; --color-text: #1b1f24; --color-muted: #6b7280; --color-accent: #2f6feb; --color-accent-soft: #eaf1fe; --color-danger: #b42318; --color-danger-soft: #fef3f2; --color-success: #067647; --color-success-soft: #ecfdf3; --color-warning: #b54708; --color-warning-soft: #fffaeb; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.10); --shadow-lg: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -8px rgba(16, 24, 40, 0.10); color-scheme: light; --color-surface: #f7f9fc; --color-surface-sunken: #e8eef5; --color-surface-raised: #ffffff; --color-border: #d0dae6; --color-border-strong: #b7c4d4; --color-text: #1b2838; --color-muted: #5b6b7c; --color-accent: #0b5cab; --color-accent-soft: #d7e6f6; } [data-theme=tms] { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #ffffff; --color-surface-sunken: #f6f7f9; --color-surface-raised: #ffffff; --color-border: #e3e6ea; --color-border-strong: #cdd2d9; --color-text: #1b1f24; --color-muted: #6b7280; --color-accent: #2f6feb; --color-accent-soft: #eaf1fe; --color-danger: #b42318; --color-danger-soft: #fef3f2; --color-success: #067647; --color-success-soft: #ecfdf3; --color-warning: #b54708; --color-warning-soft: #fffaeb; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.10); --shadow-lg: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -8px rgba(16, 24, 40, 0.10); color-scheme: light; --color-surface: #ffffff; --color-surface-sunken: #f6f6ff; --color-surface-raised: #ffffff; --color-border: #e8e6f4; --color-border-strong: #ceccfb; --color-text: #1a1c43; --color-muted: #6b6880; --color-accent: #6259fe; --color-accent-soft: #efeefe; } [data-theme=gotham] { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #1c2128; --color-surface-sunken: #111418; --color-surface-raised: #252b33; --color-border: #2e343c; --color-border-strong: #3d4450; --color-text: #f2f4f6; --color-muted: #9aa3af; --color-accent: #4c8dff; --color-accent-soft: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); /* White on #4c8dff is 3.2:1; the sunken ink is 5.8:1. */ --color-on-accent: #111418; --color-danger: #f97066; --color-danger-soft: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)); --color-success: #3bbf7a; --color-success-soft: color-mix(in srgb, var(--color-success) 16%, var(--color-surface)); --color-warning: #f79009; --color-warning-soft: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.55); color-scheme: dark; --color-surface: #111111; /* surface */ --color-surface-sunken: #000000; /* page-bg, which is also the sidebar */ --color-surface-raised: #222222; /* surface-raised */ --color-border: #333333; /* divider */ --color-border-strong: #404040; /* hairline */ --color-text: #ffffff; /* text-primary */ --color-muted: #b3b3b3; /* text-muted, rgba(255 255 255 / 0.7) flattened on surface */ --color-accent: #ffc03a; /* $genghis-accent */ --color-accent-hover: #ffcf66; /* accent-light: gold lightens on hover, it does not dim */ /* Dark ink on gold, never white — white on #ffc03a is 1.6:1. */ --color-on-accent: #111111; --color-danger: #e86a5a; /* danger-light */ --color-success: #2ed9a8; /* success-light */ /* warning-light: orange, so a warning cannot be mistaken for the gold accent. */ --color-warning: #ff9500; --font-display: "Libre Caslon Display", Georgia, serif; --font-ui: "Montserrat", Verdana, sans-serif; /* Genghis display-1 / heading-* weight. */ --font-display-weight: 300; /* Genghis heading-5 / heading-6. */ --tracking-caps: 1.5px; --action-link-transform: uppercase; --action-link-tracking: 1.5px; /* Thin architectural line art — an arcade of arches and a stair — in the divider grey. */ --theme-decoration: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' fill='none' stroke='%23333333' stroke-width='1' stroke-linecap='square'%3E%3Cpath d='M0 63.5h240'/%3E%3Cpath d='M12 63.5V34a14 14 0 0 1 28 0v29.5M48 63.5V34a14 14 0 0 1 28 0v29.5M84 63.5V34a14 14 0 0 1 28 0v29.5'/%3E%3Cpath d='M6 63.5V18h112v45.5M6 12h112'/%3E%3Cpath d='M132 63.5h12v-8h12v-8h12v-8h12v-8h12v-8h12v-8h12v-8h12'/%3E%3Cpath d='M138 55.5l84-56'/%3E%3C/svg%3E"); --theme-decoration-space: 40px; } [data-theme=creamsicle] { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #ffffff; --color-surface-sunken: #f6f7f9; --color-surface-raised: #ffffff; --color-border: #e3e6ea; --color-border-strong: #cdd2d9; --color-text: #1b1f24; --color-muted: #6b7280; --color-accent: #2f6feb; --color-accent-soft: #eaf1fe; --color-danger: #b42318; --color-danger-soft: #fef3f2; --color-success: #067647; --color-success-soft: #ecfdf3; --color-warning: #b54708; --color-warning-soft: #fffaeb; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.10); --shadow-lg: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -8px rgba(16, 24, 40, 0.10); color-scheme: light; --color-surface: #fffaf5; --color-surface-sunken: #fff1e6; --color-surface-raised: #ffffff; --color-border: #f6dcc8; --color-border-strong: #eec3a3; --color-text: #2b1a10; --color-muted: #7a5c4a; --color-accent: #c2410c; --color-accent-soft: #ffe8d6; --color-on-accent: #ffffff; /* Browner than Default's #b54708, so a warning cannot be mistaken for the orange accent. */ --color-warning: #a14b00; --theme-preview-ground: linear-gradient(135deg, #ffe8d6, #fffaf5); } [data-theme=ember] { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #1c2128; --color-surface-sunken: #111418; --color-surface-raised: #252b33; --color-border: #2e343c; --color-border-strong: #3d4450; --color-text: #f2f4f6; --color-muted: #9aa3af; --color-accent: #4c8dff; --color-accent-soft: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); /* White on #4c8dff is 3.2:1; the sunken ink is 5.8:1. */ --color-on-accent: #111418; --color-danger: #f97066; --color-danger-soft: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)); --color-success: #3bbf7a; --color-success-soft: color-mix(in srgb, var(--color-success) 16%, var(--color-surface)); --color-warning: #f79009; --color-warning-soft: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.55); color-scheme: dark; --color-surface: #1a1210; --color-surface-sunken: #120b09; --color-surface-raised: #241915; --color-border: #3a2a23; --color-border-strong: #4d382e; --color-text: #fbefe7; --color-muted: #c4a898; --color-accent: #ff7a1a; /* An ember brightens when it is stirred; darkening it would also thin the ink on it. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #ffffff); --color-on-accent: #1a1210; --color-warning: #fdb022; /* The open conversation's row glows faintly from inside, so the list's overflow cannot clip it and it cannot spill onto the next row. Static, so there is no motion to turn off. */ --conversation-row-current-glow: inset 0 0 12px color-mix(in srgb, var(--color-accent) 25%, transparent); } [data-theme=bubblegum] { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #ffffff; --color-surface-sunken: #f6f7f9; --color-surface-raised: #ffffff; --color-border: #e3e6ea; --color-border-strong: #cdd2d9; --color-text: #1b1f24; --color-muted: #6b7280; --color-accent: #2f6feb; --color-accent-soft: #eaf1fe; --color-danger: #b42318; --color-danger-soft: #fef3f2; --color-success: #067647; --color-success-soft: #ecfdf3; --color-warning: #b54708; --color-warning-soft: #fffaeb; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.10); --shadow-lg: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -8px rgba(16, 24, 40, 0.10); color-scheme: light; --color-surface: #fff7fb; --color-surface-sunken: #ffe9f3; --color-surface-raised: #ffffff; --color-border: #f9cfe2; --color-border-strong: #f2aecd; --color-text: #3a1029; --color-muted: #8a5070; --color-accent: #c2255c; --color-accent-soft: #ffe0ee; --color-on-accent: #ffffff; /* Softer, chewier corners. */ --radius-md: 12px; --radius-lg: 16px; /* A tiny bubble, with a glint, floating in the card's bottom corner. */ --theme-preview-ground: radial-gradient(circle at 86% 78%, #ffffff 0 1.5px, #ff8cc6 2px 6px, transparent 6.5px), #ffe9f3; } [data-theme=neon-flamingo] { /* Text and icons drawn on an accent fill (primary button, badges, send spinner). Per theme: white fails on gold, phosphor green or a pastel accent. */ --color-on-accent: #ffffff; /* Accent used AS text — links, the selected nav item, counts. A separate token from the fill because a bright fill can be unreadable as text on the page (gold on white is 1.6:1). */ --color-accent-text: var(--color-accent); --color-focus-ring: var(--color-accent); /* An accent-text link while the pointer is on it. Same as at rest unless a theme has a second highlight for it (Neon Flamingo's cyan). */ --color-link-hover: var(--color-accent-text); --color-sidebar: var(--color-surface-sunken); --color-sidebar-text: var(--color-text); --color-sidebar-muted: var(--color-muted); /* The modal and command-palette backdrop. */ --color-scrim: rgba(16, 24, 40, 0.45); /* The thin ring that keeps a user-chosen color (a label, a state dot) from vanishing into the surface, and the tick drawn on one. Neither color is a theme color, so neither retints. */ --color-swatch-ring: rgb(0 0 0 / 12%); --color-swatch-check: #ffffff; --color-swatch-check-shadow: rgb(0 0 0 / 70%); /* Background-image hook for the login page and empty states ONLY — never behind message text or the composer. Off under prefers-reduced-motion (see the shared rule below). */ --theme-decoration: none; /* How tall the decoration is drawn under an empty state's copy (it never sits behind the words). Zero while there is no decoration, so the empty state keeps its usual height. */ --theme-decoration-space: 0px; /* The picker card's ground. A theme can give its card a swatch of its own here (Creamsicle's sherbet diagonal); everything else on the card still reads the theme's real tokens. */ --theme-preview-ground: var(--color-surface-sunken); /* Extra ring on the open conversation's row in the list. None unless a theme asks for one. */ --conversation-row-current-glow: none; /* A halo around the primary button. None unless a theme asks for one; never animated. */ --btn-primary-glow: none; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-ui); /* Headings and display figures. */ --font-display: var(--font-ui); /* The weight app headings are set in. `initial` leaves it unset, so each heading falls back to the weight it always had (var(--font-display-weight, 600)) — and a theme preview card does not inherit a different theme's weight from . */ --font-display-weight: initial; /* Letter-spacing for the small uppercase captions: sidebar sections, rail headings, group labels. */ --tracking-caps: 0.04em; /* "See all"-style action links: a theme can set them as uppercase captions. */ --action-link-transform: none; --action-link-tracking: normal; /* One place in the app needs it: a reply template's {{token}}, which has to be readable character for character because it is copied by hand. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* The internal-comment surface: the composer in comment mode and the card it produces. Mixed from the warning pair rather than picked as three more hexes, so the amber a comment is drawn in cannot drift away from the amber every other warning in the app uses. It is its own named surface because a comment is neither half of the correspondence — --warning-soft alone has no edge or band to build a bordered, banded box out of. */ --color-comment-soft: var(--color-warning-soft); --color-comment-band: color-mix(in srgb, var(--color-warning) 8%, var(--color-warning-soft)); --color-comment-band-strong: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --color-comment-border: color-mix(in srgb, var(--color-warning) 35%, var(--color-warning-soft)); /* Softer than --color-border, for rules *inside* a bordered card. A full-strength border repeated on every table row and stat divider is what makes a dense panel look boxy. */ --color-hairline: color-mix(in srgb, var(--color-border) 55%, transparent); /* Chart fills fade toward the baseline so a tall bar does not read as a solid slab. Built from the accent/success pair rather than new hexes, so a chart cannot drift away from the blue and green the rest of the app uses for in/out. The fade stops at 70%: a bar's height IS the datum, and fading its base to near-white made short bars read shorter than they are. */ --gradient-accent: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, transparent)); --gradient-success: linear-gradient(180deg, var(--color-success), color-mix(in srgb, var(--color-success) 70%, transparent)); /* The edges that used to be light-only hexes. Derived so a named theme only has to retint the primitives. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #000000); --color-danger-edge: color-mix(in srgb, var(--color-danger) 28%, var(--color-danger-soft)); --color-success-edge: color-mix(in srgb, var(--color-success) 28%, var(--color-success-soft)); --color-accent-edge: color-mix(in srgb, var(--color-accent) 28%, var(--color-accent-soft)); --color-surface: #1c2128; --color-surface-sunken: #111418; --color-surface-raised: #252b33; --color-border: #2e343c; --color-border-strong: #3d4450; --color-text: #f2f4f6; --color-muted: #9aa3af; --color-accent: #4c8dff; --color-accent-soft: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); /* White on #4c8dff is 3.2:1; the sunken ink is 5.8:1. */ --color-on-accent: #111418; --color-danger: #f97066; --color-danger-soft: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)); --color-success: #3bbf7a; --color-success-soft: color-mix(in srgb, var(--color-success) 16%, var(--color-surface)); --color-warning: #f79009; --color-warning-soft: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface)); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.55); color-scheme: dark; --color-surface: #1b0f1a; --color-surface-sunken: #120812; --color-surface-raised: #261526; --color-border: #3d2240; --color-border-strong: #55305a; --color-text: #fdeefa; --color-muted: #cfa3c8; --color-accent: #ff4fa3; /* Neon brightens under the pointer; darkening it would also thin the ink on it. */ --color-accent-hover: color-mix(in srgb, var(--color-accent) 86%, #ffffff); --color-on-accent: #1b0f1a; --color-focus-ring: #2de2e6; --color-link-hover: #2de2e6; /* A static neon halo on the primary button. Never flickers (out of scope for accessibility). */ --btn-primary-glow: 0 0 12px color-mix(in srgb, var(--color-accent) 40%, transparent); } /* The one reduced-motion switch for every theme. A theme's animation or decoration needs no reduced-motion rule of its own: this turns all of it off. Durations go to ~0 rather than `animation: none` so an animation that ends in a visible state (thread-loading-raise) still lands there, and animationend/transitionend still fire for anything waiting on them. */ @media (prefers-reduced-motion: reduce) { :root, [data-theme] { --theme-decoration: none !important; --theme-decoration-space: 0px !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-ui); font-size: var(--text-base); color: var(--color-text); background: var(--color-surface-sunken); -webkit-font-smoothing: antialiased; } /* A theme's display face is for the app's own headings. A customer's email and the reply being written are correspondence, not chrome, so their headings stay in the body face. */ :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); font-weight: var(--font-display-weight, bold); } :where(.message-card__body, .composer__editor) :where(h1, h2, h3, h4, h5, h6) { font-family: inherit; font-weight: bold; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } /* ---------- Toasts ---------- */ /* Bottom-left, and stacked: a state action streams one in on every transition, so two can easily be on screen at once and the second must not land on top of the first. Not top-right, where it used to sit: that is where the thread header's action row is, and the toast now carries an Undo button, so it can no longer let clicks pass through itself to get out of that row's way. */ .toasts { position: fixed; bottom: var(--space-4); left: var(--space-4); z-index: 50; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); /* The container is as tall as the corner it occupies whether or not anything is in it, so it lets clicks through; each toast takes them back for its own box. */ pointer-events: none; } /* display: contents so streamed toasts and a redirect's flash stack in one column despite arriving in two containers — the inner one is turbo-permanent, because a broadcast morph must not wipe a toast whose Undo the reader is reaching for, and a permanent element cannot also be the one a redirect re-renders its flash into. */ .toasts__stack { display: contents; } .toast { display: flex; align-items: center; gap: var(--space-3); max-width: 22rem; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); box-shadow: var(--shadow-md); pointer-events: auto; opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; } .toast--shown { opacity: 1; transform: none; } .toast--dismissing { opacity: 0; transform: translateY(8px); } .toast--alert { background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid var(--color-danger-edge); } .toast--notice { background: var(--color-success-soft); color: var(--color-success); border: 1px solid var(--color-success-edge); } .toast__message { flex: 1; } /* Two buttons plus a sentence do not fit the one-button width, and a toast whose message wraps to three lines to make room reads as a fault rather than as an offer. */ .toast--offering { max-width: 30rem; } .toast__undo-form, .toast__offer-form { margin: 0; } .toast__undo, .toast__offer { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; white-space: nowrap; } /* The notice and its Undo are the point; sliding into place is not. toast_controller removes the element on a timer either way, so dropping the transition costs nothing but the movement. */ @media (prefers-reduced-motion: reduce) { .toast { transition: none; } } /* ---------- Buttons & fields ---------- */ .btn { appearance: none; border: 1px solid transparent; border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); font: inherit; font-weight: 600; cursor: pointer; background: var(--color-surface-sunken); color: var(--color-text); } .btn--primary { background: var(--color-accent); color: var(--color-on-accent); width: 100%; box-shadow: var(--btn-primary-glow); } .btn--primary:hover { background: var(--color-accent-hover); } .btn--ghost { background: transparent; border-color: var(--color-border-strong); color: var(--color-muted); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); } .btn--ghost:hover { color: var(--color-text); background: var(--color-surface-sunken); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn--primary:disabled:hover { background: var(--color-accent); } .field { display: block; margin-bottom: var(--space-4); } .field__label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); margin-bottom: var(--space-1); } .field__input { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; background: var(--color-surface); color: var(--color-text); } .field__input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px var(--color-accent-soft); } /* A note under an input — the rule it has to satisfy, not an error. Sits inside the .field label so it stays tied to the control it describes. */ .field__hint { display: block; margin-top: var(--space-1); font-size: 12px; color: var(--color-muted); } /* The app's one native control. Everywhere else a "pick one" is the .dropdown popover, but that is position:absolute inside .modal{overflow:hidden} and a scrolling .settings__detail, so a list long enough to matter gets clipped. A native select's list is painted by the browser outside the document, which no ancestor can clip — and it brings keyboard nav and type-ahead with it. The cost is the UA chrome, stripped here so it reads as a .field__input with a caret. */ .field__select { appearance: none; padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; background-color: var(--color-surface); color: var(--color-text); cursor: pointer; /* The caret the appearance:none reset removed, redrawn in the muted token rather than left to the platform's own arrow. */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-2) center; background-size: 14px; } .field__select:hover { border-color: var(--color-accent); } .field__select:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px var(--color-accent-soft); } /* ---------- Login ---------- */ .login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-5); /* --theme-decoration paints here and on .empty-state only (FRO-155): chrome a reader passes through, never behind message text or the composer. Anchored under the card, not tiled. */ background-image: var(--theme-decoration); background-repeat: no-repeat; background-position: center bottom var(--space-6); background-size: auto 96px; } .login__card { width: 100%; max-width: 360px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); } .login__title { margin: 0; font-size: var(--text-xl); } .login__subtitle { margin: var(--space-1) 0 var(--space-5); color: var(--color-muted); } .login__hint { margin: var(--space-4) 0 0; font-size: 12px; color: var(--color-muted); text-align: center; } .login__hint + .login__hint { margin-top: var(--space-2); } /* The global `a` rule paints links in body colour with no underline, which on a card whose only other text is muted prose leaves nothing saying this one is clickable. */ .login__link { color: var(--color-accent-text); font-weight: 600; } .login__link:hover { color: var(--color-link-hover); text-decoration: underline; } /* In the card, unlike the flash toast, this is not a transient notice but the whole explanation of why the visitor is still on this screen — a rejected token most of all. Same palette as .flash--alert so the two read as one language. */ .login__error { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-danger-edge); border-radius: var(--radius-md); background: var(--color-danger-soft); color: var(--color-danger); font-size: var(--text-sm); } .login .field__input[readonly] { background: var(--color-surface-sunken); color: var(--color-muted); } /* Rails wraps a failed field in
. The login card stacks its fields in normal flow, so the extra block sizes to the same width the input already had — unlike .settings / .add-user, which have to take the wrapper out of the flex row. */ /* ---------- App shell (three regions) ---------- */ /* The rail's width is a custom property so collapsing overrides one value rather than restating the whole track list — which is also why the narrow-viewport rule below, setting grid-template-columns outright, wins over the collapsed state without needing to know it. */ /* The list is 390px because the tab strip now carries counts as well as words, and 340px could not hold both: four labels leave 39px inside the header's padding, and three counts need 79px at the cap. Measured rather than guessed, and asserted — see the fitting group in spec/system/tab_counts_spec.rb. */ /* FRO-138: every inbox panel width is a custom property the server renders inline from the user's saved layout and panel-resize writes while dragging. The *-track properties are what the grid actually uses: each clamps its *-width into the panel's range (InboxLayout::PANELS — keep the numbers in step), so a bad value cannot break the layout, and the collapse classes override the track rather than the width, so reopening restores the width the person had. The inline style would outrank any class rule that set --sidebar-width itself. The rail gives way to the viewport first, then the list, so the thread keeps 420px wherever the minimums allow; clamp() puts a panel's minimum above that when they do not. */ .app { --sidebar-width: 240px; --list-width: 390px; --rail-width: 300px; --sidebar-track: clamp(200px, var(--sidebar-width), 360px); --rail-track: clamp(260px, var(--rail-width), min(480px, 100vw - var(--sidebar-track) - 390px - 420px)); --list-track: clamp(390px, var(--list-width), min(640px, 100vw - var(--sidebar-track) - var(--rail-track) - 420px)); display: grid; grid-template-columns: var(--sidebar-track) var(--list-track) minmax(0, 1fr); height: 100vh; height: 100dvh; background: var(--color-surface); } /* Inbox only. Report and settings are their own shells and keep their own overflow. Grid items default to min-height: auto — the content size — which is what lets a tall list or thread grow this row past the viewport and start the document scrolling. overflow: hidden on the grid, and min-height: 0 on its children, is what keeps `.app` at the viewport and forces each pane to clip into its own scrollport. */ .app:not(.app--report):not(.app--settings) { height: 100%; max-height: 100%; overflow: hidden; /* Implicit rows min at content size, which is the leak: a tall pane grows the one row past 100vh and the document becomes the scrollport. */ grid-template-rows: minmax(0, 1fr); } .app:not(.app--report):not(.app--settings) > * { min-height: 0; max-height: 100%; } /* Belt for the same leak: if any child still paints past `.app`, the window itself must not become the scrollport. Narrow viewports drop this — they stack the panes and scroll the document on purpose. */ @media (min-width: 901px) { html:has(.app:not(.app--report):not(.app--settings)), html:has(.app:not(.app--report):not(.app--settings)) body { overflow: clip; max-height: 100%; } } /* Analytics is a report, not a queue, so it drops the 390px list track. The rail's width stays a custom property, which is what lets collapsing and the narrow-viewport rule keep working without knowing this variant exists. */ .app--report { grid-template-columns: var(--sidebar-track) 1fr; } /* Settings drops it for the same reason: a rail of sections and the one section you opened. */ .app--settings { grid-template-columns: var(--sidebar-track) 1fr; } @media (prefers-reduced-motion: no-preference) { .app { transition: grid-template-columns 0.15s ease; } } /* ---------- Panel resize handles (FRO-138) ---------- Absolutely positioned so they take no grid track: each sits on the seam it resizes, found from the same track properties the grid uses. A 7px hit area around a 1px line that lights up on hover, focus and drag. Only above the stacking breakpoint — below it the panes are full-width blocks and there is nothing to resize (see the 900px block). */ .app--inbox { position: relative; } #conversation { position: relative; } .panel-resize { position: absolute; top: 0; bottom: 0; z-index: 3; width: 7px; margin-left: -3px; cursor: col-resize; touch-action: none; background: transparent; } .panel-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: transparent; transition: background-color 0.1s ease; } .panel-resize:hover::after, .panel-resize:focus-visible::after, .app.is-resizing .panel-resize:focus::after { width: 2px; left: 2.5px; background: var(--color-accent); } .panel-resize:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; } .panel-resize--sidebar { left: var(--sidebar-track); } .panel-resize--list { left: calc(var(--sidebar-track) + var(--list-track)); } /* Inside the conversation frame, on the rail's left edge. */ .panel-resize--rail { left: auto; margin-left: 0; right: calc(var(--rail-track) - 4px); } /* While dragging: the track follows the pointer with no easing, text does not select, and the cursor stays col-resize even when the pointer outruns the 7px handle. */ .app.is-resizing { transition: none; user-select: none; cursor: col-resize; } .app.is-resizing * { cursor: col-resize !important; } /* ---------- Icons ---------- */ /* Phosphor glyphs are text, so the size has to drive both the box and the font — one custom property keeps them in step, and every override below only has to restate `--icon-size`. The explicit box is what stops a slow font load from shifting the layout: the space is reserved whether or not the glyph has arrived. Keep the display non-inline — `transform` (used by .sidebar__chevron) does not apply to inline elements. */ .icon { --icon-size: 18px; display: inline-flex; align-items: center; justify-content: center; width: var(--icon-size); height: var(--icon-size); font-size: var(--icon-size); line-height: 1; flex: 0 0 auto; vertical-align: middle; } /* ---------- Sidebar ---------- */ .sidebar { display: flex; flex-direction: column; height: 100%; border-right: 1px solid var(--color-border); background: var(--color-sidebar); /* A theme may give the rail its own ground (a dark rail on a light page). Rebinding the two ink tokens here, rather than repainting every sidebar rule, keeps each row drawing from --color-text / --color-muted and still reads on that ground. Not a cycle: the sidebar tokens are inherited from the theme, not declared on this element. */ --color-text: var(--color-sidebar-text); --color-muted: var(--color-sidebar-muted); color: var(--color-text); overflow: hidden; /* the nav region scrolls, not the whole rail */ } /* Header: avatar + name + collapse */ .sidebar__header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--color-border); } .sidebar__identity { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1; border-radius: var(--radius-md); } .sidebar__identity:hover { background: var(--color-surface); } .user-avatar { flex: none; display: block; width: var(--user-avatar-size, 32px); height: var(--user-avatar-size, 32px); border-radius: 50%; overflow: hidden; background: var(--color-surface-sunken); } .user-avatar svg { display: block; width: 100%; height: 100%; } .sidebar__name { flex: 1; font-weight: 700; font-size: var(--text-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A