@dryui/ui 0.2.1 → 0.3.0

package/dist/spotlight/spotlight.svelte

@@ -35,6 +35,9 @@
 	let y = $state('50%');
 	let active = $state(false);
 	let prefersReducedMotion = $state(false);
+	let pointerFrame = $state<number | null>(null);
+	let pendingX = '50%';
+	let pendingY = '50%';
 
 	function captureElement(node: HTMLDivElement) {
 		element = node;
@@ -46,6 +49,9 @@
 	}
 
 	function centerSpotlight() {
+		cancelQueuedPointerPosition();
+		pendingX = '50%';
+		pendingY = '50%';
 		x = '50%';
 		y = '50%';
 	}
@@ -57,8 +63,30 @@
 	function updateFromClientPoint(clientX: number, clientY: number) {
 		if (!element) return;
 		const rect = element.getBoundingClientRect();
-		x = `${clientX - rect.left}px`;
-		y = `${clientY - rect.top}px`;
+		queuePointerPosition(`${clientX - rect.left}px`, `${clientY - rect.top}px`);
+	}
+
+	function flushPointerPosition() {
+		pointerFrame = null;
+		x = pendingX;
+		y = pendingY;
+	}
+
+	function queuePointerPosition(nextX: string, nextY: string) {
+		pendingX = nextX;
+		pendingY = nextY;
+
+		if (pointerFrame !== null) return;
+
+		pointerFrame = requestAnimationFrame(() => {
+			flushPointerPosition();
+		});
+	}
+
+	function cancelQueuedPointerPosition() {
+		if (pointerFrame === null) return;
+		cancelAnimationFrame(pointerFrame);
+		pointerFrame = null;
 	}
 
 	function handlePointerEnter(event: PointerEvent) {
@@ -101,11 +129,16 @@
 			initialValue: '50%'
 		});
 
-		return observeReducedMotionPreference((matches) => {
+		const stopMotionObserver = observeReducedMotionPreference((matches) => {
 			prefersReducedMotion = matches;
 			active = matches || !followPointer;
 			centerSpotlight();
 		});
+
+		return () => {
+			cancelQueuedPointerPosition();
+			stopMotionObserver();
+		};
 	});
 
 	const radiusValue = $derived(`${Math.max(0, radius)}px`);
@@ -137,6 +170,7 @@
 
 <div
 	{@attach captureElement}
+	{@attach applyStyles}
 	class={className}
 	data-spotlight
 	data-active={active || undefined}
@@ -147,7 +181,6 @@
 	onpointerleave={handlePointerLeave}
 	onfocusin={handleFocusIn}
 	onfocusout={handleFocusOut}
-	use:applyStyles
 	{...rest}
 >
 	{@render children()}
@@ -221,6 +254,11 @@
 			transform var(--dry-duration-normal, 200ms) var(--dry-ease-out, ease),
 			--dry-spotlight-x 60ms ease-out,
 			--dry-spotlight-y 60ms ease-out;
+	}
+
+	[data-spotlight][data-active]::before,
+	[data-spotlight][data-static]::before,
+	[data-spotlight][data-follow-pointer]::before {
 		will-change: opacity, transform;
 	}
 

package/dist/star-rating/index.d.ts

@@ -1,11 +1,11 @@
 import type { HTMLAttributes } from 'svelte/elements';
 export interface StarRatingRootProps extends HTMLAttributes<HTMLDivElement> {
-	stars: number;
-	label?: string;
-	size?: 'sm' | 'md' | 'lg';
-	variant?: 'filled' | 'outlined';
+    stars: number;
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'filled' | 'outlined';
 }
 import StarRatingRoot from './star-rating-root.svelte';
 export declare const StarRating: {
-	Root: typeof StarRatingRoot;
+    Root: typeof StarRatingRoot;
 };

package/dist/stepper/index.d.ts

@@ -1,16 +1,11 @@
-export type {
-	StepperRootProps,
-	StepperListProps,
-	StepperStepProps,
-	StepperSeparatorProps
-} from '@dryui/primitives';
+export type { StepperRootProps, StepperListProps, StepperStepProps, StepperSeparatorProps } from '@dryui/primitives';
 import StepperRoot from './stepper-root.svelte';
 import StepperList from './stepper-list.svelte';
 import StepperStep from './stepper-step.svelte';
 import StepperSeparator from './stepper-separator.svelte';
 export declare const Stepper: {
-	Root: typeof StepperRoot;
-	List: typeof StepperList;
-	Step: typeof StepperStep;
-	Separator: typeof StepperSeparator;
+    Root: typeof StepperRoot;
+    List: typeof StepperList;
+    Step: typeof StepperStep;
+    Separator: typeof StepperSeparator;
 };

