@nqmcreative/ui 0.1.0 → 0.2.0

package/dist/styles/paper/ThemeToggle.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type Tone } from '../../core/tones.js';
+import { type Theme } from '../../core/theme.svelte.js';
+interface Props {
+    /** Bindable. `'system'` follows the OS until the visitor chooses. */
+    theme?: Theme;
+    /** `'button'` cycles light → dark → system; `'segmented'` shows all three. */
+    variant?: 'button' | 'segmented';
+    tone?: Tone;
+    /** Remember the choice in `localStorage`. Default true. */
+    persist?: boolean;
+    onchange?: (theme: Theme) => void;
+    class?: string;
+}
+declare const ThemeToggle: import("svelte").Component<Props, {}, "theme">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/styles/paper/Toaster.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { fly } from 'svelte/transition';
+	import { portal } from '../../core/actions/dismissable.js';
+	import { toast } from '../../core/toast.svelte.js';
+	import { toneText } from '../../core/tones.js';
+	import Spinner from './Spinner.svelte';
+	import { useLocale } from '../../core/locale.svelte.js';
+
+	export type ToasterPosition =
+		'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+	interface Props {
+		position?: ToasterPosition;
+		class?: string;
+	}
+
+	let { position = 'bottom-right', class: className = '' }: Props = $props();
+
+	const t = useLocale();
+
+	const positions: Record<ToasterPosition, string> = {
+		'top-left': 'top-4 left-4 items-start',
+		'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
+		'top-right': 'top-4 right-4 items-end',
+		'bottom-left': 'bottom-4 left-4 items-start',
+		'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',
+		'bottom-right': 'bottom-4 right-4 items-end'
+	};
+
+	const fromTop = $derived(position.startsWith('top'));
+	const fromLeft = $derived(position.endsWith('left'));
+	const fromCenter = $derived(position.endsWith('center'));
+
+	const enter = $derived(
+		fromCenter ? { y: fromTop ? -16 : 16, x: 0 } : { x: fromLeft ? -16 : 16, y: 0 }
+	);
+</script>
+
+<div
+	use:portal
+	aria-live="polite"
+	aria-label={t.current.notifications}
+	class="pointer-events-none fixed z-[100] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2.5 {positions[
+		position
+	]} {fromTop ? '' : 'flex-col-reverse'} {className}"
+>
+	{#each toast.items as item (item.id)}
+		<!--
+			paper puts every toast on the same neutral card and lets the glyph
+			carry the tone. matte tints the whole surface; here the tinted block
+			would fight the page underneath.
+		-->
+		<div
+			animate:flip={{ duration: 200 }}
+			in:fly={{ ...enter, duration: 220 }}
+			out:fly={{ ...enter, duration: 160 }}
+			role={item.tone === 'danger' ? 'alert' : 'status'}
+			class="pointer-events-auto flex w-full items-start gap-3 rounded-lg border border-hairline bg-bg p-3.5 font-sans shadow-lg"
+		>
+			<span class="mt-0.5 shrink-0 {toneText[item.tone]}">
+				{#if item.loading}
+					<Spinner size="sm" label="" />
+				{:else if item.tone === 'success'}
+					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />
+						<path
+							d="m5 8.2 2.2 2.2L11 6"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				{:else if item.tone === 'danger'}
+					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />
+						<path
+							d="m5.75 5.75 4.5 4.5M10.25 5.75l-4.5 4.5"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+						/>
+					</svg>
+				{:else}
+					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />
+						<path d="M8 4.75v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+						<circle cx="8" cy="11.25" r="0.85" fill="currentColor" />
+					</svg>
+				{/if}
+			</span>
+
+			<div class="flex min-w-0 flex-1 flex-col gap-1">
+				<p class="text-sm leading-snug font-semibold text-text">{item.title}</p>
+				{#if item.description}
+					<p class="text-[13px] leading-relaxed text-text-secondary">{item.description}</p>
+				{/if}
+				{#if item.action}
+					<button
+						type="button"
+						onclick={() => {
+							item.action?.onclick();
+							toast.dismiss(item.id);
+						}}
+						class="mt-1 self-start rounded font-sans text-[13px] font-semibold underline underline-offset-2 {toneText[
+							item.tone
+						]}"
+					>
+						{item.action.label}
+					</button>
+				{/if}
+			</div>
+
+			<button
+				type="button"
+				onclick={() => toast.dismiss(item.id)}
+				aria-label={t.current.dismiss}
+				class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+			>
+				<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+					<path
+						d="m2 2 10 10M12 2 2 12"
+						stroke="currentColor"
+						stroke-width="1.6"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</button>
+		</div>
+	{/each}
+</div>

package/dist/styles/paper/Toaster.svelte.d.ts

@@ -0,0 +1,8 @@
+export type ToasterPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface Props {
+    position?: ToasterPosition;
+    class?: string;
+}
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/styles/paper/Tooltip.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		/** Tooltip text. CSS-only: shows on hover and on keyboard focus. */
+		content: string;
+		placement?: TooltipPlacement;
+		children: Snippet;
+	}
+
+	let { content, placement = 'top', class: className = '', children, ...rest }: Props = $props();
+
+	const placements: Record<TooltipPlacement, string> = {
+		top: 'bottom-full left-1/2 mb-1.5 -translate-x-1/2',
+		bottom: 'top-full left-1/2 mt-1.5 -translate-x-1/2',
+		left: 'right-full top-1/2 mr-1.5 -translate-y-1/2',
+		right: 'left-full top-1/2 ml-1.5 -translate-y-1/2'
+	};
+</script>
+
+<span class="group/tt relative inline-flex" {...rest}>
+	{@render children()}
+	<span
+		role="tooltip"
+		class="pointer-events-none invisible absolute z-50 rounded-md bg-text px-2 py-1 font-sans text-xs font-medium whitespace-nowrap text-text-inverse opacity-0 shadow-lg transition-opacity duration-150 ease-brand-out group-focus-within/tt:visible group-focus-within/tt:opacity-100 group-hover/tt:visible group-hover/tt:opacity-100
+			{placements[placement]} {className}"
+	>
+		{content}
+	</span>
+</span>

package/dist/styles/paper/Tooltip.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Tooltip text. CSS-only: shows on hover and on keyboard focus. */
+    content: string;
+    placement?: TooltipPlacement;
+    children: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/styles/paper/fonts.css

@@ -0,0 +1,46 @@
+/*
+ * Optional: Plus Jakarta Sans, the face paper is designed around. Import this
+ * only if your project doesn't already self-host or load it another way —
+ * without it the tokens fall back to the system stack, which works but reads
+ * harder and colder.
+ *
+ * These are plain `@font-face` rules rather than an `@import` of the Google
+ * stylesheet on purpose: `@import` is only valid before every other rule, so a
+ * bundler silently drops it when this file is imported after `tailwindcss` —
+ * the fonts then fall back with no error anywhere. `@font-face` works wherever
+ * you put it, and it skips the CSS-to-CSS round trip before the font files
+ * start downloading.
+ *
+ * Two rules rather than matte's eight: this is a variable font, so one file per
+ * subset covers every weight from 400 to 700. Latin and Latin Extended only —
+ * around 49 kB in total. Add
+ * `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` to
+ * your document head to open the connection earlier.
+ */
+
+/* latin */
+@font-face {
+	font-family: 'Plus Jakarta Sans';
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2)
+		format('woff2');
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+	font-family: 'Plus Jakarta Sans';
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2)
+		format('woff2');
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+		U+A720-A7FF;
+}

