@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/styles/glass.css

@@ -0,0 +1,282 @@
+/*
+ * Vibes glass material
+ *
+ * CSS is the dependable render path. An explicitly requested WebGL caustic
+ * layer may enrich it, but never replaces the material or its fallbacks.
+ */
+
+:root {
+	--vibes-glass-shadow-color: black;
+	--vibes-glass-caustic-opacity: 0.68;
+	--vibes-glass-hover-lift: -1px;
+}
+
+.dark {
+	--vibes-glass-caustic-opacity: 0.8;
+}
+
+@layer components {
+	.vibes-card-surface {
+		background-image: linear-gradient(
+			145deg,
+			color-mix(in oklab, var(--foreground) 3%, transparent),
+			transparent 55%
+		);
+		box-shadow:
+			inset 0 1px 0 color-mix(in oklab, var(--foreground) 6%, transparent),
+			0 2px 8px -4px color-mix(in oklab, black 18%, transparent);
+	}
+}
+
+.vibes-glass-surface {
+	/* Resolve palette aliases at the surface so nested theme scopes inherit correctly. */
+	--vibes-glass-fill-color: var(--card, oklch(0.98 0 0));
+	--vibes-glass-edge-color: light-dark(
+		color-mix(in oklab, var(--foreground) 50%, var(--card)),
+		var(--foreground)
+	);
+	/* Light glass reflects its bright surface; dark glass reflects the light ink. */
+	--vibes-glass-highlight-color: light-dark(var(--card), var(--foreground));
+	--vibes-glass-caustic-a: var(--brand);
+	--vibes-glass-caustic-b: var(--foreground);
+	--vibes-glass-fill-strength: 62%;
+	--vibes-glass-edge-strength: 13%;
+	--vibes-glass-highlight-strength: 14%;
+	--vibes-glass-shadow-strength: 16%;
+	--vibes-glass-blur: 20px;
+	--vibes-glass-saturation: 1.22;
+	--vibes-glass-contrast: 1.01;
+	--vibes-glass-outer-shadow: 0 18px 48px
+		color-mix(
+			in oklab,
+			var(--vibes-glass-shadow-color) var(--vibes-glass-shadow-strength),
+			transparent
+		);
+
+	isolation: isolate;
+	background:
+		linear-gradient(
+			132deg,
+			color-mix(
+					in oklab,
+					var(--vibes-glass-highlight-color) var(--vibes-glass-highlight-strength),
+					transparent
+				)
+				0%,
+			transparent 38%
+		),
+		radial-gradient(
+			120% 170% at 8% -42%,
+			color-mix(
+				in oklab,
+				var(--vibes-glass-highlight-color) var(--vibes-glass-highlight-strength),
+				transparent
+			),
+			transparent 62%
+		),
+		color-mix(in oklab, var(--vibes-glass-fill-color) var(--vibes-glass-fill-strength), transparent);
+	border-color: color-mix(
+		in oklab,
+		var(--vibes-glass-edge-color) var(--vibes-glass-edge-strength),
+		transparent
+	);
+	-webkit-backdrop-filter: blur(var(--vibes-glass-blur)) saturate(var(--vibes-glass-saturation))
+		contrast(var(--vibes-glass-contrast));
+	backdrop-filter: blur(var(--vibes-glass-blur)) saturate(var(--vibes-glass-saturation))
+		contrast(var(--vibes-glass-contrast));
+	box-shadow:
+		inset 0 1px 0
+			color-mix(
+				in oklab,
+				var(--vibes-glass-highlight-color) var(--vibes-glass-highlight-strength),
+				transparent
+			),
+		inset 0 -1px 0
+			color-mix(
+				in oklab,
+				var(--vibes-glass-edge-color) var(--vibes-glass-edge-strength),
+				transparent
+			),
+		var(--vibes-glass-outer-shadow);
+}
+
+.vibes-glass-surface[data-glass-intensity='subtle'] {
+	--vibes-glass-fill-strength: 44%;
+	--vibes-glass-edge-strength: 10%;
+	--vibes-glass-highlight-strength: 10%;
+	--vibes-glass-shadow-strength: 10%;
+	--vibes-glass-blur: 12px;
+}
+
+.vibes-glass-surface[data-glass-intensity='strong'] {
+	--vibes-glass-fill-strength: 78%;
+	--vibes-glass-edge-strength: 18%;
+	--vibes-glass-highlight-strength: 18%;
+	--vibes-glass-shadow-strength: 22%;
+	--vibes-glass-blur: 28px;
+	--vibes-glass-saturation: 1.28;
+}
+
+.vibes-glass-surface[data-glass-fidelity='cinematic'] {
+	--vibes-glass-highlight-strength: 20%;
+	--vibes-glass-saturation: 1.34;
+	--vibes-glass-contrast: 1.03;
+	--vibes-glass-shadow-strength: 24%;
+}
+
+.vibes-glass-surface[data-glass-glow='off'] {
+	--vibes-glass-outer-shadow: 0 10px 32px
+		color-mix(
+			in oklab,
+			var(--vibes-glass-shadow-color) var(--vibes-glass-shadow-strength),
+			transparent
+		);
+	box-shadow: var(--vibes-glass-outer-shadow);
+}
+
+.vibes-glass-surface[data-glass-elevation='none'] {
+	--vibes-glass-outer-shadow: 0 0 transparent;
+}
+
+.vibes-glass-surface[data-glass-elevation='subtle'] {
+	--vibes-glass-outer-shadow: 0 12px 24px -6px
+		color-mix(in oklab, var(--foreground) 6%, transparent);
+}
+
+.vibes-glass-surface[data-glass-elevation='raised'] {
+	--vibes-glass-outer-shadow:
+		0 24px 48px -12px color-mix(in oklab, var(--foreground) 8%, transparent),
+		0 0 0 1px color-mix(in oklab, var(--primary) 6%, transparent);
+}
+
+.vibes-glass-surface[data-glass-interactive='true'] {
+	transition:
+		transform var(--motion-response, 100ms) var(--ease-arrive, ease-out),
+		background-color var(--motion-response, 100ms) var(--ease-settle, ease),
+		border-color var(--motion-response, 100ms) var(--ease-settle, ease),
+		box-shadow var(--motion-response, 100ms) var(--ease-settle, ease);
+}
+
+@media (hover: hover) and (pointer: fine) {
+	.vibes-glass-surface[data-glass-interactive='true']:hover {
+		transform: translateY(var(--vibes-glass-hover-lift));
+		--vibes-glass-highlight-strength: 21%;
+		--vibes-glass-edge-strength: 20%;
+	}
+}
+
+.vibes-glass-compositor {
+	position: absolute;
+	inset: 0;
+	z-index: -1;
+	overflow: hidden;
+	border-radius: inherit;
+	pointer-events: none;
+	contain: strict;
+}
+
+.vibes-glass-compositor canvas {
+	display: block;
+	width: 100%;
+	height: 100%;
+	opacity: var(--vibes-glass-caustic-opacity);
+	mix-blend-mode: screen;
+}
+
+.vibes-glass-compositor[data-glass-renderer='css'] canvas,
+.vibes-glass-surface[data-glass-fidelity='simple'] > .vibes-glass-compositor canvas {
+	display: none;
+}
+
+.vibes-glass-surface[data-glass-fidelity='simple'] {
+	background: color-mix(
+		in oklab,
+		var(--vibes-glass-fill-color) 96%,
+		var(--background, oklch(0.14 0 0))
+	);
+	border-color: color-mix(in oklab, var(--vibes-glass-edge-color) 16%, transparent);
+	-webkit-backdrop-filter: none;
+	backdrop-filter: none;
+	box-shadow: 0 6px 20px color-mix(in oklab, var(--vibes-glass-shadow-color) 12%, transparent);
+}
+
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+	.vibes-glass-surface {
+		background: color-mix(
+			in oklab,
+			var(--vibes-glass-fill-color) 94%,
+			var(--background, oklch(0.14 0 0))
+		);
+		box-shadow: 0 8px 24px color-mix(in oklab, var(--vibes-glass-shadow-color) 14%, transparent);
+	}
+
+	.vibes-glass-compositor {
+		display: none;
+	}
+}
+
+@media (prefers-reduced-transparency: reduce), (update: slow) {
+	.vibes-glass-surface {
+		background: color-mix(
+			in oklab,
+			var(--vibes-glass-fill-color) 96%,
+			var(--background, oklch(0.14 0 0))
+		);
+		-webkit-backdrop-filter: none;
+		backdrop-filter: none;
+		box-shadow: 0 6px 20px color-mix(in oklab, var(--vibes-glass-shadow-color) 12%, transparent);
+	}
+
+	.vibes-glass-compositor {
+		display: none;
+	}
+}
+
+:where([data-vibes-motion='reduced'], [data-vibes-motion='off']) .vibes-glass-compositor {
+	display: none;
+}
+
+:where([data-vibes-motion='reduced'], [data-vibes-motion='off'])
+	.vibes-glass-surface[data-glass-interactive='true'] {
+	transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.vibes-glass-surface[data-glass-interactive='true'] {
+		transform: none;
+	}
+
+	.vibes-glass-compositor {
+		display: none;
+	}
+}
+
+@media (forced-colors: active) {
+	.vibes-glass-surface,
+	.vibes-glass-surface[data-glass-fidelity] {
+		background: Canvas;
+		color: CanvasText;
+		border-color: CanvasText;
+		-webkit-backdrop-filter: none;
+		backdrop-filter: none;
+		box-shadow: none;
+	}
+
+	.vibes-glass-compositor {
+		display: none;
+	}
+}
+
+@media print {
+	.vibes-glass-surface {
+		background: white;
+		color: black;
+		-webkit-backdrop-filter: none;
+		backdrop-filter: none;
+		box-shadow: none;
+	}
+
+	.vibes-glass-compositor {
+		display: none;
+	}
+}