package/dist/svg/index.d.ts

@@ -1,3 +1,4 @@
 import type { SvgProps as PrimitiveSvgProps } from '@dryui/primitives/svg';
-export interface SvgProps extends PrimitiveSvgProps {}
+export interface SvgProps extends PrimitiveSvgProps {
+}
 export { default as Svg } from './svg.svelte';

package/dist/table/index.d.ts

@@ -1,13 +1,4 @@
-export type {
-	TableRootProps,
-	TableHeaderProps,
-	TableBodyProps,
-	TableFooterProps,
-	TableRowProps,
-	TableHeadProps,
-	TableCellProps,
-	TableCaptionProps
-} from '@dryui/primitives';
+export type { TableRootProps, TableHeaderProps, TableBodyProps, TableFooterProps, TableRowProps, TableHeadProps, TableCellProps, TableCaptionProps } from '@dryui/primitives';
 import TableRoot from './table-root.svelte';
 import TableHeader from './table-header.svelte';
 import TableBody from './table-body.svelte';
@@ -17,12 +8,12 @@ import TableHead from './table-head.svelte';
 import TableCell from './table-cell.svelte';
 import TableCaption from './table-caption.svelte';
 export declare const Table: {
-	Root: typeof TableRoot;
-	Header: typeof TableHeader;
-	Body: typeof TableBody;
-	Footer: typeof TableFooter;
-	Row: typeof TableRow;
-	Head: typeof TableHead;
-	Cell: typeof TableCell;
-	Caption: typeof TableCaption;
+    Root: typeof TableRoot;
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Footer: typeof TableFooter;
+    Row: typeof TableRow;
+    Head: typeof TableHead;
+    Cell: typeof TableCell;
+    Caption: typeof TableCaption;
 };

package/dist/table-of-contents/index.d.ts

@@ -1,14 +1,9 @@
-export type {
-	TocHeading,
-	TableOfContentsRootProps,
-	TableOfContentsListProps,
-	TableOfContentsItemProps
-} from '@dryui/primitives';
+export type { TocHeading, TableOfContentsRootProps, TableOfContentsListProps, TableOfContentsItemProps } from '@dryui/primitives';
 import TableOfContentsRoot from './table-of-contents-root.svelte';
 import TableOfContentsList from './table-of-contents-list.svelte';
 import TableOfContentsItem from './table-of-contents-item.svelte';
 export declare const TableOfContents: {
-	Root: typeof TableOfContentsRoot;
-	List: typeof TableOfContentsList;
-	Item: typeof TableOfContentsItem;
+    Root: typeof TableOfContentsRoot;
+    List: typeof TableOfContentsList;
+    Item: typeof TableOfContentsItem;
 };

package/dist/tabs/index.d.ts

@@ -1,15 +1,32 @@
-import type { TabsTriggerProps as PrimitiveTabsTriggerProps } from '@dryui/primitives';
-export type { TabsRootProps, TabsListProps, TabsContentProps } from '@dryui/primitives';
-export interface TabsTriggerProps extends PrimitiveTabsTriggerProps {
-	size?: 'sm' | 'md' | 'lg';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface TabsRootProps extends HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    orientation?: 'horizontal' | 'vertical';
+    activationMode?: 'automatic' | 'manual';
+    children: Snippet;
+}
+export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+export interface TabsTriggerProps extends HTMLButtonAttributes {
+    value: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    children: Snippet;
+}
+export interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    children: Snippet;
 }
 import TabsRoot from './tabs-root.svelte';
 import TabsList from './tabs-list.svelte';
 import TabsTrigger from './tabs-trigger.svelte';
 import TabsContent from './tabs-content.svelte';
 export declare const Tabs: {
-	Root: typeof TabsRoot;
-	List: typeof TabsList;
-	Trigger: typeof TabsTrigger;
-	Content: typeof TabsContent;
+    Root: typeof TabsRoot;
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
 };

package/dist/tabs/tabs-trigger.svelte

@@ -85,7 +85,10 @@
 
 	[data-tabs-trigger][data-state='active'] {
 		color: var(--dry-color-text-brand);
-		border-bottom-color: var(--dry-tabs-trigger-active-border-bottom-color, var(--dry-color-stroke-selected));
+		border-bottom-color: var(
+			--dry-tabs-trigger-active-border-bottom-color,
+			var(--dry-color-stroke-selected)
+		);
 		border-right-color: var(--dry-tabs-trigger-active-border-right-color, transparent);
 		font-weight: 600;
 	}
