Your theme

/* * Written by `delacour theme`. * * Two layers, which is shadcn's own shape: the raw semantic names below, once * per theme, and the `@theme inline` block at the bottom that maps each onto * the `--color-*` Tailwind mints `bg-*` and `text-*` from. * * The wrapper is `@variant light` / `@variant dark` rather than `:root` and * `.dark` because that is the only form Uniwind reads as a theme. Both blocks * must declare the same names or the build fails outright. */@layer theme {	:root {		@variant light {			--background: oklch(0.985 0 0);			--foreground: oklch(0.145 0 0);			--card: oklch(1 0 0);			--card-foreground: oklch(0.145 0 0);			--popover: oklch(1 0 0);			--popover-foreground: oklch(0.145 0 0);			--primary: oklch(0.205 0 0);			--primary-foreground: oklch(0.985 0 0);			--secondary: oklch(0.97 0 0);			--secondary-foreground: oklch(0.205 0 0);			--muted: oklch(0.97 0 0);			--muted-foreground: oklch(0.556 0 0);			--accent: oklch(0.97 0 0);			--accent-foreground: oklch(0.205 0 0);			--destructive: oklch(0.577 0.245 27.325);			--destructive-foreground: oklch(0.985 0 0);			--border: oklch(0.922 0 0);			--input: oklch(0.922 0 0);			--ring: oklch(0.708 0 0);			--chart-1: oklch(0.87 0 0);			--chart-2: oklch(0.556 0 0);			--chart-3: oklch(0.439 0 0);			--chart-4: oklch(0.371 0 0);			--chart-5: oklch(0.269 0 0);			--destructive-soft: color-mix(in oklch, var(--destructive) 8%, var(--background));			--destructive-soft-foreground: color-mix(in oklch, var(--destructive) 70%, var(--foreground));			--elevated: var(--card);			--elevated-foreground: var(--foreground);			--info: oklch(0.623 0.188 259.81);			--info-foreground: oklch(0.985 0 0);			--info-soft: color-mix(in oklch, var(--info) 8%, var(--background));			--info-soft-foreground: color-mix(in oklch, var(--info) 70%, var(--foreground));			--overlay: oklch(0 0 0 / 45%);			--shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);			--shadow-2xl: 0 1px 3px 0 hsl(0 0% 0% / 0.25);			--shadow-2xs: 0 1px 3px 0 hsl(0 0% 0% / 0.05);			--shadow-lg: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);			--shadow-md: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);			--shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);			--shadow-xl: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);			--shadow-xs: 0 1px 3px 0 hsl(0 0% 0% / 0.05);			--sidebar: oklch(0.985 0 0);			--sidebar-accent: oklch(0.97 0 0);			--sidebar-accent-foreground: oklch(0.205 0 0);			--sidebar-border: oklch(0.922 0 0);			--sidebar-foreground: oklch(0.145 0 0);			--sidebar-primary: oklch(0.205 0 0);			--sidebar-primary-foreground: oklch(0.985 0 0);			--sidebar-ring: oklch(0.708 0 0);			--success: oklch(0.696 0.17 162.48);			--success-foreground: oklch(0.985 0 0);			--success-soft: color-mix(in oklch, var(--success) 8%, var(--background));			--success-soft-foreground: color-mix(in oklch, var(--success) 70%, var(--foreground));			--tertiary: color-mix(in oklch, var(--secondary) 50%, var(--background));			--tertiary-foreground: color-mix(in oklch, var(--foreground) 50%, var(--muted-foreground));			--warning: oklch(0.769 0.188 70.08);			--warning-foreground: oklch(0.216 0.006 56.043);			--warning-soft: color-mix(in oklch, var(--warning) 8%, var(--background));			--warning-soft-foreground: color-mix(in oklch, var(--warning) 70%, var(--foreground));		}		@variant dark {			--background: oklch(0.145 0 0);			--foreground: oklch(0.985 0 0);			--card: oklch(0.205 0 0);			--card-foreground: oklch(0.985 0 0);			--popover: oklch(0.205 0 0);			--popover-foreground: oklch(0.985 0 0);			--primary: oklch(0.922 0 0);			--primary-foreground: oklch(0.205 0 0);			--secondary: oklch(0.269 0 0);			--secondary-foreground: oklch(0.985 0 0);			--muted: oklch(0.269 0 0);			--muted-foreground: oklch(0.708 0 0);			--accent: oklch(0.269 0 0);			--accent-foreground: oklch(0.985 0 0);			--destructive: oklch(0.704 0.191 22.216);			--destructive-foreground: oklch(0.985 0 0);			--border: oklch(1 0 0 / 10%);			--input: oklch(1 0 0 / 15%);			--ring: oklch(0.556 0 0);			--chart-1: oklch(0.87 0 0);			--chart-2: oklch(0.556 0 0);			--chart-3: oklch(0.439 0 0);			--chart-4: oklch(0.371 0 0);			--chart-5: oklch(0.269 0 0);			--destructive-soft: color-mix(in oklch, var(--destructive) 14%, var(--background));			--destructive-soft-foreground: var(--destructive);			--elevated: color-mix(in oklch, var(--muted) 88%, var(--foreground));			--elevated-foreground: var(--foreground);			--info: oklch(0.623 0.188 259.81);			--info-foreground: oklch(0.985 0 0);			--info-soft: color-mix(in oklch, var(--info) 14%, var(--background));			--info-soft-foreground: var(--info);			--overlay: oklch(0 0 0 / 65%);			--shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);			--shadow-2xl: 0 1px 3px 0 hsl(0 0% 0% / 0.25);			--shadow-2xs: 0 1px 3px 0 hsl(0 0% 0% / 0.05);			--shadow-lg: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);			--shadow-md: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);			--shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);			--shadow-xl: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);			--shadow-xs: 0 1px 3px 0 hsl(0 0% 0% / 0.05);			--sidebar: oklch(0.205 0 0);			--sidebar-accent: oklch(0.269 0 0);			--sidebar-accent-foreground: oklch(0.985 0 0);			--sidebar-border: oklch(1 0 0 / 10%);			--sidebar-foreground: oklch(0.985 0 0);			--sidebar-primary: oklch(0.488 0.243 264.376);			--sidebar-primary-foreground: oklch(0.985 0 0);			--sidebar-ring: oklch(0.556 0 0);			--success: oklch(0.696 0.17 162.48);			--success-foreground: oklch(0.205 0 0);			--success-soft: color-mix(in oklch, var(--success) 14%, var(--background));			--success-soft-foreground: var(--success);			--tertiary: color-mix(in oklch, var(--secondary) 50%, var(--background));			--tertiary-foreground: color-mix(in oklch, var(--foreground) 50%, var(--muted-foreground));			--warning: oklch(0.769 0.188 70.08);			--warning-foreground: oklch(0.216 0.006 56.043);			--warning-soft: color-mix(in oklch, var(--warning) 14%, var(--background));			--warning-soft-foreground: var(--warning);		}		@variant native {			--radius: 0.625rem;			--radius-button-lg: 26px;			--radius-button-md: 22px;			--radius-button-sm: 18px;			--spacing-button-lg: 52px;			--spacing-button-md: 44px;			--spacing-button-sm: 36px;			--spacing-chart-lg: 280px;			--spacing-chart-md: 220px;			--spacing-chart-sm: 160px;			--spacing-icon-2xl: 32px;			--spacing-icon-lg: 20px;			--spacing-icon-md: 18px;			--spacing-icon-sm: 16px;			--spacing-icon-xl: 24px;			--spacing-icon-xs: 14px;			--spacing-input-lg: 52px;			--spacing-input-md: 44px;			--spacing-input-sm: 36px;			--spacing-navbar-row: 56px;			--spacing-screen-gutter: 20px;			--text-button-lg: 18px;			--text-button-md: 16px;			--text-button-sm: 14px;			--text-input-lg: 18px;			--text-input-md: 16px;			--text-input-sm: 14px;		}	}}@layer theme {	:root {		/*		 * Split by platform rather than by theme. React Native's `fontFamily`		 * takes a single family name with no fallback list, and no one name works		 * on both platforms: iOS has Menlo and Georgia and not `monospace`,		 * Android the reverse.		 */		@variant ios {			--font-sans: "System";			--font-serif: "Georgia";			--font-mono: "Menlo";			--font-heading: "System";		}		@variant android {			--font-sans: "sans-serif";			--font-serif: "serif";			--font-mono: "monospace";			--font-heading: "sans-serif";		}	}}@theme inline {	--color-background: var(--background);	--color-foreground: var(--foreground);	--color-card: var(--card);	--color-card-foreground: var(--card-foreground);	--color-popover: var(--popover);	--color-popover-foreground: var(--popover-foreground);	--color-primary: var(--primary);	--color-primary-foreground: var(--primary-foreground);	--color-secondary: var(--secondary);	--color-secondary-foreground: var(--secondary-foreground);	--color-muted: var(--muted);	--color-muted-foreground: var(--muted-foreground);	--color-accent: var(--accent);	--color-accent-foreground: var(--accent-foreground);	--color-destructive: var(--destructive);	--color-destructive-foreground: var(--destructive-foreground);	--color-border: var(--border);	--color-input: var(--input);	--color-ring: var(--ring);	--color-chart-1: var(--chart-1);	--color-chart-2: var(--chart-2);	--color-chart-3: var(--chart-3);	--color-chart-4: var(--chart-4);	--color-chart-5: var(--chart-5);	--color-destructive-soft: var(--destructive-soft);	--color-destructive-soft-foreground: var(--destructive-soft-foreground);	--color-elevated: var(--elevated);	--color-elevated-foreground: var(--elevated-foreground);	--color-info: var(--info);	--color-info-foreground: var(--info-foreground);	--color-info-soft: var(--info-soft);	--color-info-soft-foreground: var(--info-soft-foreground);	--color-overlay: var(--overlay);	--shadow-2xl: var(--shadow-2xl);	--shadow-2xs: var(--shadow-2xs);	--shadow-lg: var(--shadow-lg);	--shadow-md: var(--shadow-md);	--shadow-sm: var(--shadow-sm);	--shadow-xl: var(--shadow-xl);	--shadow-xs: var(--shadow-xs);	--color-sidebar: var(--sidebar);	--color-sidebar-accent: var(--sidebar-accent);	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);	--color-sidebar-border: var(--sidebar-border);	--color-sidebar-foreground: var(--sidebar-foreground);	--color-sidebar-primary: var(--sidebar-primary);	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);	--color-sidebar-ring: var(--sidebar-ring);	--color-success: var(--success);	--color-success-foreground: var(--success-foreground);	--color-success-soft: var(--success-soft);	--color-success-soft-foreground: var(--success-soft-foreground);	--color-tertiary: var(--tertiary);	--color-tertiary-foreground: var(--tertiary-foreground);	--color-warning: var(--warning);	--color-warning-foreground: var(--warning-foreground);	--color-warning-soft: var(--warning-soft);	--color-warning-soft-foreground: var(--warning-soft-foreground);}

