@dryui/ui 0.2.2 → 0.4.0

package/dist/tag/{tag.svelte → tag-button.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { resolveAlias } from '../internal/color-aliases.js';
 	import type { TagColor } from './index.js';
 
@@ -37,7 +38,7 @@
 	>
 		{@render children()}
 		{#if dismissible}
-			<button type="button" aria-label="Dismiss" onclick={onDismiss}>
+			<Button variant="bare" type="button" aria-label="Dismiss" onclick={onDismiss}>
 				<svg
 					width="14"
 					height="14"
@@ -54,7 +55,7 @@
 						stroke-linejoin="round"
 					/>
 				</svg>
-			</button>
+			</Button>
 		{/if}
 	</span>
 </span>
@@ -62,6 +63,7 @@
 <style>
 	[data-wrapper] {
 		display: inline-grid;
+		justify-self: start;
 	}
 
 	[data-tag] {
@@ -72,10 +74,10 @@
 		gap: var(--dry-space-1);
 		padding: var(--dry-tag-padding-y, var(--dry-space-1))
 			var(--dry-tag-padding-x, var(--dry-space-2_5));
-		font-size: var(--dry-tag-font-size, var(--dry-type-tiny-size, var(--dry-text-xs-size)));
+		font-size: var(--dry-tag-font-size, var(--dry-type-tiny-size));
 		font-family: var(--dry-font-sans);
 		font-weight: 500;
-		line-height: var(--dry-type-tiny-leading, var(--dry-text-xs-leading));
+		line-height: var(--dry-type-tiny-leading);
 		color: var(--dry-tag-color, var(--dry-color-text-weak));
 		background: var(--dry-tag-bg, var(--dry-color-fill));
 		border: 1px solid var(--dry-tag-border, transparent);
@@ -85,56 +87,21 @@
 		transition: background var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
-	[data-tag] button {
-		display: inline-grid;
-		place-items: center;
-		box-sizing: border-box;
-		height: var(--dry-tag-dismiss-size, var(--dry-space-12));
-		aspect-ratio: 1;
-		padding: 0;
-		border: none;
-		background: transparent;
-		color: inherit;
-		cursor: pointer;
-		border-radius: var(--dry-radius-sm);
-		opacity: 0.7;
-		transition:
-			opacity var(--dry-duration-fast) var(--dry-ease-default),
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-		margin-right: calc(-1 * var(--dry-space-1));
-	}
-
-	[data-tag] button:hover {
-		opacity: 1;
-		background: color-mix(in srgb, currentColor 12%, transparent);
-	}
-
-	[data-tag] button:active {
-		transform: scale(0.94);
-	}
-
-	[data-tag] button:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -1px;
-		opacity: 1;
-	}
-
 	/* ── Sizes ────────────────────────────────────────────────────────────────── */
 
 	[data-size='sm'] {
-		--dry-tag-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		--dry-tag-font-size: var(--dry-type-tiny-size);
 		--dry-tag-padding-x: var(--dry-space-2_5);
 		--dry-tag-padding-y: var(--dry-space-1);
 		min-height: var(--dry-space-6);
 	}
 
 	[data-size='md'] {
-		--dry-tag-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		--dry-tag-font-size: var(--dry-type-small-size);
 		--dry-tag-padding-x: var(--dry-space-3);
 		--dry-tag-padding-y: var(--dry-space-1_5);
 		min-height: var(--dry-space-8);
-		line-height: var(--dry-type-tiny-leading, var(--dry-text-xs-leading));
+		line-height: var(--dry-type-tiny-leading);
 	}
 
 	/* ── Variant: solid ───────────────────────────────────────────────────────── */

package/dist/tag/tag-button.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TagColor } from './index.js';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: 'solid' | 'outline' | 'soft';
+    color?: TagColor;
+    size?: 'sm' | 'md';
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    children: Snippet;
+}
+declare const TagButton: import("svelte").Component<Props, {}, "">;
+type TagButton = ReturnType<typeof TagButton>;
+export default TagButton;

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