@@ -124,5 +127,4 @@
 		align-items: center;
 		gap: var(--dry-space-1_5);
 	}
-
 </style>

package/dist/tag/index.d.ts

@@ -2,8 +2,8 @@ import type { TagProps as PrimitiveTagProps } from '@dryui/primitives';
 import type { BadgeColor } from '../badge/index.js';
 export type TagColor = BadgeColor;
 export interface TagProps extends PrimitiveTagProps {
-	variant?: 'solid' | 'outline' | 'soft';
-	color?: TagColor;
-	size?: 'sm' | 'md';
+    variant?: 'solid' | 'outline' | 'soft';
+    color?: TagColor;
+    size?: 'sm' | 'md';
 }
 export { default as Tag } from './tag.svelte';

package/dist/tags-input/index.d.ts

@@ -1,12 +1,7 @@
 import type { TagsInputRootProps as PrimitiveTagsInputRootProps } from '@dryui/primitives';
-export type {
-	TagsInputInputProps,
-	TagsInputTagProps,
-	TagsInputTagDeleteProps,
-	TagsInputListProps
-} from '@dryui/primitives';
+export type { TagsInputInputProps, TagsInputTagProps, TagsInputTagDeleteProps, TagsInputListProps } from '@dryui/primitives';
 export interface TagsInputRootProps extends PrimitiveTagsInputRootProps {
-	size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
 }
 import Root from './tags-input-root.svelte';
 import Input from './tags-input-input.svelte';
@@ -14,9 +9,9 @@ import TagItem from './tags-input-tag.svelte';
 import TagDelete from './tags-input-tag-delete.svelte';
 import List from './tags-input-list.svelte';
 export declare const TagsInput: {
-	Root: typeof Root;
-	Input: typeof Input;
-	Tag: typeof TagItem;
-	TagDelete: typeof TagDelete;
-	List: typeof List;
+    Root: typeof Root;
+    Input: typeof Input;
+    Tag: typeof TagItem;
+    TagDelete: typeof TagDelete;
+    List: typeof List;
 };

package/dist/text/index.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface TextProps extends HTMLAttributes<HTMLElement> {
-	as?: 'p' | 'span' | 'div';
-	color?: 'default' | 'muted' | 'secondary';
-	size?: 'xs' | 'sm' | 'md' | 'lg';
-	font?: 'sans' | 'mono';
-	weight?: 'normal' | 'medium' | 'semibold' | 'bold';
-	variant?: 'default' | 'label';
-	children: Snippet;
+    as?: 'p' | 'span' | 'div';
+    color?: 'default' | 'muted' | 'secondary';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    font?: 'sans' | 'mono';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    variant?: 'default' | 'label';
+    children: Snippet;
 }
 export { default as Text } from './text.svelte';

package/dist/textarea/index.d.ts

@@ -1,5 +1,5 @@
 import type { TextareaProps as PrimitiveTextareaProps } from '@dryui/primitives';
 export interface TextareaProps extends PrimitiveTextareaProps {
-	size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
 }
 export { default as Textarea } from './textarea.svelte';

package/dist/themes/aurora.css

