:root { --lookbook-white: theme("colors.white"); --lookbook-accent-50: theme("colors.rose.50"); --lookbook-accent-100: theme("colors.rose.100"); --lookbook-accent-200: theme("colors.rose.200"); --lookbook-accent-300: theme("colors.rose.300"); --lookbook-accent-400: theme("colors.rose.400"); --lookbook-accent-500: theme("colors.rose.500"); --lookbook-accent-600: theme("colors.rose.600"); --lookbook-accent-700: theme("colors.rose.700"); --lookbook-accent-800: theme("colors.rose.800"); --lookbook-accent-900: theme("colors.rose.900"); --lookbook-base-50: theme("colors.zinc.50"); --lookbook-base-100: theme("colors.zinc.100"); --lookbook-base-200: theme("colors.zinc.200"); --lookbook-base-300: theme("colors.zinc.300"); --lookbook-base-400: theme("colors.zinc.400"); --lookbook-base-500: theme("colors.zinc.500"); --lookbook-base-600: theme("colors.zinc.600"); --lookbook-base-700: theme("colors.zinc.700"); --lookbook-base-800: theme("colors.zinc.800"); --lookbook-base-900: theme("colors.zinc.900"); --lookbook-text: var(--lookbook-base-800); --lookbook-divider: var(--lookbook-base-300); --lookbook-draggable-hint: rgb(224 231 255 / 0.2); --lookbook-icon-button-stroke: var(--lookbook-base-400); --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600); --lookbook-button-bg: var(--lookbook-accent-500); --lookbook-button-bg-hover: var(--lookbook-accent-600); --lookbook-button-text: var(--lookbook-white); --lookbook-tooltip-bg: var(--lookbook-accent-500); --lookbook-tooltip-text: var(--lookbook-white); --lookbook-dropdown-bg: var(--lookbook-toolbar-bg); --lookbook-dropdown-text: var(--lookbook-text); --lookbook-dropdown-divider: var(--lookbook-divider); --lookbook-scrollbar: var(--lookbook-base-200); --lookbook-scrollbar-hover: var(--lookbook-base-300); --lookbook-toolbar-bg: var(--lookbook-white); --lookbook-toolbar-divider: var(--lookbook-divider); --lookbook-nav-text: var(--lookbook-text); --lookbook-nav-toggle: var(--lookbook-base-500); --lookbook-nav-icon-stroke: var(--lookbook-accent-500); --lookbook-nav-item-hover: var(--lookbook-base-100); --lookbook-nav-item-active: var(--lookbook-accent-50); --lookbook-input-bg: var(--lookbook-white); --lookbook-input-border: var(--lookbook-base-300); --lookbook-input-border-focus: var(--lookbook-accent-200); --lookbook-input-text: var(--lookbook-base-600); --lookbook-input-text-placeholder: var(--lookbook-base-400); --lookbook-input-toggle: var(--lookbook-base-300); --lookbook-input-toggle-active: var(--lookbook-accent-500); --lookbook-prose-bg: var(--lookbook-white); --lookbook-prose-text: var(--lookbook-base-600); --lookbook-prose-link: var(--lookbook-accent-900); --lookbook-tabs-text: var(--lookbook-base-500); --lookbook-tabs-text-hover: var(--lookbook-base-700); --lookbook-tabs-text-disabled: var(--lookbook-base-300); --lookbook-tabs-border-active: var(--lookbook-accent-400); --lookbook-viewport-handle: var(--lookbook-white); --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint); --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300); --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700); --lookbook-sidebar-bg: var(--lookbook-base-50); --lookbook-page-bg: var(--lookbook-white); --lookbook-drawer-bg: var(--lookbook-base-50); --lookbook-params-editor-bg: var(--lookbook-white); --lookbook-header-bg: var(--lookbook-accent-600); --lookbook-header-text: var(--lookbook-white); --lookbook-header-border: var(--lookbook-accent-700); --lookbook-blank-slate-title: var(--lookbook-accent-600); --lookbook-embed-title: var(--lookbook-text); --lookbook-branding-text: var(--lookbook-header-text); }