@@ -6,7 +6,7 @@ export interface TagsInputRootProps extends PrimitiveTagsInputRootProps {
 import Root from './tags-input-root.svelte';
 import Input from './tags-input-input.svelte';
 import TagItem from './tags-input-tag.svelte';
-import TagDelete from './tags-input-tag-delete.svelte';
+import TagDelete from './tags-input-tag-delete-button.svelte';
 import List from './tags-input-list.svelte';
 export declare const TagsInput: {
     Root: typeof Root;

package/dist/tags-input/index.js

@@ -1,7 +1,7 @@
 import Root from './tags-input-root.svelte';
 import Input from './tags-input-input.svelte';
 import TagItem from './tags-input-tag.svelte';
-import TagDelete from './tags-input-tag-delete.svelte';
+import TagDelete from './tags-input-tag-delete-button.svelte';
 import List from './tags-input-list.svelte';
 export const TagsInput = {
     Root,

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

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends HTMLInputAttributes {
-	placeholder?: string;
+    placeholder?: string;
 }
-declare const TagsInputInput: import('svelte').Component<Props, {}, ''>;
+declare const TagsInputInput: import("svelte").Component<Props, {}, "">;
 type TagsInputInput = ReturnType<typeof TagsInputInput>;
 export default TagsInputInput;

package/dist/tags-input/tags-input-list.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const TagsInputList: import('svelte').Component<Props, {}, ''>;
+declare const TagsInputList: import("svelte").Component<Props, {}, "">;
 type TagsInputList = ReturnType<typeof TagsInputList>;
 export default TagsInputList;

package/dist/tags-input/tags-input-root.svelte.d.ts

@@ -1,14 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	value?: string[];
-	maxTags?: number;
-	allowDuplicates?: boolean;
-	disabled?: boolean;
-	size?: 'sm' | 'md' | 'lg';
-	onValueChange?: (value: string[]) => void;
-	children: Snippet;
+    value?: string[];
+    maxTags?: number;
+    allowDuplicates?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    onValueChange?: (value: string[]) => void;
+    children: Snippet;
 }
-declare const TagsInputRoot: import('svelte').Component<Props, {}, 'value'>;
+declare const TagsInputRoot: import("svelte").Component<Props, {}, "value">;
 type TagsInputRoot = ReturnType<typeof TagsInputRoot>;
 export default TagsInputRoot;

package/dist/tags-input/tags-input-tag-delete-button.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CloseButtonBase from '../internal/close-button-base.svelte';
+	import { getTagsInputCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		index: number;
+		value?: string;
+	}
+
+	let { index, value = '', onclick, ...rest }: Props = $props();
+
+	const ctx = getTagsInputCtx();
+
+	function handleClick(e: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		if (ctx.disabled) return;
+		ctx.removeTag(index);
+		if (onclick) {
+			(onclick as (e: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(e);
+		}
+	}
+</script>
+
+<CloseButtonBase
+	aria-label="Remove tag: {value}"
+	disabled={ctx.disabled}
+	{...rest}
+	onclick={handleClick}
+/>

package/dist/tags-input/tags-input-tag-delete-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    index: number;
+    value?: string;
+}
+declare const TagsInputTagDeleteButton: import("svelte").Component<Props, {}, "">;
+type TagsInputTagDeleteButton = ReturnType<typeof TagsInputTagDeleteButton>;
+export default TagsInputTagDeleteButton;

package/dist/tags-input/tags-input-tag.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
-	index: number;
-	value: string;
-	children?: Snippet;
+    index: number;
+    value: string;
+    children?: Snippet;
 }
-declare const TagsInputTag: import('svelte').Component<Props, {}, ''>;
+declare const TagsInputTag: import("svelte").Component<Props, {}, "">;
 type TagsInputTag = ReturnType<typeof TagsInputTag>;
 export default TagsInputTag;

package/dist/text/text.svelte.d.ts

@@ -1,14 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props 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;
 }
-declare const Text: import('svelte').Component<Props, {}, ''>;
+declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/textarea/textarea.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 interface Props extends HTMLTextareaAttributes {
-	value?: string;
-	size?: 'sm' | 'md' | 'lg';
-	disabled?: boolean;
+    value?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
 }
-declare const Textarea: import('svelte').Component<Props, {}, 'value'>;
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

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;
+}