package/dist/styles/paper/index.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Paper — The neutral one. Start here if unsure: soft corners, light shadows, generous spacing, and nothing that fights the content.
+ *
+ * Generated by `bun run index`. Behaviour comes from
+ * `@nqmcreative/ui/core`, re-exported below so this one import covers
+ * the whole style.
+ */
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
+export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Locale, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
+export { default as LocaleProvider } from './LocaleProvider.svelte';
+export { default as Button } from './Button.svelte';
+export type { ButtonVariant, ButtonSize } from './Button.svelte';
+export { default as Link } from './Link.svelte';
+export { default as Input } from './Input.svelte';
+export type { InputSize } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export type { SelectOption } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as Switch } from './Switch.svelte';
+export type { SwitchSize } from './Switch.svelte';
+export { default as Field } from './Field.svelte';
+export { default as Label } from './Label.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as Slider } from './Slider.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export type { RadioOption } from './RadioGroup.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export type { CheckboxOption } from './CheckboxGroup.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
+export type { SegmentOption, SegmentedSize } from './SegmentedControl.svelte';
+export { default as InputGroup } from './InputGroup.svelte';
+export { default as Combobox } from './Combobox.svelte';
+export type { ComboboxOption } from './Combobox.svelte';
+export { default as MultiSelect } from './MultiSelect.svelte';
+export type { MultiSelectOption } from './MultiSelect.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as Dropzone } from './Dropzone.svelte';
+export { default as Badge } from './Badge.svelte';
+export type { BadgeVariant, BadgeSize } from './Badge.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export type { AvatarSize } from './Avatar.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { default as Card } from './Card.svelte';
+export type { CardVariant } from './Card.svelte';
+export { default as Stat } from './Stat.svelte';
+export type { StatTrend } from './Stat.svelte';
+export { default as Table } from './Table.svelte';
+export type { TableColumn } from './Table.svelte';
+export { default as Kbd } from './Kbd.svelte';
+export { default as Alert } from './Alert.svelte';
+export type { AlertVariant } from './Alert.svelte';
+export { default as Progress } from './Progress.svelte';
+export type { ProgressSize } from './Progress.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export type { SpinnerSize } from './Spinner.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export type { SkeletonVariant } from './Skeleton.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export type { ToasterPosition } from './Toaster.svelte';
+export { default as Divider } from './Divider.svelte';
+export type { DividerOrientation } from './Divider.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export type { TabItem, TabsVariant } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export type { BreadcrumbItem } from './Breadcrumb.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Steps } from './Steps.svelte';
+export type { StepItem } from './Steps.svelte';
+export { default as Navbar } from './Navbar.svelte';
+export type { NavItem } from './Navbar.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export type { SidebarItem, SidebarSection } from './Sidebar.svelte';
+export { default as Footer } from './Footer.svelte';
+export type { FooterLink, FooterColumn } from './Footer.svelte';
+export { default as HeroSection } from './HeroSection.svelte';
+export { default as FeatureGrid } from './FeatureGrid.svelte';
+export type { FeatureColumns } from './FeatureGrid.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';
+export { default as PricingCard } from './PricingCard.svelte';
+export { default as Testimonial } from './Testimonial.svelte';
+export type { TestimonialVariant } from './Testimonial.svelte';
+export { default as LogoCloud } from './LogoCloud.svelte';
+export type { Logo } from './LogoCloud.svelte';
+export { default as CTASection } from './CTASection.svelte';
+export type { CTAVariant } from './CTASection.svelte';
+export { default as StatsBand } from './StatsBand.svelte';
+export type { BandStat } from './StatsBand.svelte';
+export { default as Modal } from './Modal.svelte';
+export type { ModalSize } from './Modal.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export type { DrawerSide, DrawerSize } from './Drawer.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';
+export type { CommandItem } from './CommandPalette.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuSeparator } from './MenuSeparator.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export type { TooltipPlacement } from './Tooltip.svelte';

