/* Design-sync Tailwind entry. * * The app's own app/globals.css is a Tailwind v4 *source* file (`@import * 'tailwindcss'`), not a shippable stylesheet, and it leans on Next to supply * two things the DS bundle has to supply itself: * * 1. Utilities. Compiled here via @tailwindcss/cli into .design-sync/compiled.css. * 2. Font variables. next/font/google assigns --font-sans / --font-body on * at runtime, so globals.css can write the self-referential * `--font-sans: var(--font-sans), 'Space Grotesk', …`. Outside Next that * cycle is invalid at computed-value time and the whole declaration drops, * leaving every font-sans/font-body utility unset. The @theme block below * re-declares both with real family stacks. * * Regenerate whenever component sources or authored previews change: * pnpm exec @tailwindcss/cli -i .design-sync/tailwind-entry.css -o .design-sync/compiled.css --minify */ @import '../app/globals.css'; @import './fonts/fonts.css'; /* Tailwind v4 auto-detects sources from this file's directory, which would miss * the repo's component tree. Name both scan roots explicitly. */ @source '../components'; @source './previews'; @theme inline { --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; } /* app/globals.css puts the dark palette on :root, so the DS is dark by default * (matching cloudrite.co.nz). Tell the UA so form controls and scrollbars match. */ :root { color-scheme: dark; } /* Designs built with this DS get the dark page by default. Deliberately `body` * only, at plain specificity: the preview-card harness sets its own * `body{background:#fff}` in a later inline