@layer base { .preview { --font-sans: var(--font-noto-sans); --font-heading: var(--font-playfair-display); contain-intrinsic-size: auto 900px; content-visibility: auto; } .theme-taupe { --radius: 0; --background: oklch(1 0 0); --foreground: oklch(0.147 0.004 49.3); --card: oklch(1 0 0); --card-foreground: oklch(0.147 0.004 49.3); --popover: oklch(1 0 0); --popover-foreground: oklch(0.147 0.004 49.3); --primary: oklch(0.214 0.009 43.1); --primary-foreground: oklch(0.986 0.002 67.8); --secondary: oklch(0.96 0.002 17.2); --secondary-foreground: oklch(0.214 0.009 43.1); --muted: oklch(0.96 0.002 17.2); --muted-foreground: oklch(0.547 0.021 43.1); --accent: oklch(0.96 0.002 17.2); --accent-foreground: oklch(0.214 0.009 43.1); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0.005 34.3); --input: oklch(0.922 0.005 34.3); --ring: oklch(0.714 0.014 41.2); --chart-1: oklch(0.868 0.007 39.5); --chart-2: oklch(0.547 0.021 43.1); --chart-3: oklch(0.438 0.017 39.3); --chart-4: oklch(0.367 0.016 35.7); --chart-5: oklch(0.268 0.011 36.5); --sidebar: oklch(0.986 0.002 67.8); --sidebar-foreground: oklch(0.147 0.004 49.3); --sidebar-primary: oklch(0.214 0.009 43.1); --sidebar-primary-foreground: oklch(0.986 0.002 67.8); --sidebar-accent: oklch(0.96 0.002 17.2); --sidebar-accent-foreground: oklch(0.214 0.009 43.1); --sidebar-border: oklch(0.922 0.005 34.3); --sidebar-ring: oklch(0.714 0.014 41.2); .dark & { --background: oklch(0.147 0.004 49.3); --foreground: oklch(0.986 0.002 67.8); --card: oklch(0.214 0.009 43.1); --card-foreground: oklch(0.986 0.002 67.8); --popover: oklch(0.214 0.009 43.1); --popover-foreground: oklch(0.986 0.002 67.8); --primary: oklch(0.922 0.005 34.3); --primary-foreground: oklch(0.214 0.009 43.1); --secondary: oklch(0.268 0.011 36.5); --secondary-foreground: oklch(0.986 0.002 67.8); --muted: oklch(0.268 0.011 36.5); --muted-foreground: oklch(0.714 0.014 41.2); --accent: oklch(0.268 0.011 36.5); --accent-foreground: oklch(0.986 0.002 67.8); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.547 0.021 43.1); --chart-1: oklch(0.868 0.007 39.5); --chart-2: oklch(0.547 0.021 43.1); --chart-3: oklch(0.438 0.017 39.3); --chart-4: oklch(0.367 0.016 35.7); --chart-5: oklch(0.268 0.011 36.5); --sidebar: oklch(0.214 0.009 43.1); --sidebar-foreground: oklch(0.986 0.002 67.8); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.986 0.002 67.8); --sidebar-accent: oklch(0.268 0.011 36.5); --sidebar-accent-foreground: oklch(0.986 0.002 67.8); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.547 0.021 43.1); } } .theme-neutral { --radius: 0; --background: oklch(1 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-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: 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-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-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 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-ring: oklch(0.556 0 0); } } .theme-stone { --radius: 0; --background: oklch(1 0 0); --foreground: oklch(0.147 0.004 49.25); --card: oklch(1 0 0); --card-foreground: oklch(0.147 0.004 49.25); --popover: oklch(1 0 0); --popover-foreground: oklch(0.147 0.004 49.25); --primary: oklch(0.216 0.006 56.043); --primary-foreground: oklch(0.985 0.001 106.423); --secondary: oklch(0.97 0.001 106.424); --secondary-foreground: oklch(0.216 0.006 56.043); --muted: oklch(0.97 0.001 106.424); --muted-foreground: oklch(0.553 0.013 58.071); --accent: oklch(0.97 0.001 106.424); --accent-foreground: oklch(0.216 0.006 56.043); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.923 0.003 48.717); --input: oklch(0.923 0.003 48.717); --ring: oklch(0.709 0.01 56.259); --chart-1: oklch(0.869 0.005 56.366); --chart-2: oklch(0.553 0.013 58.071); --chart-3: oklch(0.444 0.011 73.639); --chart-4: oklch(0.374 0.01 67.558); --chart-5: oklch(0.268 0.007 34.298); --sidebar: oklch(0.985 0.001 106.423); --sidebar-foreground: oklch(0.147 0.004 49.25); --sidebar-primary: oklch(0.216 0.006 56.043); --sidebar-primary-foreground: oklch(0.985 0.001 106.423); --sidebar-accent: oklch(0.97 0.001 106.424); --sidebar-accent-foreground: oklch(0.216 0.006 56.043); --sidebar-border: oklch(0.923 0.003 48.717); --sidebar-ring: oklch(0.709 0.01 56.259); .dark & { --background: oklch(0.147 0.004 49.25); --foreground: oklch(0.985 0.001 106.423); --card: oklch(0.216 0.006 56.043); --card-foreground: oklch(0.985 0.001 106.423); --popover: oklch(0.216 0.006 56.043); --popover-foreground: oklch(0.985 0.001 106.423); --primary: oklch(0.923 0.003 48.717); --primary-foreground: oklch(0.216 0.006 56.043); --secondary: oklch(0.268 0.007 34.298); --secondary-foreground: oklch(0.985 0.001 106.423); --muted: oklch(0.268 0.007 34.298); --muted-foreground: oklch(0.709 0.01 56.259); --accent: oklch(0.268 0.007 34.298); --accent-foreground: oklch(0.985 0.001 106.423); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.553 0.013 58.071); --chart-1: oklch(0.869 0.005 56.366); --chart-2: oklch(0.553 0.013 58.071); --chart-3: oklch(0.444 0.011 73.639); --chart-4: oklch(0.374 0.01 67.558); --chart-5: oklch(0.268 0.007 34.298); --sidebar: oklch(0.216 0.006 56.043); --sidebar-foreground: oklch(0.985 0.001 106.423); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0.001 106.423); --sidebar-accent: oklch(0.268 0.007 34.298); --sidebar-accent-foreground: oklch(0.985 0.001 106.423); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.553 0.013 58.071); } } .theme-zinc { --radius: 0; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.21 0.006 285.885); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --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: oklch(0.705 0.015 286.067); --chart-1: oklch(0.871 0.006 286.286); --chart-2: oklch(0.552 0.016 285.938); --chart-3: oklch(0.442 0.017 285.786); --chart-4: oklch(0.37 0.013 285.805); --chart-5: oklch(0.274 0.006 286.033); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.21 0.006 285.885); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.705 0.015 286.067); .dark & { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.92 0.004 286.32); --primary-foreground: oklch(0.21 0.006 285.885); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --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.552 0.016 285.938); --chart-1: oklch(0.871 0.006 286.286); --chart-2: oklch(0.552 0.016 285.938); --chart-3: oklch(0.442 0.017 285.786); --chart-4: oklch(0.37 0.013 285.805); --chart-5: oklch(0.274 0.006 286.033); --sidebar: oklch(0.21 0.006 285.885); --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-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.552 0.016 285.938); } } .theme-mauve { --radius: 0; --background: oklch(1 0 0); --foreground: oklch(0.145 0.008 326); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0.008 326); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0.008 326); --primary: oklch(0.212 0.019 322.12); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.96 0.003 325.6); --secondary-foreground: oklch(0.212 0.019 322.12); --muted: oklch(0.96 0.003 325.6); --muted-foreground: oklch(0.542 0.034 322.5); --accent: oklch(0.96 0.003 325.6); --accent-foreground: oklch(0.212 0.019 322.12); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0.005 325.62); --input: oklch(0.922 0.005 325.62); --ring: oklch(0.711 0.019 323.02); --chart-1: oklch(0.865 0.012 325.68); --chart-2: oklch(0.542 0.034 322.5); --chart-3: oklch(0.435 0.029 321.78); --chart-4: oklch(0.364 0.029 323.89); --chart-5: oklch(0.263 0.024 320.12); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0.008 326); --sidebar-primary: oklch(0.212 0.019 322.12); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.96 0.003 325.6); --sidebar-accent-foreground: oklch(0.212 0.019 322.12); --sidebar-border: oklch(0.922 0.005 325.62); --sidebar-ring: oklch(0.711 0.019 323.02); .dark & { --background: oklch(0.145 0.008 326); --foreground: oklch(0.985 0 0); --card: oklch(0.212 0.019 322.12); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.212 0.019 322.12); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0.005 325.62); --primary-foreground: oklch(0.212 0.019 322.12); --secondary: oklch(0.263 0.024 320.12); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.263 0.024 320.12); --muted-foreground: oklch(0.711 0.019 323.02); --accent: oklch(0.263 0.024 320.12); --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.542 0.034 322.5); --chart-1: oklch(0.865 0.012 325.68); --chart-2: oklch(0.542 0.034 322.5); --chart-3: oklch(0.435 0.029 321.78); --chart-4: oklch(0.364 0.029 323.89); --chart-5: oklch(0.263 0.024 320.12); --sidebar: oklch(0.212 0.019 322.12); --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-accent: oklch(0.263 0.024 320.12); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.542 0.034 322.5); } } .theme-olive { --radius: 0; --background: oklch(1 0 0); --foreground: oklch(0.153 0.006 107.1); --card: oklch(1 0 0); --card-foreground: oklch(0.153 0.006 107.1); --popover: oklch(1 0 0); --popover-foreground: oklch(0.153 0.006 107.1); --primary: oklch(0.228 0.013 107.4); --primary-foreground: oklch(0.988 0.003 106.5); --secondary: oklch(0.966 0.005 106.5); --secondary-foreground: oklch(0.228 0.013 107.4); --muted: oklch(0.966 0.005 106.5); --muted-foreground: oklch(0.58 0.031 107.3); --accent: oklch(0.966 0.005 106.5); --accent-foreground: oklch(0.228 0.013 107.4); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.93 0.007 106.5); --input: oklch(0.93 0.007 106.5); --ring: oklch(0.737 0.021 106.9); --chart-1: oklch(0.88 0.011 106.6); --chart-2: oklch(0.58 0.031 107.3); --chart-3: oklch(0.466 0.025 107.3); --chart-4: oklch(0.394 0.023 107.4); --chart-5: oklch(0.286 0.016 107.4); --sidebar: oklch(0.988 0.003 106.5); --sidebar-foreground: oklch(0.153 0.006 107.1); --sidebar-primary: oklch(0.228 0.013 107.4); --sidebar-primary-foreground: oklch(0.988 0.003 106.5); --sidebar-accent: oklch(0.966 0.005 106.5); --sidebar-accent-foreground: oklch(0.228 0.013 107.4); --sidebar-border: oklch(0.93 0.007 106.5); --sidebar-ring: oklch(0.737 0.021 106.9); .dark & { --background: oklch(0.153 0.006 107.1); --foreground: oklch(0.988 0.003 106.5); --card: oklch(0.228 0.013 107.4); --card-foreground: oklch(0.988 0.003 106.5); --popover: oklch(0.228 0.013 107.4); --popover-foreground: oklch(0.988 0.003 106.5); --primary: oklch(0.93 0.007 106.5); --primary-foreground: oklch(0.228 0.013 107.4); --secondary: oklch(0.286 0.016 107.4); --secondary-foreground: oklch(0.988 0.003 106.5); --muted: oklch(0.286 0.016 107.4); --muted-foreground: oklch(0.737 0.021 106.9); --accent: oklch(0.286 0.016 107.4); --accent-foreground: oklch(0.988 0.003 106.5); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.58 0.031 107.3); --chart-1: oklch(0.88 0.011 106.6); --chart-2: oklch(0.58 0.031 107.3); --chart-3: oklch(0.466 0.025 107.3); --chart-4: oklch(0.394 0.023 107.4); --chart-5: oklch(0.286 0.016 107.4); --sidebar: oklch(0.228 0.013 107.4); --sidebar-foreground: oklch(0.988 0.003 106.5); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.988 0.003 106.5); --sidebar-accent: oklch(0.286 0.016 107.4); --sidebar-accent-foreground: oklch(0.988 0.003 106.5); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.58 0.031 107.3); } } .theme-mist { --radius: 0; --background: oklch(1 0 0); --foreground: oklch(0.148 0.004 228.8); --card: oklch(1 0 0); --card-foreground: oklch(0.148 0.004 228.8); --popover: oklch(1 0 0); --popover-foreground: oklch(0.148 0.004 228.8); --primary: oklch(0.218 0.008 223.9); --primary-foreground: oklch(0.987 0.002 197.1); --secondary: oklch(0.963 0.002 197.1); --secondary-foreground: oklch(0.218 0.008 223.9); --muted: oklch(0.963 0.002 197.1); --muted-foreground: oklch(0.56 0.021 213.5); --accent: oklch(0.963 0.002 197.1); --accent-foreground: oklch(0.218 0.008 223.9); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.925 0.005 214.3); --input: oklch(0.925 0.005 214.3); --ring: oklch(0.723 0.014 214.4); --chart-1: oklch(0.872 0.007 219.6); --chart-2: oklch(0.56 0.021 213.5); --chart-3: oklch(0.45 0.017 213.2); --chart-4: oklch(0.378 0.015 216); --chart-5: oklch(0.275 0.011 216.9); --sidebar: oklch(0.987 0.002 197.1); --sidebar-foreground: oklch(0.148 0.004 228.8); --sidebar-primary: oklch(0.218 0.008 223.9); --sidebar-primary-foreground: oklch(0.987 0.002 197.1); --sidebar-accent: oklch(0.963 0.002 197.1); --sidebar-accent-foreground: oklch(0.218 0.008 223.9); --sidebar-border: oklch(0.925 0.005 214.3); --sidebar-ring: oklch(0.723 0.014 214.4); .dark & { --background: oklch(0.148 0.004 228.8); --foreground: oklch(0.987 0.002 197.1); --card: oklch(0.218 0.008 223.9); --card-foreground: oklch(0.987 0.002 197.1); --popover: oklch(0.218 0.008 223.9); --popover-foreground: oklch(0.987 0.002 197.1); --primary: oklch(0.925 0.005 214.3); --primary-foreground: oklch(0.218 0.008 223.9); --secondary: oklch(0.275 0.011 216.9); --secondary-foreground: oklch(0.987 0.002 197.1); --muted: oklch(0.275 0.011 216.9); --muted-foreground: oklch(0.723 0.014 214.4); --accent: oklch(0.275 0.011 216.9); --accent-foreground: oklch(0.987 0.002 197.1); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.56 0.021 213.5); --chart-1: oklch(0.872 0.007 219.6); --chart-2: oklch(0.56 0.021 213.5); --chart-3: oklch(0.45 0.017 213.2); --chart-4: oklch(0.378 0.015 216); --chart-5: oklch(0.275 0.011 216.9); --sidebar: oklch(0.218 0.008 223.9); --sidebar-foreground: oklch(0.987 0.002 197.1); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.987 0.002 197.1); --sidebar-accent: oklch(0.275 0.011 216.9); --sidebar-accent-foreground: oklch(0.987 0.002 197.1); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.56 0.021 213.5); } } } @utility font-heading { font-family: var(--font-serif); }