package/dist/lib/styles/motion-tokens.css

@@ -0,0 +1,211 @@
+/**
+ * Semantic motion tokens — the reachable half of the motion system.
+ *
+ * This file is imported by `styles.css`, so every consumer of
+ * `@vibesdotdev/kit/styles.css` resolves `--motion-*` / `--ease-*` and gets a
+ * working `[data-vibes-motion]` cascade. It deliberately contains ONLY custom
+ * properties, state blocks, and keyframes.
+ *
+ * The utility CLASSES (`.animate-*`, `.transition-*`) live in `animations.css`
+ * and are NOT imported here on purpose: four of them (`.animate-pulse`,
+ * `.animate-spin`, `.transition-colors`, `.transition-all`) collide with real
+ * Tailwind v4 utilities. Kit styles load after `@import 'tailwindcss'`, so
+ * shipping them globally would override Tailwind's own definitions and break
+ * `transition-colors`/`transition-all` composed with `duration-*` / `ease-*`
+ * across every app. Apps that want the utility classes import
+ * `@vibesdotdev/kit/styles/animations.css` explicitly.
+ *
+ * Behavioural proof that these tokens actually reach a consumer lives in
+ * `components/a11y/motion-tokens.svelte.test.ts` — a real-browser computed-style
+ * test. `components/a11y/animations.test.ts` is an authoring-style lint and
+ * proves nothing about reachability.
+ */
+
+:root {
+	/* Semantic motion budgets. Exact values remain product hypotheses. */
+	--motion-response: 100ms;
+	--motion-orient: 220ms;
+	--motion-spatial: 320ms;
+	--motion-trace-life: 1200ms;
+	--motion-distance-near: 4px;
+	--motion-distance-far: 16px;
+	--ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
+	--ease-settle: cubic-bezier(0.4, 0, 0.2, 1);
+
+	/* Duration tokens */
+	--transition-instant: 0ms;
+	--transition-fast: 150ms;
+	--transition-normal: 250ms;
+	--transition-slow: 350ms;
+	--transition-slower: 500ms;
+
+	/* Easing functions. Values match Tailwind v4's theme defaults by design —
+	 * do not diverge, or `ease-out` means two things depending on the author. */
+	--ease-linear: linear;
+	--ease-in: cubic-bezier(0.4, 0, 1, 1);
+	--ease-out: cubic-bezier(0, 0, 0.2, 1);
+	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+	/* Common animation combinations */
+	--animate-fade: opacity var(--transition-normal) var(--ease-in-out);
+	--animate-fade-fast: opacity var(--transition-fast) var(--ease-out);
+	--animate-scale: transform var(--transition-normal) var(--ease-spring);
+	--animate-slide-up: transform var(--transition-normal) var(--ease-out);
+	--animate-slide-down: transform var(--transition-normal) var(--ease-in-out);
+	--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	--animate-spin: spin 1s linear infinite;
+}
+
+/*
+ * Live application preference. Do not blanket-rewrite animation duration on
+ * every descendant: completed Svelte/WAAPI transitions can retain fill-state,
+ * and changing their duration later may rewind them into a hidden keyframe.
+ * Semantic tokens plus known utility suppression preserve the static frame.
+ */
+[data-vibes-motion='reduced'] {
+	--motion-response: 80ms;
+	--motion-orient: 0ms;
+	--motion-spatial: 0ms;
+	--motion-trace-life: 0ms;
+	--motion-distance-near: 0px;
+	--motion-distance-far: 0px;
+	--transition-fast: 80ms;
+	--transition-normal: 100ms;
+	--transition-slow: 100ms;
+	--transition-slower: 100ms;
+	scroll-behavior: auto;
+}
+
+[data-vibes-motion='off'] {
+	--motion-response: 0ms;
+	--motion-orient: 0ms;
+	--motion-spatial: 0ms;
+	--motion-trace-life: 0ms;
+	--motion-distance-near: 0px;
+	--motion-distance-far: 0px;
+	--transition-fast: 0ms;
+	--transition-normal: 0ms;
+	--transition-slow: 0ms;
+	--transition-slower: 0ms;
+	scroll-behavior: auto;
+}
+
+:where([data-vibes-motion='reduced'], [data-vibes-motion='off'])
+	:where(
+		.animate-fade,
+		.animate-fade-out,
+		.animate-slide-up,
+		.animate-slide-down,
+		.animate-scale-in,
+		.animate-pulse,
+		.animate-spin
+	) {
+	animation: none !important;
+}
+
+/* Off is categorical: remove authored CSS/WAAPI transition hooks without
+ * rewriting duration on completed fill-state animations. The static cascade
+ * remains intact, while cursors, component transitions, and stray loops stop. */
+[data-vibes-motion='off'],
+[data-vibes-motion='off'] *,
+[data-vibes-motion='off'] *::before,
+[data-vibes-motion='off'] *::after {
+	animation: none !important;
+	transition: none !important;
+	scroll-behavior: auto !important;
+}
+
+/* Animation keyframes */
+@keyframes pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes fadeOut {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes slideUp {
+	from {
+		transform: translateY(10px);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes slideDown {
+	from {
+		transform: translateY(-10px);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@keyframes scaleIn {
+	from {
+		transform: scale(0.95);
+		opacity: 0;
+	}
+	to {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+/* The device request is a floor, not the whole preference: an explicit
+ * `[data-vibes-motion]` on a descendant root still narrows further. */
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--motion-response: 80ms;
+		--motion-orient: 0ms;
+		--motion-spatial: 0ms;
+		--motion-trace-life: 0ms;
+		--motion-distance-near: 0px;
+		--motion-distance-far: 0px;
+	}
+
+	.animate-fade,
+	.animate-fade-out,
+	.animate-slide-up,
+	.animate-slide-down,
+	.animate-scale-in,
+	.animate-pulse,
+	.animate-spin {
+		animation: none !important;
+	}
+}

package/dist/lib/styles/system-mode-css.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Only an unresolved system preference may follow the operating-system mode.
+ * Any server-resolved data attribute or explicit mode class opts out.
+ */
+export declare const SYSTEM_MODE_DARK_SELECTOR = ":root:not([data-mode]):not(.light):not(.dark)";
+/**
+ * Add a system-dark variable fallback to trusted theme CSS that already owns a
+ * top-level `.dark { ... }` variable block. This keeps account-served preset
+ * and custom themes correct before hydration when inline scripts are disabled.
+ */
+export declare function appendSystemModeDarkFallback(css: string): string;

package/dist/lib/styles/system-mode-css.js

@@ -0,0 +1,36 @@
+/**
+ * Only an unresolved system preference may follow the operating-system mode.
+ * Any server-resolved data attribute or explicit mode class opts out.
+ */
+export const SYSTEM_MODE_DARK_SELECTOR = ':root:not([data-mode]):not(.light):not(.dark)';
+/**
+ * Add a system-dark variable fallback to trusted theme CSS that already owns a
+ * top-level `.dark { ... }` variable block. This keeps account-served preset
+ * and custom themes correct before hydration when inline scripts are disabled.
+ */
+export function appendSystemModeDarkFallback(css) {
+    if (css.includes(`${SYSTEM_MODE_DARK_SELECTOR} {`))
+        return css;
+    const openingMatch = /(?:^|\n)\.dark\s*\{/m.exec(css);
+    if (!openingMatch)
+        return css;
+    const openBrace = css.indexOf('{', openingMatch.index);
+    let depth = 1;
+    let cursor = openBrace + 1;
+    for (; cursor < css.length && depth > 0; cursor += 1) {
+        if (css[cursor] === '{')
+            depth += 1;
+        if (css[cursor] === '}')
+            depth -= 1;
+    }
+    if (depth !== 0)
+        return css;
+    const darkDeclarations = css.slice(openBrace + 1, cursor - 1).trim();
+    if (!darkDeclarations)
+        return css;
+    const indented = darkDeclarations
+        .split('\n')
+        .map((line) => `\t\t${line.trimStart()}`)
+        .join('\n');
+    return `${css.trimEnd()}\n\n@media (prefers-color-scheme: dark) {\n\t${SYSTEM_MODE_DARK_SELECTOR} {\n${indented}\n\t}\n}\n`;
+}

package/dist/lib/styles/themes/amber.css

@@ -0,0 +1,82 @@
+/* Amber - Warm amber atmosphere with crisp readable text tones */
+:root {
+	--radius: 0.625rem;
+	--background: #fffaf0;
+	--foreground: #4a2c0b;
+	--card: #ffecc8;
+	--card-foreground: #4a2c0b;
+	--popover: #ffecc8;
+	--popover-foreground: #4a2c0b;
+	--primary: #b45309;
+	--primary-foreground: #fff6e8;
+	--secondary: #ffecc8;
+	--secondary-foreground: #7c3f0a;
+	--muted: #fff1d6;
+	--muted-foreground: #7c5a2a;
+	--accent: #ffe0a8;
+	--accent-foreground: #7c3f0a;
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.92 0.004 286.32);
+	--input: oklch(0.92 0.004 286.32);
+	--ring: #f59e0b;
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: #fffaf0;
+	--sidebar-foreground: #4a2c0b;
+	--sidebar-primary: #b45309;
+	--sidebar-primary-foreground: #fff6e8;
+	--sidebar-accent: #ffe0a8;
+	--sidebar-accent-foreground: #7c3f0a;
+	--sidebar-border: oklch(0.92 0.004 286.32);
+	--sidebar-ring: oklch(0.705 0.015 286.067);
+	--brand: var(--primary);
+	--brand-fill: var(--brand);
+	--brand-foreground: var(--primary-foreground);
+}
+
+.dark {
+	--background: #2a1a05;
+	--foreground: #ffe8be;
+	--card: #5a390d;
+	--card-foreground: #ffe8be;
+	--popover: #5a390d;
+	--popover-foreground: #ffe8be;
+	--primary: #fbbf24;
+	--primary-foreground: #4a2a06;
+	--secondary: #6b450f;
+	--secondary-foreground: #ffe8be;
+	--muted: #6b450f;
+	--muted-foreground: #f5c971;
+	--accent: #915e12;
+	--accent-foreground: #fff0cc;
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: #fbbf24;
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: #2a1a05;
+	--sidebar-foreground: #ffe8be;
+	--sidebar-primary: #fbbf24;
+	--sidebar-primary-foreground: #4a2a06;
+	--sidebar-accent: #915e12;
+	--sidebar-accent-foreground: #fff0cc;
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.552 0.016 285.938);
+	--brand: var(--primary);
+	--brand-fill: var(--brand);
+	--brand-foreground: var(--primary-foreground);
+}
+
+.bg-card {
+	background-image: linear-gradient(135deg, #ffffff 0%, #ffecc8 100%);
+}
+.dark .bg-card {
+	background-image: linear-gradient(135deg, #3a2408 0%, #5a390d 100%);
+}

package/dist/lib/styles/themes/blue.css

@@ -0,0 +1,82 @@
+/* Blue - Rich blue tones with cool, high-contrast surfaces */
+:root {
+	--radius: 0.625rem;
+	--background: #f5f8ff;
+	--foreground: #132a4a;
+	--card: #e8f0ff;
+	--card-foreground: #102445;
+	--popover: #e8f0ff;
+	--popover-foreground: #102445;
+	--primary: #1d4ed8;
+	--primary-foreground: #eef4ff;
+	--secondary: #e8f0ff;
+	--secondary-foreground: #173572;
+	--muted: #edf3ff;
+	--muted-foreground: #425a80;
+	--accent: #dbe7ff;
+	--accent-foreground: #173572;
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.92 0.004 286.32);
+	--input: oklch(0.92 0.004 286.32);
+	--ring: #3b82f6;
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: #f5f8ff;
+	--sidebar-foreground: #132a4a;
+	--sidebar-primary: #1d4ed8;
+	--sidebar-primary-foreground: #eef4ff;
+	--sidebar-accent: #dbe7ff;
+	--sidebar-accent-foreground: #173572;
+	--sidebar-border: oklch(0.92 0.004 286.32);
+	--sidebar-ring: oklch(0.705 0.015 286.067);
+	--brand: var(--primary);
+	--brand-fill: var(--brand);
+	--brand-foreground: var(--primary-foreground);
+}
+
+.dark {
+	--background: #0b1730;
+	--foreground: #dde8ff;
+	--card: #132a55;
+	--card-foreground: #e2ebff;
+	--popover: #132a55;
+	--popover-foreground: #e2ebff;
+	--primary: #93c5fd;
+	--primary-foreground: #11274d;
+	--secondary: #19325f;
+	--secondary-foreground: #dce8ff;
+	--muted: #19325f;
+	--muted-foreground: #9bb8ea;
+	--accent: #21448a;
+	--accent-foreground: #e2ebff;
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: #60a5fa;
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: #0b1730;
+	--sidebar-foreground: #dde8ff;
+	--sidebar-primary: #93c5fd;
+	--sidebar-primary-foreground: #11274d;
+	--sidebar-accent: #21448a;
+	--sidebar-accent-foreground: #e2ebff;
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.552 0.016 285.938);
+	--brand: var(--primary);
+	--brand-fill: var(--brand);
+	--brand-foreground: var(--primary-foreground);
+}
+
+.bg-card {
+	background-image: linear-gradient(135deg, #ffffff 0%, #e8f0ff 100%);
+}
+.dark .bg-card {
+	background-image: linear-gradient(135deg, #0f1f3f 0%, #132a55 100%);
+}