package/dist/styles/paper/index.js

@@ -0,0 +1,83 @@
+/**
+ * Paper — The neutral one. Start here if unsure: soft corners, light shadows, generous spacing, and nothing that fights the content.
+ *
+ * Generated by `bun run index`. Behaviour comes from
+ * `@nqmcreative/ui/core`, re-exported below so this one import covers
+ * the whole style.
+ */
+/* --- shared behaviour --- */
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
+/* --- locale --- */
+export { default as LocaleProvider } from './LocaleProvider.svelte';
+/* --- actions --- */
+export { default as Button } from './Button.svelte';
+export { default as Link } from './Link.svelte';
+/* --- forms --- */
+export { default as Input } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as Switch } from './Switch.svelte';
+export { default as Field } from './Field.svelte';
+export { default as Label } from './Label.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as Slider } from './Slider.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
+export { default as InputGroup } from './InputGroup.svelte';
+export { default as Combobox } from './Combobox.svelte';
+export { default as MultiSelect } from './MultiSelect.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as Dropzone } from './Dropzone.svelte';
+/* --- data display --- */
+export { default as Badge } from './Badge.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Stat } from './Stat.svelte';
+export { default as Table } from './Table.svelte';
+export { default as Kbd } from './Kbd.svelte';
+/* --- feedback --- */
+export { default as Alert } from './Alert.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Toaster } from './Toaster.svelte';
+/* --- layout & navigation --- */
+export { default as Divider } from './Divider.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Steps } from './Steps.svelte';
+/* --- app shell --- */
+export { default as Navbar } from './Navbar.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as Footer } from './Footer.svelte';
+/* --- marketing --- */
+export { default as HeroSection } from './HeroSection.svelte';
+export { default as FeatureGrid } from './FeatureGrid.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';
+export { default as PricingCard } from './PricingCard.svelte';
+export { default as Testimonial } from './Testimonial.svelte';
+export { default as LogoCloud } from './LogoCloud.svelte';
+export { default as CTASection } from './CTASection.svelte';
+export { default as StatsBand } from './StatsBand.svelte';
+/* --- overlay --- */
+export { default as Modal } from './Modal.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuSeparator } from './MenuSeparator.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/styles/paper/theme.css

