/* mixtape.works design tokens — generated from packages/ui/src/tokens.css. DO NOT EDIT. Run `pnpm --filter @mixtape/ui kit` after changing the source. This is the plain-CSS build, for products with no Tailwind and no build step. It is the same palette, the same type, the same radii and the same motion as every other product - that is the entire point of it. Add a colour to the source, never here, and never to a product's own stylesheet. */ :root { --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif; --font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --animate-rise: rise 380ms cubic-bezier(0.22, 1, 0.36, 1) both; --animate-fade: fade 200ms cubic-bezier(0.22, 1, 0.36, 1) both; --animate-pop: pop 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both; --animate-pulse-soft: pulse-soft 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite; } /* mixtape.works design tokens — one system, every product. Two layers on purpose: 1. `@theme inline` maps Tailwind utilities onto CSS variables *by reference*, so `bg-canvas` resolves at paint time rather than being frozen at build time. 2. The palettes below re-point those variables. Swap `data-theme` on and the whole app re-themes with no re-render and no flash. Add a colour here, never in an app. If a product needs its own accent, override `--c-accent*` on a wrapper element; everything else inherits. */ /* ── The page's width, for every mixtape page ────────────────────────────── One number: the landing column, a product's dashboard, Studio and the account all stop here. 90rem is 1440px at the default size, so a 1440 screen is filled edge to edge (less the gutters) and a wider one keeps the column at 1440 rather than stretching lines across it (Chris, 2026-09-21: "every page including dashboards on 1440px screens should fill out the whole width content-wise (for bigger windows dont)"). It was 1200px on the landing layer, 80rem in Studio and 72rem in the account, and none of them agreed. */ :root { --page-max: 90rem; } /* ── Dark: the studio default and the brand's home ─────────────────────── */ :root, :root[data-theme='dark'] { color-scheme: dark; --c-canvas: #0a0b0d; --c-surface: #101216; --c-surface-2: #171a21; --c-line: #23272f; --c-line-strong: #323843; --c-ink: #eceef1; --c-ink-muted: #a3abb6; --c-ink-subtle: #6d7583; --c-accent: #f2b544; --c-accent-strong: #ffc85c; --c-accent-ink: #0a0b0d; --c-accent-soft: #f2b5441f; --c-ok: #3ecf8e; --c-rec: #f0604d; --c-warn: #e9b949; --c-go: #6fbf5e; --c-go-strong: #5aa84a; --c-go-ink: #0a0b0d; --c-idea: #b892f6; --c-plan: #4cc4e0; --c-build: #5b8def; --c-review: #f0916d; --c-surface-sunk: #0c0d10; --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3abb6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* ── Light: warm paper, not clinical white ─────────────────────────────── */ :root[data-theme='light'] { color-scheme: light; --c-canvas: #fbfaf8; --c-surface: #ffffff; --c-surface-2: #f4f2ee; --c-line: #e6e2db; --c-line-strong: #d3cec4; --c-ink: #17191c; --c-ink-muted: #565c66; --c-ink-subtle: #868d99; /* The brand orange, on paper. Two corrections, in order. First, the light accent used to be a dark brown-gold chosen so *white* text could sit on it; dark ink on a brighter amber - the relationship dark mode already has - reads better and looks like the brand. Then on 2026-09-16 Chris said the buttons and badges still looked brownish here, and the cause was hue rather than lightness: #c8871f is a low-chroma gold, and a filled patch of it reads as mustard. #d97706 is the same lightness at a purer orange, so it costs nothing - it is fractionally better as text (3.05:1 against paper, up from 2.90) while dark ink on it stays at 5.7:1. Small accent labels remain the deliberate cost of one token doing both jobs; splitting fill from text would mean touching 73 call sites to buy a tenth of a ratio. */ --c-accent: #d97706; --c-accent-strong: #b45309; --c-accent-ink: #1c1405; --c-accent-soft: #d977061f; --c-ok: #17864f; --c-rec: #c3402c; --c-warn: #a67908; --c-go: #3f8f31; --c-go-strong: #2f7524; --c-go-ink: #ffffff; --c-idea: #7c4dcc; --c-plan: #0f7d99; --c-build: #2f5fd0; --c-review: #c2551f; --c-surface-sunk: #f1f2f4; --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565c66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* Follow the OS when the user hasn't chosen. `data-theme` always wins. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --c-canvas: #fbfaf8; --c-surface: #ffffff; --c-surface-2: #f4f2ee; --c-line: #e6e2db; --c-line-strong: #d3cec4; --c-ink: #17191c; --c-ink-muted: #565c66; --c-ink-subtle: #868d99; --c-accent: #d97706; --c-accent-strong: #b45309; --c-accent-ink: #1c1405; --c-accent-soft: #d977061f; --c-ok: #17864f; --c-rec: #c3402c; --c-warn: #a67908; --c-go: #3f8f31; --c-go-strong: #2f7524; --c-go-ink: #ffffff; --c-idea: #7c4dcc; --c-plan: #0f7d99; --c-build: #2f5fd0; --c-review: #c2551f; --c-surface-sunk: #f1f2f4; --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565c66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } } /* ── Phones in dark: the page is black ─────────────────────────────────── Chris, 2026-09-22: "on mobile only, when on dark mode, the bg color of the page (outside of our cards/boxes etc) should be totally black". A phone screen is mostly OLED, where black is the panel switched off and the cards read as lit objects on it; on a desktop monitor the near-black stays. Only the canvas moves - surfaces, lines and ink keep their values, so the cards look exactly as they do everywhere else. Both ways a page can be dark: chosen (data-theme) and followed from the OS (no stamp). syncThemeColor reads --c-canvas, so the status bar follows by itself. */ @media (max-width: 767.98px) { :root[data-theme='dark'] { --c-canvas: #000; } } @media (max-width: 767.98px) and (prefers-color-scheme: dark) { :root:not([data-theme]) { --c-canvas: #000; } } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } } @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @layer base { html { -webkit-tap-highlight-color: transparent; /* The root element, not just body: any moment where the page is between renders paints this, and without it the browser falls back to `color-scheme` - which is dark by default here, so light mode flashed dark. */ background-color: var(--c-canvas); } /* Interface scale. The middle step is the size the UI is designed at, so it sets no attribute at all; the other two nudge it either way. A phone gets a smaller spread because its layout already runs close to the screen edges. The root's font size, not `zoom` on the body - and the difference is not cosmetic. **CSS `zoom` breaks `position: fixed` on iOS**: a bar with `bottom: 0` under a zoomed body resolves against a scaled coordinate space and lands short of the bottom edge by the difference, so at 0.94 on a 932pt screen the tab bar floated about 55pt up the screen. It looked correct on any page long enough to scroll, because scrolling drags a mis-positioned fixed element back into place, which is what made it look like a content-height problem for weeks. The docked chat card is fixed too, and had the same flaw waiting. Every size and every spacing step in this system is already in `rem` - `--spacing` is .25rem, the type scale is rem throughout - so moving the root font size scales the whole interface with no zoom anywhere and no coordinate space to get wrong. Values written in px deliberately stay put: a 16px field has to stay 16px or iOS zooms the page on focus, and a touch target should not shrink because somebody likes small text. */ :root[data-scale='s'] { font-size: 15px; } :root[data-scale='l'] { font-size: 17.25px; } @media (min-width: 768px) { :root[data-scale='s'] { font-size: 14.4px; } :root[data-scale='l'] { font-size: 18.4px; } } /* Colour changes are animated so the theme toggle dissolves rather than jump-cuts. Scoped to colour only, so transforms and animations stay crisp. */ body, header, main, aside, nav, section, article, li, input, textarea, select, button { transition: background-color 380ms cubic-bezier(0.22, 1, 0.36, 1), border-color 380ms cubic-bezier(0.22, 1, 0.36, 1), color 380ms cubic-bezier(0.22, 1, 0.36, 1); } ::selection { background: var(--color-accent); color: var(--color-accent-ink); } /* Anything focusable gets the same visible ring — keyboard and switch users included. */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Honour the OS setting. Motion is decoration in an app; it is never load-bearing. A marketing page opts out with `data-motion="always"` on , because there the motion IS the product - and because older Windows machines have animations disabled globally, so honouring the setting there shows a stranger a dead page. Owner's standing decision. Scoping it here rather than trying to undo it further down is deliberate: `animation-duration: revert` rolls back to the user-agent value, which is 0s, so an "un-disable" rule would disable the animations just as thoroughly. */ @media (prefers-reduced-motion: reduce) { :root:not([data-motion='always']) *, :root:not([data-motion='always']) *::before, :root:not([data-motion='always']) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } /* The shared settings element (elements/settings.ts) paints nothing until its script has defined it. Hold its exact footprint meanwhile - 44px square, pulled flush with the edge - so the header does not shift sideways the moment the cog appears. */ mixtape-settings:not(:defined) { display: inline-block; width: 44px; height: 44px; margin-right: var(--mx-cog-edge, -0.5rem); } /* Native