@etus/bhono-app 0.1.1

package/templates/base/src/client/index.css

@@ -0,0 +1,881 @@
+@import "tailwindcss";
+
+/* ========================================
+   Seven Design System - Light Theme
+   ======================================== */
+
+@theme {
+  /* --- Semantic Colors (Light) --- */
+  --color-background: oklch(100% 0 0);
+  --color-foreground: oklch(20.79% 0.0424 265.75);
+
+  --color-card: oklch(100% 0 0);
+  --color-card-foreground: oklch(20.79% 0.0424 265.75);
+
+  --color-popover: oklch(100% 0 0);
+  --color-popover-foreground: oklch(20.79% 0.0424 265.75);
+
+  /* Primary - Vibrant Green */
+  --color-primary: oklch(81.06% 0.2032 150.12);
+  --color-primary-foreground: oklch(20.79% 0.0424 265.75);
+
+  --color-secondary: oklch(96.83% 0 0);
+  --color-secondary-foreground: oklch(20.79% 0.0424 265.75);
+
+  --color-muted: oklch(96.83% 0 0);
+  --color-muted-foreground: oklch(55.55% 0.0234 264.36);
+
+  --color-accent: oklch(96.83% 0 0);
+  --color-accent-foreground: oklch(20.79% 0.0424 265.75);
+
+  --color-destructive: oklch(62.8% 0.2577 29.23);
+  --color-destructive-foreground: oklch(100% 0 0);
+
+  --color-border: oklch(92.2% 0 0);
+  --color-input: oklch(92.2% 0 0);
+  --color-ring: oklch(81.06% 0.2032 150.12);
+
+  /* Sidebar */
+  --color-sidebar: oklch(98.51% 0 0);
+  --color-sidebar-foreground: oklch(20.79% 0.0424 265.75);
+  --color-sidebar-border: oklch(92.2% 0 0);
+  --color-sidebar-accent: oklch(96.83% 0 0);
+  --color-sidebar-accent-foreground: oklch(20.79% 0.0424 265.75);
+
+  /* --- Status Colors --- */
+  --color-success: oklch(81.06% 0.2032 150.12);
+  --color-success-foreground: oklch(20.79% 0.0424 265.75);
+  --color-success-solid: oklch(81.06% 0.2032 150.12);
+  --color-success-solid-foreground: oklch(100% 0 0);
+
+  --color-error: oklch(62.8% 0.2577 29.23);
+  --color-error-foreground: oklch(100% 0 0);
+  --color-error-solid: oklch(62.8% 0.2577 29.23);
+  --color-error-solid-foreground: oklch(100% 0 0);
+
+  --color-warning: oklch(79.88% 0.1702 70.08);
+  --color-warning-foreground: oklch(20.79% 0.0424 265.75);
+  --color-warning-solid: oklch(79.88% 0.1702 70.08);
+  --color-warning-solid-foreground: oklch(20.79% 0.0424 265.75);
+
+  --color-info: oklch(61.19% 0.1963 255.1);
+  --color-info-foreground: oklch(100% 0 0);
+  --color-info-solid: oklch(61.19% 0.1963 255.1);
+  --color-info-solid-foreground: oklch(100% 0 0);
+
+  /* --- Green Palette (Primary) --- */
+  --color-green-50: oklch(97.78% 0.0219 153.08);
+  --color-green-100: oklch(94.42% 0.0639 151.07);
+  --color-green-200: oklch(89.76% 0.1134 150.7);
+  --color-green-300: oklch(83.6% 0.1697 150.26);
+  --color-green-400: oklch(81.06% 0.2032 150.12);
+  --color-green-500: oklch(72.27% 0.1939 149.58);
+  --color-green-600: oklch(59.49% 0.1623 148.36);
+  --color-green-700: oklch(48.24% 0.1293 148.23);
+  --color-green-800: oklch(40.42% 0.1025 149.21);
+  --color-green-900: oklch(35.66% 0.0827 151.04);
+  --color-green-950: oklch(22.73% 0.0553 152.1);
+
+  /* --- Blue Palette --- */
+  --color-blue-50: oklch(97.05% 0.0139 236.62);
+  --color-blue-100: oklch(93.22% 0.032 254.6);
+  --color-blue-200: oklch(88.25% 0.0599 252.3);
+  --color-blue-300: oklch(80.93% 0.1054 251.81);
+  --color-blue-400: oklch(71.4% 0.1527 248.66);
+  --color-blue-500: oklch(61.19% 0.1963 255.1);
+  --color-blue-600: oklch(54.62% 0.2148 262.88);
+  --color-blue-700: oklch(48.82% 0.2171 264.38);
+  --color-blue-800: oklch(42.44% 0.1776 265.64);
+  --color-blue-900: oklch(37.91% 0.1383 265.52);
+  --color-blue-950: oklch(28.24% 0.0913 267.94);
+
+  /* --- Gray Palette --- */
+  --color-gray-50: oklch(98.51% 0 0);
+  --color-gray-100: oklch(96.83% 0 0);
+  --color-gray-200: oklch(92.2% 0 0);
+  --color-gray-300: oklch(87.17% 0 0);
+  --color-gray-400: oklch(70.7% 0 0);
+  --color-gray-500: oklch(55.55% 0.0234 264.36);
+  --color-gray-600: oklch(44.62% 0.0303 265.75);
+  --color-gray-700: oklch(37.18% 0.0275 265.75);
+  --color-gray-800: oklch(27.81% 0.0275 265.75);
+  --color-gray-900: oklch(20.79% 0.0424 265.75);
+  --color-gray-950: oklch(12.94% 0.0219 264.7);
+
+  /* --- Red Palette --- */
+  --color-red-50: oklch(97.05% 0.013 17.38);
+  --color-red-100: oklch(93.58% 0.0294 17.72);
+  --color-red-200: oklch(88.61% 0.0605 18.33);
+  --color-red-300: oklch(80.79% 0.1108 19.57);
+  --color-red-400: oklch(70.44% 0.1912 22.21);
+  --color-red-500: oklch(62.8% 0.2577 29.23);
+  --color-red-600: oklch(57.71% 0.2449 27.33);
+  --color-red-700: oklch(50.54% 0.2059 27.52);
+  --color-red-800: oklch(44.38% 0.1715 26.9);
+  --color-red-900: oklch(39.59% 0.1407 25.72);
+  --color-red-950: oklch(25.82% 0.0913 26.04);
+
+  /* --- Yellow Palette --- */
+  --color-yellow-50: oklch(98.69% 0.0294 102.85);
+  --color-yellow-100: oklch(97.35% 0.0769 103.19);
+  --color-yellow-200: oklch(94.49% 0.1297 99.39);
+  --color-yellow-300: oklch(90.54% 0.1638 91.39);
+  --color-yellow-400: oklch(85.2% 0.1702 84.43);
+  --color-yellow-500: oklch(79.88% 0.1702 70.08);
+  --color-yellow-600: oklch(66.59% 0.1587 52.25);
+  --color-yellow-700: oklch(55.47% 0.1424 47.09);
+  --color-yellow-800: oklch(47.64% 0.1211 46.2);
+  --color-yellow-900: oklch(42.16% 0.1036 47.45);
+  --color-yellow-950: oklch(28.6% 0.0719 48.72);
+
+  /* --- Pink Palette --- */
+  --color-pink-50: oklch(97.05% 0.0155 343.23);
+  --color-pink-100: oklch(94.05% 0.0326 343.23);
+  --color-pink-200: oklch(89.76% 0.0613 343.23);
+  --color-pink-300: oklch(82.33% 0.1108 343.23);
+  --color-pink-400: oklch(71.4% 0.1912 343.23);
+  --color-pink-500: oklch(65.64% 0.2196 354.31);
+  --color-pink-600: oklch(59.13% 0.2268 0.19);
+  --color-pink-700: oklch(52.55% 0.2059 1.26);
+  --color-pink-800: oklch(45.47% 0.1697 359.77);
+  --color-pink-900: oklch(40.42% 0.1407 358.28);
+  --color-pink-950: oklch(27.09% 0.0981 356.03);
+
+  /* --- Main-1 Palette --- */
+  --color-main1-50: oklch(96.68% 0.0164 237.45);
+  --color-main1-100: oklch(93.95% 0.0314 238.02);
+  --color-main1-200: oklch(89.4% 0.0555 236.93);
+  --color-main1-300: oklch(82.7% 0.0913 239.23);
+  --color-main1-400: oklch(74.7% 0.1211 236.02);
+  --color-main1-500: oklch(63.87% 0.1424 239.23);
+  --color-main1-600: oklch(54.26% 0.137 241.31);
+  --color-main1-700: oklch(47.27% 0.1163 240.99);
+  --color-main1-800: oklch(40.42% 0.0949 241.31);
+  --color-main1-900: oklch(35.66% 0.0769 243.07);
+  --color-main1-950: oklch(26.36% 0.0555 246.77);
+
+  /* --- Main-2 Palette --- */
+  --color-main2-50: oklch(96.68% 0.0196 246.77);
+  --color-main2-100: oklch(93.58% 0.0408 248.66);
+  --color-main2-200: oklch(88.61% 0.0739 247.97);
+  --color-main2-300: oklch(80.93% 0.1211 249.74);
+  --color-main2-400: oklch(71.4% 0.1638 251.81);
+  --color-main2-500: oklch(59.85% 0.1912 256.27);
+  --color-main2-600: oklch(50.17% 0.1912 260.73);
+  --color-main2-700: oklch(43.52% 0.1702 262.04);
+  --color-main2-800: oklch(37.91% 0.1407 263.36);
+  --color-main2-900: oklch(33.43% 0.1163 265.04);
+  --color-main2-950: oklch(25.1% 0.0827 267.35);
+
+  /* --- Border Radius --- */
+  --radius-xs: 0.0625rem;
+  --radius-sm: 0.125rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 0.875rem;
+  --radius-full: 9999px;
+
+  /* --- Typography --- */
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --font-serif: "Georgia", Cambria, "Times New Roman", Times, serif;
+
+  /* --- Container --- */
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+
+  /* --- Shadows --- */
+  --shadow-xs: 0px 1px 2px 0px oklch(0% 0 0 / 0.05);
+  --shadow-sm: 0px 1px 3px 0px oklch(0% 0 0 / 0.1), 0px 1px 2px -1px oklch(0% 0 0 / 0.1);
+  --shadow-md: 0px 4px 6px -1px oklch(0% 0 0 / 0.1), 0px 2px 4px -2px oklch(0% 0 0 / 0.1);
+  --shadow-lg: 0px 10px 15px -3px oklch(0% 0 0 / 0.1), 0px 4px 6px -4px oklch(0% 0 0 / 0.1);
+  --shadow-xl: 0px 20px 25px -5px oklch(0% 0 0 / 0.1), 0px 8px 10px -6px oklch(0% 0 0 / 0.1);
+  --shadow-2xl: 0px 25px 50px -12px oklch(0% 0 0 / 0.25);
+  --shadow-inner: inset 0px 2px 4px 0px oklch(0% 0 0 / 0.05);
+
+  /* --- Blur --- */
+  --blur-xs: 4px;
+  --blur-sm: 8px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+
+  /* --- Animations --- */
+  --animate-duration-fast: 150ms;
+  --animate-duration-normal: 300ms;
+  --animate-duration-slow: 500ms;
+  --animate-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --animate-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* --- Spacing System (4px base) --- */
+  --spacing-page: 2rem;           /* 32px - page container vertical rhythm */
+  --spacing-section: 1.5rem;      /* 24px - between sections */
+  --spacing-group: 1rem;          /* 16px - between related elements */
+  --spacing-element: 0.75rem;     /* 12px - tight element spacing */
+  --spacing-tight: 0.5rem;        /* 8px - micro spacing */
+  --spacing-xs: 0.25rem;          /* 4px - minimal spacing */
+
+  /* --- Layout Spacing --- */
+  --layout-padding: 2rem;         /* 32px - main content padding */
+  --layout-gap: 1.5rem;           /* 24px - layout grid gaps */
+  --card-padding: 1.5rem;         /* 24px - card internal padding */
+  --card-padding-compact: 1rem;   /* 16px - compact card padding */
+
+  /* --- Breakpoints --- */
+  --breakpoint-sm: 40rem;         /* 640px - mobile landscape */
+  --breakpoint-md: 48rem;         /* 768px - tablets */
+  --breakpoint-lg: 64rem;         /* 1024px - desktop */
+  --breakpoint-xl: 80rem;         /* 1280px - large desktop */
+  --breakpoint-2xl: 96rem;        /* 1536px - wide screens */
+
+  /* --- Typography Scale (Major Third - 1.25) --- */
+  --text-xs: 0.75rem;             /* 12px */
+  --text-sm: 0.875rem;            /* 14px */
+  --text-base: 1rem;              /* 16px */
+  --text-lg: 1.125rem;            /* 18px */
+  --text-xl: 1.25rem;             /* 20px */
+  --text-2xl: 1.5rem;             /* 24px */
+  --text-3xl: 1.875rem;           /* 30px */
+  --text-4xl: 2.25rem;            /* 36px */
+  --text-5xl: 3rem;               /* 48px */
+
+  /* --- Line Heights --- */
+  --leading-none: 1;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+
+  /* --- Font Weights --- */
+  --font-thin: 100;
+  --font-light: 300;
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --font-extrabold: 800;
+
+  /* --- Grid System --- */
+  --grid-gap-xs: 0.5rem;          /* 8px - tight grid */
+  --grid-gap-sm: 0.75rem;         /* 12px - compact grid */
+  --grid-gap-md: 1rem;            /* 16px - default grid (gap-4) */
+  --grid-gap-lg: 1.5rem;          /* 24px - spacious grid (gap-6) */
+  --grid-gap-xl: 2rem;            /* 32px - loose grid (gap-8) */
+
+  /* --- Content Width --- */
+  --content-width: 80rem;         /* 1280px - main content max-width */
+  --content-narrow: 42rem;        /* 672px - narrow content (prose) */
+  --content-wide: 96rem;          /* 1536px - wide content */
+}
+
+/* ========================================
+   Color Scheme for Native Elements
+   ======================================== */
+
+:root {
+  color-scheme: light;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+/* ========================================
+   Dark Mode Theme
+   ======================================== */
+
+.dark {
+  /* --- Semantic Colors (Dark) --- */
+  --color-background: oklch(12.94% 0.0219 264.7);
+  --color-foreground: oklch(98.51% 0 0);
+
+  --color-card: oklch(16.93% 0.0275 265.75);
+  --color-card-foreground: oklch(98.51% 0 0);
+
+  --color-popover: oklch(16.93% 0.0275 265.75);
+  --color-popover-foreground: oklch(98.51% 0 0);
+
+  /* Primary - Vibrant Green */
+  --color-primary: oklch(81.06% 0.2032 150.12);
+  --color-primary-foreground: oklch(12.94% 0.0219 264.7);
+
+  --color-secondary: oklch(27.81% 0.0275 265.75);
+  --color-secondary-foreground: oklch(98.51% 0 0);
+
+  --color-muted: oklch(27.81% 0.0275 265.75);
+  --color-muted-foreground: oklch(70.7% 0 0);
+
+  --color-accent: oklch(27.81% 0.0275 265.75);
+  --color-accent-foreground: oklch(98.51% 0 0);
+
+  --color-destructive: oklch(62.8% 0.2577 29.23);
+  --color-destructive-foreground: oklch(100% 0 0);
+
+  --color-border: oklch(27.81% 0.0275 265.75);
+  --color-input: oklch(27.81% 0.0275 265.75);
+  --color-ring: oklch(81.06% 0.2032 150.12);
+
+  /* Sidebar */
+  --color-sidebar: oklch(10.94% 0.0175 264.7);
+  --color-sidebar-foreground: oklch(98.51% 0 0);
+  --color-sidebar-border: oklch(20.79% 0.0424 265.75);
+  --color-sidebar-accent: oklch(20.79% 0.0424 265.75);
+  --color-sidebar-accent-foreground: oklch(98.51% 0 0);
+
+  /* --- Status Colors (Dark) --- */
+  --color-success: oklch(72.27% 0.1939 149.58);
+  --color-success-foreground: oklch(12.94% 0.0219 264.7);
+  --color-success-solid: oklch(72.27% 0.1939 149.58);
+  --color-success-solid-foreground: oklch(12.94% 0.0219 264.7);
+
+  --color-error: oklch(70.44% 0.1912 22.21);
+  --color-error-foreground: oklch(12.94% 0.0219 264.7);
+  --color-error-solid: oklch(70.44% 0.1912 22.21);
+  --color-error-solid-foreground: oklch(12.94% 0.0219 264.7);
+
+  --color-warning: oklch(85.2% 0.1702 84.43);
+  --color-warning-foreground: oklch(12.94% 0.0219 264.7);
+  --color-warning-solid: oklch(85.2% 0.1702 84.43);
+  --color-warning-solid-foreground: oklch(12.94% 0.0219 264.7);
+
+  --color-info: oklch(71.4% 0.1527 248.66);
+  --color-info-foreground: oklch(12.94% 0.0219 264.7);
+  --color-info-solid: oklch(71.4% 0.1527 248.66);
+  --color-info-solid-foreground: oklch(12.94% 0.0219 264.7);
+}
+
+/* ========================================
+   Base Styles
+   ======================================== */
+
+* {
+  border-color: var(--color-border);
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-feature-settings: "rlig" 1, "calt" 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ========================================
+   Animations & Keyframes
+   ======================================== */
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes slide-in-from-top {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slide-in-from-bottom {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slide-in-from-left {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slide-in-from-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes scale-in {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes scale-out {
+  from { transform: scale(1); opacity: 1; }
+  to { transform: scale(0.95); opacity: 0; }
+}
+
+@keyframes bounce-in {
+  0% { transform: scale(0.3); opacity: 0; }
+  50% { transform: scale(1.05); }
+  70% { transform: scale(0.9); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes pulse-soft {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+/* Animation utility classes */
+@utility animate-fade-in {
+  animation: fade-in var(--animate-duration-normal) var(--animate-ease-out);
+}
+
+@utility animate-fade-out {
+  animation: fade-out var(--animate-duration-normal) var(--animate-ease-out);
+}
+
+@utility animate-scale-in {
+  animation: scale-in var(--animate-duration-normal) var(--animate-ease-out);
+}
+
+@utility animate-scale-out {
+  animation: scale-out var(--animate-duration-normal) var(--animate-ease-out);
+}
+
+@utility animate-bounce-in {
+  animation: bounce-in var(--animate-duration-slow) var(--animate-spring);
+}
+
+@utility animate-pulse-soft {
+  animation: pulse-soft 2s ease-in-out infinite;
+}
+
+@utility animate-shimmer {
+  background: linear-gradient(
+    90deg in oklch,
+    var(--color-muted) 25%,
+    var(--color-accent) 50%,
+    var(--color-muted) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@utility animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+@utility animate-accordion-down {
+  animation: accordion-down var(--animate-duration-normal) var(--animate-ease-out);
+}
+
+@utility animate-accordion-up {
+  animation: accordion-up var(--animate-duration-normal) var(--animate-ease-out);
+}
+
+/* ========================================
+   Transition Utilities
+   ======================================== */
+
+@utility transition-fast {
+  transition-duration: var(--animate-duration-fast);
+  transition-timing-function: var(--animate-ease-out);
+}
+
+@utility transition-normal {
+  transition-duration: var(--animate-duration-normal);
+  transition-timing-function: var(--animate-ease-out);
+}
+
+@utility transition-slow {
+  transition-duration: var(--animate-duration-slow);
+  transition-timing-function: var(--animate-ease-out);
+}
+
+@utility transition-spring {
+  transition-duration: var(--animate-duration-normal);
+  transition-timing-function: var(--animate-spring);
+}
+
+/* ========================================
+   Interactive States
+   ======================================== */
+
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  /* Default smooth transitions for interactive elements */
+  button,
+  a,
+  input,
+  textarea,
+  select,
+  [role="button"] {
+    transition: all var(--animate-duration-fast) var(--animate-ease-out);
+  }
+}
+
+/* Focus styles with primary color */
+:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+/* Selection with primary color */
+::selection {
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+}
+
+/* ========================================
+   Scrollbar Styling
+   ======================================== */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-muted);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-gray-400);
+  border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-gray-500);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: var(--color-gray-600);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: var(--color-gray-500);
+}
+
+/* ========================================
+   Loading & Skeleton States
+   ======================================== */
+
+@utility skeleton {
+  background: linear-gradient(
+    90deg in oklch,
+    var(--color-muted) 25%,
+    var(--color-gray-200) 50%,
+    var(--color-muted) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: var(--radius-md);
+
+  @variant dark {
+    background: linear-gradient(
+      90deg in oklch,
+      var(--color-muted) 25%,
+      var(--color-gray-700) 50%,
+      var(--color-muted) 75%
+    );
+  }
+}
+
+/* ========================================
+   Glass Effect
+   ======================================== */
+
+@utility glass {
+  background: oklch(100% 0 0 / 0.7);
+  backdrop-filter: blur(var(--blur-lg));
+  border: 1px solid oklch(100% 0 0 / 0.2);
+
+  @variant dark {
+    background: oklch(12.94% 0.0219 264.7 / 0.7);
+    border: 1px solid oklch(100% 0 0 / 0.1);
+  }
+}
+
+/* ========================================
+   Gradient Utilities
+   ======================================== */
+
+@utility gradient-primary {
+  background: linear-gradient(
+    135deg in oklch,
+    var(--color-green-400) 0%,
+    var(--color-green-500) 50%,
+    var(--color-green-600) 100%
+  );
+}
+
+@utility gradient-accent {
+  background: linear-gradient(
+    135deg in oklch,
+    var(--color-blue-400) 0%,
+    var(--color-main2-500) 50%,
+    var(--color-pink-500) 100%
+  );
+}
+
+@utility gradient-warm {
+  background: linear-gradient(
+    135deg in oklch,
+    var(--color-yellow-400) 0%,
+    var(--color-red-400) 100%
+  );
+}
+
+/* Text gradient */
+@utility text-gradient-primary {
+  background: linear-gradient(
+    135deg in oklch,
+    var(--color-green-400) 0%,
+    var(--color-green-600) 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ========================================
+   Enter Animations (@starting-style)
+   ======================================== */
+
+/* Dialog/Modal Enter Animation */
+@utility dialog-enter {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
+
+  @starting-style {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+}
+
+/* Popover Enter Animation */
+@utility popover-enter {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 150ms ease-out, transform 150ms ease-out;
+
+  @starting-style {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+/* Toast Enter Animation */
+@utility toast-enter {
+  opacity: 1;
+  transform: translateX(0);
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
+
+  @starting-style {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+/* Fade Enter Animation */
+@utility fade-enter {
+  opacity: 1;
+  transition: opacity 150ms ease-out;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+/* ========================================
+   Container Query Utilities
+   ======================================== */
+
+/* Define container contexts */
+@utility container-query {
+  container-type: inline-size;
+}
+
+@utility container-query-size {
+  container-type: size;
+}
+
+/* Named containers */
+@utility container-card {
+  container-type: inline-size;
+  container-name: card;
+}
+
+@utility container-sidebar {
+  container-type: inline-size;
+  container-name: sidebar;
+}
+
+@utility container-main {
+  container-type: inline-size;
+  container-name: main;
+}
+
+/* ========================================
+   Advanced Gradient Utilities
+   ======================================== */
+
+/* Radial gradients for highlights */
+@utility gradient-radial-primary {
+  background: radial-gradient(circle at center, var(--color-green-400) 0%, transparent 70%);
+}
+
+@utility gradient-radial-accent {
+  background: radial-gradient(circle at center, var(--color-blue-400) 0%, transparent 70%);
+}
+
+@utility gradient-radial-glow {
+  background: radial-gradient(ellipse at top, var(--color-primary) 0%, transparent 50%);
+}
+
+/* Conic gradients for spinners/progress */
+@utility gradient-conic-spinner {
+  background: conic-gradient(from 0deg, transparent 0deg, var(--color-primary) 270deg, transparent 360deg);
+}
+
+@utility gradient-conic-progress {
+  background: conic-gradient(var(--color-primary) var(--progress, 0%), var(--color-muted) 0%);
+}
+
+@utility gradient-conic-rainbow {
+  background: conic-gradient(
+    in oklch,
+    var(--color-red-500) 0deg,
+    var(--color-yellow-500) 60deg,
+    var(--color-green-500) 120deg,
+    var(--color-blue-500) 180deg,
+    var(--color-main2-500) 240deg,
+    var(--color-pink-500) 300deg,
+    var(--color-red-500) 360deg
+  );
+}
+
+/* ========================================
+   Form Field Utilities
+   ======================================== */
+
+/* Auto-resize textarea */
+@utility field-sizing-content {
+  field-sizing: content;
+  min-height: 2.5rem;
+  max-height: 20rem;
+  resize: none;
+}
+
+/* Fixed height (default behavior) */
+@utility field-sizing-fixed {
+  field-sizing: fixed;
+}
+
+/* ========================================
+   not-* Variant Usage Examples
+   ======================================== */
+
+/*
+Tailwind v4 includes the not-* variant natively.
+Use directly in your components:
+
+Examples:
+- not-hover:opacity-100    → Full opacity when NOT hovering
+- not-focus:border-muted   → Muted border when NOT focused
+- not-disabled:cursor-pointer → Pointer cursor when NOT disabled
+- not-first:border-t       → Top border on all except first
+- not-last:border-b        → Bottom border on all except last
+- not-empty:pb-4           → Padding when NOT empty
+
+Combined:
+- hover:not-disabled:bg-primary → Hover effect only when not disabled
+- focus:not-invalid:ring-primary → Focus ring only when valid
+*/
+
+/* ========================================
+   Inert State Styling
+   ======================================== */
+
+/*
+The [inert] attribute makes elements non-interactive.
+Tailwind v4 includes the inert: variant natively.
+
+Use directly:
+- inert:opacity-50
+- inert:pointer-events-none
+- inert:grayscale
+
+Below are pre-composed utilities:
+*/
+
+@utility inert-overlay {
+  &[inert], [inert] & {
+    opacity: 0.5;
+    pointer-events: none;
+    user-select: none;
+    filter: grayscale(0.3);
+  }
+}
+
+@utility inert-disabled {
+  &[inert], [inert] & {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+/* ========================================
+   in-* Variant Usage Examples
+   ======================================== */
+
+/*
+Tailwind v4 includes the in-* variant for parent state matching.
+Similar to group-* but without needing the group class.
+
+Examples:
+- in-hover:text-primary    → When ANY ancestor is hovered
+- in-focus:ring-2          → When ANY ancestor is focused
+- in-[.open]:block         → When ancestor has .open class
+- in-data-[state=open]:opacity-100 → When ancestor has data-state="open"
+
+Comparison with group-*:
+- group-hover:text-primary → Needs <div class="group"> ancestor
+- in-hover:text-primary    → Works with any hoverable ancestor
+
+Use in-* when:
+- You don't control the parent markup
+- Parent is a third-party component
+- You want implicit parent state detection
+*/