@@ -0,0 +1,229 @@
+/*
+ * Aurora — Warm Organic
+ *
+ * Inspired by: gradient meshes, soft organic blobs, painterly warmth,
+ * Conduit brand energy, Stencil sunset washes, the thinking orb.
+ *
+ * Coral-orange accent, warm gradients, soft glass, serif display font.
+ * Use with: <html class="theme-aurora"> or <html data-theme="aurora">
+ */
+
+[data-theme='aurora'],
+.theme-aurora {
+	/* ─── Brand — warm coral instead of cold blue ─────────────────── */
+	--dry-color-brand: hsl(15, 85%, 55%);
+	--dry-color-text-brand: hsl(15, 80%, 42%);
+	--dry-color-fill-brand: hsl(15, 85%, 55%);
+	--dry-color-fill-brand-hover: hsl(15, 85%, 47%);
+	--dry-color-fill-brand-active: hsl(15, 85%, 41%);
+	--dry-color-fill-brand-weak: hsla(15, 85%, 55%, 0.07);
+	--dry-color-stroke-brand: hsla(15, 85%, 55%, 0.5);
+	--dry-color-stroke-brand-strong: hsla(15, 85%, 55%, 0.8);
+	--dry-color-stroke-brand-weak: hsla(15, 85%, 55%, 0.2);
+	--dry-color-on-brand: #ffffff;
+	--dry-color-focus-ring: hsla(15, 85%, 55%, 0.4);
+
+	/* ─── Accent — golden amber ───────────────────────────────────── */
+	--dry-color-accent: hsl(38, 92%, 55%);
+	--dry-color-text-accent: hsl(38, 80%, 35%);
+	--dry-color-fill-accent: hsl(38, 92%, 55%);
+	--dry-color-fill-accent-hover: hsl(38, 92%, 47%);
+	--dry-color-fill-accent-active: hsl(38, 92%, 41%);
+	--dry-color-fill-accent-weak: hsla(38, 92%, 55%, 0.08);
+	--dry-color-stroke-accent: hsla(38, 92%, 55%, 0.5);
+	--dry-color-stroke-accent-strong: hsla(38, 92%, 55%, 0.8);
+	--dry-color-stroke-accent-weak: hsla(38, 92%, 55%, 0.2);
+	--dry-color-icon-accent: hsla(38, 92%, 55%, 0.8);
+	--dry-color-on-accent: #1a1410;
+
+	/* ─── Backgrounds — warm cream tint ───────────────────────────── */
+	--dry-color-bg-base: hsl(30, 25%, 98%);
+	--dry-color-bg-raised: hsl(30, 20%, 95%);
+	--dry-color-bg-overlay: hsl(30, 15%, 92%);
+	--dry-color-bg-elevated: hsl(30, 12%, 89%);
+	--dry-color-bg-floating: hsl(30, 30%, 99%);
+	--dry-color-bg-sunken: hsl(30, 18%, 94%);
+
+	/* ─── Neutrals — warm-shifted ─────────────────────────────────── */
+	--dry-color-text-strong: hsla(20, 40%, 10%, 0.9);
+	--dry-color-text-weak: hsla(20, 30%, 15%, 0.6);
+	--dry-color-icon: hsla(20, 30%, 20%, 0.65);
+	--dry-color-stroke-strong: hsla(20, 25%, 20%, 0.35);
+	--dry-color-stroke-weak: hsla(20, 25%, 25%, 0.1);
+	--dry-color-fill: hsla(20, 30%, 30%, 0.04);
+	--dry-color-fill-hover: hsla(20, 30%, 30%, 0.06);
+	--dry-color-fill-active: hsla(20, 30%, 30%, 0.12);
+
+	/* ─── Shadows — warm ink ──────────────────────────────────────── */
+	--dry-shadow-raised: 0 1px 3px hsla(20, 30%, 20%, 0.06), 0 1px 2px hsla(20, 30%, 20%, 0.04);
+	--dry-shadow-overlay: 0 8px 24px hsla(20, 30%, 20%, 0.1), 0 2px 8px hsla(20, 30%, 20%, 0.06);
+	--dry-shadow-brand: 0 4px 14px hsla(15, 85%, 55%, 0.2), 0 2px 6px hsla(15, 85%, 55%, 0.12);
+	--dry-shadow-accent: 0 4px 14px hsla(38, 92%, 55%, 0.2), 0 2px 6px hsla(38, 92%, 55%, 0.12);
+
+	/* ─── Glass — warm frosted ────────────────────────────────────── */
+	--dry-glass-tint: hsla(30, 25%, 98%, 0.8);
+	--dry-glass-opacity: 78%;
+	--dry-glass-saturation: 160%;
+	--dry-glass-border: hsla(20, 20%, 50%, 0.08);
+	--dry-glass-border-strong: hsla(20, 20%, 50%, 0.15);
+
+	/* ─── Glow — warm halos ───────────────────────────────────────── */
+	--dry-glow-color: var(--dry-color-fill-brand);
+	--dry-glow-ring: 0 0 0 1px hsla(15, 85%, 55%, 0.3), 0 0 16px 3px hsla(15, 85%, 55%, 0.15);
+	--dry-glow-ring-accent: 0 0 0 1px hsla(38, 92%, 55%, 0.3), 0 0 16px 3px hsla(38, 92%, 55%, 0.15);
+	--dry-glow-ambient: hsla(15, 85%, 55%, 0.05);
+	--dry-glow-ambient-accent: hsla(38, 92%, 55%, 0.05);
+
+	/* ─── Gradient palette — warm organic ─────────────────────────── */
+	--dry-gradient-warm: linear-gradient(
+		135deg,
+		hsl(15, 85%, 65%) 0%,
+		hsl(38, 90%, 60%) 50%,
+		hsl(350, 60%, 62%) 100%
+	);
+	--dry-gradient-cool: linear-gradient(
+		135deg,
+		hsl(25, 50%, 75%) 0%,
+		hsl(350, 40%, 70%) 50%,
+		hsl(280, 30%, 65%) 100%
+	);
+	--dry-gradient-sunset: linear-gradient(
+		135deg,
+		hsl(45, 95%, 65%) 0%,
+		hsl(15, 90%, 58%) 40%,
+		hsl(345, 75%, 55%) 100%
+	);
+	--dry-gradient-ocean: linear-gradient(
+		135deg,
+		hsl(30, 70%, 60%) 0%,
+		hsl(10, 80%, 55%) 50%,
+		hsl(350, 60%, 52%) 100%
+	);
+	--dry-gradient-surface: linear-gradient(180deg, hsl(30, 25%, 98%) 0%, hsl(30, 20%, 95%) 100%);
+
+	/* ─── Grain — subtle warmth ───────────────────────────────────── */
+	--dry-grain-opacity: 0.03;
+	--dry-grain-blend: overlay;
+
+	/* ─── Typography — serif display ──────────────────────────────── */
+	--dry-font-display: 'Playfair Display', 'Georgia', 'Times New Roman', ui-serif, serif;
+
+	/* ─── Radius — softer corners ─────────────────────────────────── */
+	--dry-radius-lg: 10px;
+	--dry-radius-xl: 14px;
+	--dry-radius-2xl: 20px;
+}
+
+/* ─── Aurora Dark variant ────────────────────────────────────────── */
+[data-theme='aurora-dark'],
+.theme-aurora-dark {
+	/* ─── Brand — coral, lighter for dark bg ──────────────────────── */
+	--dry-color-brand: hsl(15, 90%, 70%);
+	--dry-color-text-brand: hsl(15, 90%, 70%);
+	--dry-color-fill-brand: hsl(15, 90%, 70%);
+	--dry-color-fill-brand-hover: hsl(15, 90%, 62%);
+	--dry-color-fill-brand-active: hsl(15, 90%, 56%);
+	--dry-color-fill-brand-weak: hsla(15, 90%, 70%, 0.08);
+	--dry-color-stroke-brand: hsla(15, 90%, 70%, 0.5);
+	--dry-color-stroke-brand-strong: hsla(15, 90%, 70%, 0.8);
+	--dry-color-stroke-brand-weak: hsla(15, 90%, 70%, 0.2);
+	--dry-color-on-brand: hsl(15, 30%, 10%);
+	--dry-color-focus-ring: hsla(15, 90%, 70%, 0.4);
+
+	/* ─── Accent — golden amber ───────────────────────────────────── */
+	--dry-color-accent: hsl(38, 88%, 68%);
+	--dry-color-text-accent: hsl(38, 88%, 68%);
+	--dry-color-fill-accent: hsl(38, 88%, 68%);
+	--dry-color-fill-accent-hover: hsl(38, 88%, 60%);
+	--dry-color-fill-accent-active: hsl(38, 88%, 54%);
+	--dry-color-fill-accent-weak: hsla(38, 88%, 68%, 0.1);
+	--dry-color-stroke-accent: hsla(38, 88%, 68%, 0.5);
+	--dry-color-stroke-accent-strong: hsla(38, 88%, 68%, 0.8);
+	--dry-color-stroke-accent-weak: hsla(38, 88%, 68%, 0.2);
+	--dry-color-icon-accent: hsla(38, 88%, 68%, 0.8);
+	--dry-color-on-accent: hsl(38, 30%, 10%);
+
+	/* ─── Backgrounds — warm dark ─────────────────────────────────── */
+	--dry-color-bg-base: hsl(20, 18%, 8%);
+	--dry-color-bg-raised: hsl(20, 14%, 12%);
+	--dry-color-bg-overlay: hsl(20, 10%, 17%);
+	--dry-color-bg-elevated: hsl(20, 8%, 21%);
+	--dry-color-bg-floating: hsl(20, 6%, 25%);
+	--dry-color-bg-sunken: hsl(20, 20%, 5%);
+
+	/* ─── Neutrals — warm white on dark ───────────────────────────── */
+	--dry-color-text-strong: hsla(30, 30%, 95%, 1);
+	--dry-color-text-weak: hsla(30, 20%, 90%, 0.72);
+	--dry-color-icon: hsla(30, 20%, 85%, 0.8);
+	--dry-color-stroke-strong: hsla(30, 15%, 80%, 0.5);
+	--dry-color-stroke-weak: hsla(30, 15%, 70%, 0.12);
+	--dry-color-fill: hsla(30, 15%, 80%, 0.06);
+	--dry-color-fill-hover: hsla(30, 15%, 80%, 0.1);
+	--dry-color-fill-active: hsla(30, 15%, 80%, 0.14);
+
+	/* ─── Shadows — warm deep ─────────────────────────────────────── */
+	--dry-shadow-raised: 0 1px 3px hsla(20, 40%, 5%, 0.5), 0 1px 2px hsla(20, 40%, 5%, 0.35);
+	--dry-shadow-overlay: 0 8px 24px hsla(20, 40%, 5%, 0.55), 0 2px 8px hsla(20, 40%, 5%, 0.4);
+	--dry-shadow-brand: 0 4px 14px hsla(15, 90%, 70%, 0.18), 0 2px 6px hsla(15, 90%, 70%, 0.1);
+	--dry-shadow-accent: 0 4px 14px hsla(38, 88%, 68%, 0.18), 0 2px 6px hsla(38, 88%, 68%, 0.1);
+
+	/* ─── Glass — dark warm frosted ───────────────────────────────── */
+	--dry-glass-tint: hsla(20, 14%, 12%, 0.7);
+	--dry-glass-opacity: 62%;
+	--dry-glass-saturation: 130%;
+	--dry-glass-border: hsla(30, 20%, 80%, 0.06);
+	--dry-glass-border-strong: hsla(30, 20%, 80%, 0.12);
+
+	/* ─── Glow — warm dark halos ──────────────────────────────────── */
+	--dry-glow-color: var(--dry-color-fill-brand);
+	--dry-glow-ring: 0 0 0 1px hsla(15, 90%, 70%, 0.25), 0 0 16px 3px hsla(15, 90%, 70%, 0.12);
+	--dry-glow-ring-accent: 0 0 0 1px hsla(38, 88%, 68%, 0.25), 0 0 16px 3px hsla(38, 88%, 68%, 0.12);
+	--dry-glow-ambient: hsla(15, 90%, 70%, 0.04);
+	--dry-glow-ambient-accent: hsla(38, 88%, 68%, 0.04);
+
+	/* ─── Gradient palette — warm dark ────────────────────────────── */
+	--dry-gradient-warm: linear-gradient(
+		135deg,
+		hsl(15, 85%, 70%) 0%,
+		hsl(38, 85%, 65%) 50%,
+		hsl(350, 55%, 65%) 100%
+	);
+	--dry-gradient-cool: linear-gradient(
+		135deg,
+		hsl(25, 45%, 70%) 0%,
+		hsl(350, 35%, 65%) 50%,
+		hsl(280, 25%, 60%) 100%
+	);
+	--dry-gradient-sunset: linear-gradient(
+		135deg,
+		hsl(45, 90%, 68%) 0%,
+		hsl(15, 85%, 62%) 40%,
+		hsl(345, 70%, 58%) 100%
+	);
+	--dry-gradient-ocean: linear-gradient(
+		135deg,
+		hsl(30, 65%, 62%) 0%,
+		hsl(10, 75%, 58%) 50%,
+		hsl(350, 55%, 55%) 100%
+	);
+	--dry-gradient-surface: linear-gradient(180deg, hsl(20, 18%, 8%) 0%, hsl(20, 14%, 12%) 100%);
+
+	/* ─── Grain — warm dark ───────────────────────────────────────── */
+	--dry-grain-opacity: 0.06;
+	--dry-grain-blend: soft-light;
+
+	/* ─── Typography — serif display ──────────────────────────────── */
+	--dry-font-display: 'Playfair Display', 'Georgia', 'Times New Roman', ui-serif, serif;
+
+	/* ─── Beam blend ──────────────────────────────────────────────── */
+	--dry-beam-default-blend: screen;
+
+	/* ─── Overlay backdrops ───────────────────────────────────────── */
+	--dry-color-overlay-backdrop: hsla(20, 30%, 3%, 0.6);
+	--dry-color-overlay-backdrop-strong: hsla(20, 30%, 3%, 0.75);
+
+	/* ─── Radius — softer corners ─────────────────────────────────── */
+	--dry-radius-lg: 10px;
+	--dry-radius-xl: 14px;
+	--dry-radius-2xl: 20px;
+}