:root {	--background: oklch(0.985 0 0);	--foreground: oklch(0.145 0 0);	--card: oklch(1 0 0);	--card-foreground: oklch(0.145 0 0);	--popover: oklch(1 0 0);	--popover-foreground: oklch(0.145 0 0);	--primary: oklch(0.205 0 0);	--primary-foreground: oklch(0.985 0 0);	--secondary: oklch(0.97 0 0);	--secondary-foreground: oklch(0.205 0 0);	--muted: oklch(0.97 0 0);	--muted-foreground: oklch(0.556 0 0);	--accent: oklch(0.97 0 0);	--accent-foreground: oklch(0.205 0 0);	--destructive: oklch(0.577 0.245 27.325);	--border: oklch(0.922 0 0);	--input: oklch(0.922 0 0);	--ring: oklch(0.708 0 0);	--chart-1: oklch(0.87 0 0);	--chart-2: oklch(0.556 0 0);	--chart-3: oklch(0.439 0 0);	--chart-4: oklch(0.371 0 0);	--chart-5: oklch(0.269 0 0);	--sidebar: oklch(0.985 0 0);	--sidebar-accent: oklch(0.97 0 0);	--sidebar-accent-foreground: oklch(0.205 0 0);	--sidebar-border: oklch(0.922 0 0);	--sidebar-foreground: oklch(0.145 0 0);	--sidebar-primary: oklch(0.205 0 0);	--sidebar-primary-foreground: oklch(0.985 0 0);	--sidebar-ring: oklch(0.708 0 0);}.dark {	--background: oklch(0.145 0 0);	--foreground: oklch(0.985 0 0);	--card: oklch(0.205 0 0);	--card-foreground: oklch(0.985 0 0);	--popover: oklch(0.205 0 0);	--popover-foreground: oklch(0.985 0 0);	--primary: oklch(0.922 0 0);	--primary-foreground: oklch(0.205 0 0);	--secondary: oklch(0.269 0 0);	--secondary-foreground: oklch(0.985 0 0);	--muted: oklch(0.269 0 0);	--muted-foreground: oklch(0.708 0 0);	--accent: oklch(0.269 0 0);	--accent-foreground: oklch(0.985 0 0);	--destructive: oklch(0.704 0.191 22.216);	--border: oklch(1 0 0 / 10%);	--input: oklch(1 0 0 / 15%);	--ring: oklch(0.556 0 0);	--chart-1: oklch(0.87 0 0);	--chart-2: oklch(0.556 0 0);	--chart-3: oklch(0.439 0 0);	--chart-4: oklch(0.371 0 0);	--chart-5: oklch(0.269 0 0);	--sidebar: oklch(0.205 0 0);	--sidebar-accent: oklch(0.269 0 0);	--sidebar-accent-foreground: oklch(0.985 0 0);	--sidebar-border: oklch(1 0 0 / 10%);	--sidebar-foreground: oklch(0.985 0 0);	--sidebar-primary: oklch(0.488 0.243 264.376);	--sidebar-primary-foreground: oklch(0.985 0 0);	--sidebar-ring: oklch(0.556 0 0);}@theme {	--radius: 0.625rem;	--text-xs: 12px;	--text-sm: 14px;	--text-base: 16px;	--text-lg: 18px;	--text-xl: 20px;	--text-2xl: 24px;	--text-3xl: 30px;	--spacing-button-sm: 36px;	--spacing-button-md: 44px;	--spacing-button-lg: 52px;	--text-button-sm: 14px;	--text-button-md: 16px;	--text-button-lg: 18px;	--radius-button-sm: 18px;	--radius-button-md: 22px;	--radius-button-lg: 26px;	--spacing-input-sm: 36px;	--spacing-input-md: 44px;	--spacing-input-lg: 52px;	--text-input-sm: 14px;	--text-input-md: 16px;	--text-input-lg: 18px;	--spacing-icon-xs: 14px;	--spacing-icon-sm: 16px;	--spacing-icon-md: 18px;	--spacing-icon-lg: 20px;	--spacing-icon-xl: 24px;	--spacing-icon-2xl: 32px;	--spacing-navbar-row: 56px;	--spacing-screen-gutter: 20px;	--spacing-chart-sm: 160px;	--spacing-chart-md: 220px;	--spacing-chart-lg: 280px;}@theme inline {	--radius-xs: calc(var(--radius) * 0.4);	--radius-sm: calc(var(--radius) * 0.6);	--radius-md: calc(var(--radius) * 0.8);	--radius-lg: var(--radius);	--radius-xl: calc(var(--radius) * 1.4);	--radius-2xl: calc(var(--radius) * 1.8);	--radius-3xl: calc(var(--radius) * 2.2);	--radius-4xl: calc(var(--radius) * 2.6);	--radius-full: 9999px;}