@@ -0,0 +1,222 @@
+/*
+ * paper — design tokens.
+ *
+ * The neutral style: soft corners, light shadows, and a palette that gets out
+ * of the content's way. Import this after `@import "tailwindcss";` in your
+ * app's CSS entry point.
+ *
+ * The token *names* are a contract shared by every style — `core` and every
+ * component are written against them, so only the values below change from one
+ * style to the next. Each hue follows the same 4-step shape:
+ *
+ *   --color-<tone>          base / solid fill / text on light surfaces
+ *   --color-<tone>-hover    darker step for hover + active
+ *   --color-<tone>-light    tinted surface (soft variants, alerts, badges)
+ *   --color-<tone>-border   hairline that reads against the tinted surface
+ */
+@theme {
+	/* --- surfaces --- */
+	--color-bg: #ffffff;
+	--color-bg-alt: #f9fafb;
+	--color-bg-inset: #f3f4f6;
+	--color-hairline: #e5e7eb;
+	--color-hairline-strong: #d1d5db;
+
+	/* --- text --- */
+	--color-text: #111827;
+	--color-text-secondary: #4b5563;
+	--color-text-muted: #6b7280;
+	--color-text-inverse: #ffffff;
+
+	/* --- brand / primary (indigo) --- */
+	--color-brand: #4f46e5;
+	--color-brand-hover: #4338ca;
+	--color-brand-light: #eef2ff;
+	--color-brand-border: #c7d2fe;
+
+	/* --- accent (rose) --- */
+	--color-accent: #e11d48;
+	--color-accent-hover: #be123c;
+	--color-accent-light: #fff1f2;
+	--color-accent-border: #fecdd3;
+
+	/* --- violet --- */
+	--color-violet: #7c3aed;
+	--color-violet-hover: #6d28d9;
+	--color-violet-light: #f5f3ff;
+	--color-violet-border: #ddd6fe;
+
+	/* --- info (blue) --- */
+	--color-info: #2563eb;
+	--color-info-hover: #1d4ed8;
+	--color-info-light: #eff6ff;
+	--color-info-border: #bfdbfe;
+
+	/* --- success (emerald) --- */
+	--color-success: #059669;
+	--color-success-hover: #047857;
+	--color-success-light: #ecfdf5;
+	--color-success-border: #a7f3d0;
+
+	/* --- warning (amber) --- */
+	--color-warning: #d97706;
+	--color-warning-hover: #b45309;
+	--color-warning-light: #fffbeb;
+	--color-warning-border: #fde68a;
+
+	/* --- danger (red) --- */
+	--color-danger: #dc2626;
+	--color-danger-hover: #b91c1c;
+	--color-danger-light: #fef2f2;
+	--color-danger-border: #fecaca;
+
+	/* --- neutral (gray) --- */
+	--color-neutral: #6b7280;
+	--color-neutral-hover: #4b5563;
+	--color-neutral-light: #f3f4f6;
+	--color-neutral-border: #d1d5db;
+
+	/* --- type --- */
+	/*
+	 * Plus Jakarta Sans: rounded terminals, open counters, low contrast. Softer
+	 * than a system stack, which lands on Segoe UI for most readers and gives
+	 * paper's generous spacing nothing warm to sit in.
+	 *
+	 * One variable file covers 400 to 700, so this costs a single request per
+	 * subset — see `fonts.css`. Everything degrades to the system stack if that
+	 * file is not imported, so the webfont stays optional.
+	 */
+	--font-sans:
+		'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+	--font-heading:
+		'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+
+	/* --- motion --- */
+	--ease-brand: cubic-bezier(0.4, 0, 0.2, 1);
+	--ease-brand-out: cubic-bezier(0, 0, 0.2, 1);
+}
+
+/*
+ * Dark mode. Two ways in, and they cooperate:
+ *
+ *   1. put `class="dark"` on <html> — an explicit choice always wins
+ *   2. do nothing — the OS preference applies, unless <html> says `class="light"`
+ *
+ * Both blocks below carry the same values on purpose; keep them in sync.
+ * Every utility built on these tokens follows automatically, so components
+ * need no `dark:` classes of their own.
+ */
+@custom-variant dark (&:where(.dark, .dark *));
+
+.dark {
+	color-scheme: dark;
+
+	--color-bg: #0b0f19;
+	--color-bg-alt: #111827;
+	--color-bg-inset: #1f2937;
+	--color-hairline: #1f2937;
+	--color-hairline-strong: #374151;
+
+	--color-text: #f9fafb;
+	--color-text-secondary: #d1d5db;
+	--color-text-muted: #9ca3af;
+	--color-text-inverse: #0b0f19;
+
+	--color-brand: #818cf8;
+	--color-brand-hover: #a5b4fc;
+	--color-brand-light: #1e1b4b;
+	--color-brand-border: #3730a3;
+
+	--color-accent: #fb7185;
+	--color-accent-hover: #fda4af;
+	--color-accent-light: #4c0519;
+	--color-accent-border: #9f1239;
+
+	--color-violet: #a78bfa;
+	--color-violet-hover: #c4b5fd;
+	--color-violet-light: #2e1065;
+	--color-violet-border: #5b21b6;
+
+	--color-info: #60a5fa;
+	--color-info-hover: #93c5fd;
+	--color-info-light: #172554;
+	--color-info-border: #1e40af;
+
+	--color-success: #34d399;
+	--color-success-hover: #6ee7b7;
+	--color-success-light: #022c22;
+	--color-success-border: #065f46;
+
+	--color-warning: #fbbf24;
+	--color-warning-hover: #fcd34d;
+	--color-warning-light: #451a03;
+	--color-warning-border: #92400e;
+
+	--color-danger: #f87171;
+	--color-danger-hover: #fca5a5;
+	--color-danger-light: #450a0a;
+	--color-danger-border: #991b1b;
+
+	--color-neutral: #9ca3af;
+	--color-neutral-hover: #d1d5db;
+	--color-neutral-light: #1f2937;
+	--color-neutral-border: #374151;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root:not(.light) {
+		color-scheme: dark;
+
+		--color-bg: #0b0f19;
+		--color-bg-alt: #111827;
+		--color-bg-inset: #1f2937;
+		--color-hairline: #1f2937;
+		--color-hairline-strong: #374151;
+
+		--color-text: #f9fafb;
+		--color-text-secondary: #d1d5db;
+		--color-text-muted: #9ca3af;
+		--color-text-inverse: #0b0f19;
+
+		--color-brand: #818cf8;
+		--color-brand-hover: #a5b4fc;
+		--color-brand-light: #1e1b4b;
+		--color-brand-border: #3730a3;
+
+		--color-accent: #fb7185;
+		--color-accent-hover: #fda4af;
+		--color-accent-light: #4c0519;
+		--color-accent-border: #9f1239;
+
+		--color-violet: #a78bfa;
+		--color-violet-hover: #c4b5fd;
+		--color-violet-light: #2e1065;
+		--color-violet-border: #5b21b6;
+
+		--color-info: #60a5fa;
+		--color-info-hover: #93c5fd;
+		--color-info-light: #172554;
+		--color-info-border: #1e40af;
+
+		--color-success: #34d399;
+		--color-success-hover: #6ee7b7;
+		--color-success-light: #022c22;
+		--color-success-border: #065f46;
+
+		--color-warning: #fbbf24;
+		--color-warning-hover: #fcd34d;
+		--color-warning-light: #451a03;
+		--color-warning-border: #92400e;
+
+		--color-danger: #f87171;
+		--color-danger-hover: #fca5a5;
+		--color-danger-light: #450a0a;
+		--color-danger-border: #991b1b;
+
+		--color-neutral: #9ca3af;
+		--color-neutral-hover: #d1d5db;
+		--color-neutral-light: #1f2937;
+		--color-neutral-border: #374151;
+	}
+}