@photoroom/ui 0.1.117 → 0.1.119

package/theme.css

@@ -0,0 +1,1420 @@
+/*
+ * Photoroom design tokens — colors
+ *
+ * @theme inline registers utility names without emitting :root declarations.
+ * The actual CSS variable values are defined in ./colors.css (which owns
+ * light + dark mode overrides via the .theme-dark selector).
+ *
+ * To add a new color token, define the value in ./colors.css then add the
+ * utility name here.
+ */
+
+@import "./colors.css";
+
+@theme inline {
+  /* Base */
+  --color-black: var(--color-black);
+  --color-black-alpha-1: var(--color-black-alpha-1);
+  --color-black-alpha-2: var(--color-black-alpha-2);
+  --color-black-alpha-3: var(--color-black-alpha-3);
+  --color-black-alpha-4: var(--color-black-alpha-4);
+  --color-black-alpha-5: var(--color-black-alpha-5);
+  --color-black-alpha-6: var(--color-black-alpha-6);
+  --color-black-alpha-7: var(--color-black-alpha-7);
+  --color-black-alpha-8: var(--color-black-alpha-8);
+  --color-white: var(--color-white);
+  --color-white-1: var(--color-white-1);
+  --color-white-2: var(--color-white-2);
+  --color-white-alpha-1: var(--color-white-alpha-1);
+  --color-white-alpha-2: var(--color-white-alpha-2);
+  --color-white-alpha-3: var(--color-white-alpha-3);
+  --color-white-alpha-4: var(--color-white-alpha-4);
+  --color-white-alpha-5: var(--color-white-alpha-5);
+  --color-white-alpha-6: var(--color-white-alpha-6);
+  --color-white-alpha-7: var(--color-white-alpha-7);
+  --color-white-alpha-8: var(--color-white-alpha-8);
+  --color-white-alpha-9: var(--color-white-alpha-9);
+
+  /* Neutral */
+  --color-neutral-0: var(--color-neutral-0);
+  --color-neutral-50: var(--color-neutral-50);
+  --color-neutral-100: var(--color-neutral-100);
+  --color-neutral-200: var(--color-neutral-200);
+  --color-neutral-300: var(--color-neutral-300);
+  --color-neutral-400: var(--color-neutral-400);
+  --color-neutral-500: var(--color-neutral-500);
+  --color-neutral-600: var(--color-neutral-600);
+  --color-neutral-700: var(--color-neutral-700);
+  --color-neutral-800: var(--color-neutral-800);
+  --color-neutral-900: var(--color-neutral-900);
+  --color-neutral-alpha-100: var(--color-neutral-alpha-100);
+  --color-neutral-alpha-200: var(--color-neutral-alpha-200);
+  --color-neutral-alpha-300: var(--color-neutral-alpha-300);
+  --color-neutral-alpha-400: var(--color-neutral-alpha-400);
+  --color-neutral-alpha-500: var(--color-neutral-alpha-500);
+
+  /* Sand */
+  --color-sand-50: var(--color-sand-50);
+
+  /* Accent */
+  --color-accent-300: var(--color-accent-300);
+  --color-accent-400: var(--color-accent-400);
+  --color-accent-500: var(--color-accent-500);
+  --color-accent-600: var(--color-accent-600);
+  --color-accent-alpha-1: var(--color-accent-alpha-1);
+  --color-accent-alpha-2: var(--color-accent-alpha-2);
+  --color-accent-alpha-3: var(--color-accent-alpha-3);
+  --color-accent-alpha-4: var(--color-accent-alpha-4);
+  --color-accent-alpha-5: var(--color-accent-alpha-5);
+
+  /* Positive */
+  --color-positive-400: var(--color-positive-400);
+  --color-positive-500: var(--color-positive-500);
+  --color-positive-600: var(--color-positive-600);
+  --color-positive-alpha-1: var(--color-positive-alpha-1);
+  --color-positive-alpha-2: var(--color-positive-alpha-2);
+  --color-positive-alpha-3: var(--color-positive-alpha-3);
+
+  /* Negative */
+  --color-negative-400: var(--color-negative-400);
+  --color-negative-500: var(--color-negative-500);
+  --color-negative-600: var(--color-negative-600);
+  --color-negative-alpha-1: var(--color-negative-alpha-1);
+  --color-negative-alpha-2: var(--color-negative-alpha-2);
+  --color-negative-alpha-3: var(--color-negative-alpha-3);
+
+  /* Magic accent */
+  --color-magic-accent-400: var(--color-magic-accent-400);
+  --color-magic-accent-500: var(--color-magic-accent-500);
+  --color-magic-accent-600: var(--color-magic-accent-600);
+
+  /* Animation accent */
+  --color-animation-accent-500: var(--color-animation-accent-500);
+
+  /* Camera accent */
+  --color-camera-accent-500: var(--color-camera-accent-500);
+
+  /* Branding */
+  --color-secondary-moon-grape: var(--color-secondary-moon-grape);
+  --color-secondary-electric-litchi: var(--color-secondary-electric-litchi);
+  --color-secondary-sunny-mango: var(--color-secondary-sunny-mango);
+  --color-secondary-aqua-kiwi: var(--color-secondary-aqua-kiwi);
+  --color-secondary-coral-cherry: var(--color-secondary-coral-cherry);
+  --color-secondary-navy: var(--color-secondary-navy);
+
+  --color-misc-replaceable: var(--color-replaceable);
+
+  /* Surface */
+  --color-surface-default: var(--color-surface-default);
+  --color-surface-alternate: var(--color-surface-alternate);
+  --color-surface-low: var(--color-surface-low);
+  --color-surface-high: var(--color-surface-high);
+  --color-surface-higher: var(--color-surface-higher);
+
+  /* Background */
+  --color-background-default: var(--color-background-default);
+  --color-background-hover: var(--color-background-hover);
+  --color-background-down: var(--color-background-down);
+  --color-background-subdued: var(--color-background-subdued);
+  --color-background-subdued-hover: var(--color-background-subdued-hover);
+  --color-background-subdued-down: var(--color-background-subdued-down);
+  --color-background-accent: var(--color-background-accent);
+  --color-background-accent-hover: var(--color-background-accent-hover);
+  --color-background-accent-down: var(--color-background-accent-down);
+  --color-background-accent-subdued: var(--color-background-accent-subdued);
+  --color-background-accent-subdued-hover: var(--color-background-accent-subdued-hover);
+  --color-background-accent-subdued-down: var(--color-background-accent-subdued-down);
+  --color-background-positive: var(--color-background-positive);
+  --color-background-positive-hover: var(--color-background-positive-hover);
+  --color-background-positive-down: var(--color-background-positive-down);
+  --color-background-positive-subdued: var(--color-background-positive-subdued);
+  --color-background-positive-subdued-hover: var(--color-background-positive-subdued-hover);
+  --color-background-positive-subdued-down: var(--color-background-positive-subdued-down);
+  --color-background-negative: var(--color-background-negative);
+  --color-background-negative-hover: var(--color-background-negative-hover);
+  --color-background-negative-down: var(--color-background-negative-down);
+  --color-background-negative-subdued: var(--color-background-negative-subdued);
+  --color-background-negative-subdued-hover: var(--color-background-negative-subdued-hover);
+  --color-background-negative-subdued-down: var(--color-background-negative-subdued-down);
+  --color-background-tab: var(--color-background-tab);
+  --color-background-bar: var(--color-background-bar);
+  --color-background-white: var(--color-background-white);
+  --color-background-white-hover: var(--color-background-white-hover);
+  --color-background-white-down: var(--color-background-white-down);
+  --color-background-white-subdued: var(--color-background-white-subdued);
+  --color-background-white-subdued-hover: var(--color-background-white-subdued-hover);
+  --color-background-white-subdued-down: var(--color-background-white-subdued-down);
+  --color-background-spotlight: var(--color-background-spotlight);
+  --color-background-spotlight-down: var(--color-background-spotlight-down);
+  --color-background-inverted: var(--color-background-inverted);
+  --color-background-promotional: var(--color-background-promotional);
+  --color-background-asset: #e6e6e6;
+  --color-background-overlay: var(--color-background-overlay);
+  --color-background-tooltip: var(--color-background-tooltip);
+
+  /* Content */
+  --color-content-primary: var(--color-content-primary);
+  --color-content-subdued-primary: var(--color-content-subdued-primary);
+  --color-content-secondary: var(--color-content-secondary);
+  --color-content-tertiary: var(--color-content-tertiary);
+  --color-content-accent: var(--color-content-accent);
+  --color-content-accent-hover: var(--color-content-accent-hover);
+  --color-content-accent-down: var(--color-content-accent-down);
+  --color-content-positive: var(--color-content-positive);
+  --color-content-positive-hover: var(--color-content-positive-hover);
+  --color-content-positive-down: var(--color-content-positive-down);
+  --color-content-negative: var(--color-content-negative);
+  --color-content-negative-hover: var(--color-content-negative-hover);
+  --color-content-negative-down: var(--color-content-negative-down);
+  --color-content-camera-accent: var(--color-content-camera-accent);
+  --color-content-white-primary: var(--color-content-white-primary);
+  --color-content-white-secondary: var(--color-content-white-secondary);
+  --color-content-black-primary: var(--color-content-black-primary);
+  --color-content-white-primary-inverted: var(--color-content-white-primary-inverted);
+  --color-content-white-subdued-primary-inverted: var(
+    --color-content-white-subdued-primary-inverted
+  );
+
+  /* Structure */
+  --color-misc-divider: var(--color-misc-divider);
+  --color-misc-divider-ios: var(--color-misc-divider-ios);
+  --color-misc-border: var(--color-misc-border);
+  --color-misc-border-emphasized: var(--color-misc-border-emphasized);
+  --color-misc-border-box: var(--color-misc-border-box);
+  --color-misc-border-box-hover: var(--color-misc-border-box-hover);
+  --color-misc-border-box-down: var(--color-misc-border-box-down);
+  --color-misc-border-sidebar: var(--color-misc-border-sidebar);
+  --color-misc-border-default: var(--color-misc-border-default);
+  --color-misc-stack-layer-1: var(--color-misc-stack-layer-1);
+  --color-misc-stack-layer-2: var(--color-misc-stack-layer-2);
+  --color-misc-focus-indicator: var(--color-misc-focus-indicator);
+  --color-misc-focus-indicator-subdued: var(--color-misc-focus-indicator-subdued);
+  --color-misc-white-focus-indicator: var(--color-misc-white-focus-indicator);
+  --color-misc-hairline: var(--color-neutral-alpha-300);
+
+  /* Overlay */
+  --color-misc-visual-hover: var(--color-misc-visual-hover);
+  --color-misc-visual-down: var(--color-misc-visual-down);
+  --color-misc-automated-exports: var(--color-misc-automated-exports);
+
+  /* Pricing */
+  --color-misc-ai-image: var(--color-misc-ai-image);
+  --color-misc-ai-video: var(--color-misc-ai-video);
+
+  --color-checker: var(--color-checker);
+
+  /*
+   * Deprecated bare color tokens — DO NOT USE.
+   * Pending design-system audit to replace with semantic tokens.
+   */
+  --color-yellow: #ffc710;
+  --color-green: #23d114;
+  --color-blue: #339cff;
+  --color-pink: #ff47e0;
+  --color-pastel-pink: #f68efe;
+  --color-pastel-coral: #ffaaaa;
+  --color-pastel-yellow: #ffec8d;
+  --color-pastel-cyan-1: #22cbe8;
+  --color-pastel-cyan-2: #b5f6fb;
+  --color-facebook: #1877f2;
+  --color-facebook-dark: #0b63d4;
+  --color-facebook-light: #2c83f2;
+  --color-facebook-800: #5071fc;
+  --color-facebook-900: #4866e3;
+}
+
+/*
+ * Photoroom design tokens — typography, spacing, shadows, etc.
+ */
+
+@theme {
+  /* Font family */
+  --font-brand:
+    "TT Photoroom", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+
+  /* Opacity (extends v4 default scale) */
+  --opacity-15: 0.15;
+
+  /* Border radius — https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=6953%3A13224 */
+  --radius-none: 0;
+  --radius-150: 3px;
+  --radius-200: 4px;
+  --radius-250: 5px;
+  --radius-300: 6px;
+  --radius-350: 7px;
+  --radius-400: 8px;
+  --radius-450: 9px;
+  --radius-500: 10px;
+  --radius-600: 12px;
+  --radius-area-500: 18px;
+  --radius-area-600: 34px;
+  --radius-full: 9999px;
+
+  /* Breakpoints */
+  --breakpoint-2xl: 1512px;
+  --breakpoint-3xl: 1800px;
+
+  /* Font size — https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=6953%3A13370 */
+  --text-300: 10px;
+  --text-400: 12px;
+  --text-500: 14px;
+  --text-600: 17px;
+  --text-700: 20px;
+  --text-800: 24px;
+  --text-900: 29px;
+  --text-1000: 35px;
+  --text-1100: 42px;
+  --text-1200: 50px;
+  --text-1300: 60px;
+  --text-1400: 72px;
+
+  /* Font weight — https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=6953%3A13333 */
+  --font-weight-inherit: inherit;
+  --font-weight-300: 300; /* Light */
+  --font-weight-400: 400; /* Regular */
+  --font-weight-500: 500; /* Medium */
+  --font-weight-600: 600; /* SemiBold */
+  --font-weight-700: 700; /* Bold */
+  --font-weight-800: 800; /* ExtraBold */
+
+  /* Line height — https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=6953%3A13353 */
+  --leading-400: 110%; /* Large heading */
+  --leading-500: 130%; /* Heading, component */
+  --leading-600: 150%; /* Body */
+  --default-leading: 1.2;
+
+  /* Spacing (extends v4 default scale) */
+  --spacing-18: 4.5rem; /* 72px */
+  --spacing-22: 5.5rem; /* 88px */
+  --spacing-26: 6.5rem; /* 104px */
+
+  /* Container / max-width (v4 renamed from maxWidth scale) */
+  --container-xxs: 13rem; /* 208px */
+  --container-mdlg: 29rem; /* 464px */
+  /*
+   * Containers with dots in their name (1.5xl, 2.5xl, 5.5xl) can't live in
+   * @theme — v4 doesn't support escaped dots in token names. The few
+   * call sites use arbitrary values (max-w-[67rem], etc.) instead.
+   */
+
+  /* Grid template columns */
+  --grid-cols-header: 1fr auto 1fr;
+
+  /* Box shadow — https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=7711%3A13275 */
+  --shadow-300:
+    0px 0.5px 3.13px rgba(0, 0, 0, 0.06), 0px 1px 6.25px rgba(0, 0, 0, 0.03),
+    0px 2px 12.5px rgba(0, 0, 0, 0.02);
+  --shadow-400:
+    0px 1px 5px rgba(0, 0, 0, 0.07), 0px 2px 10px rgba(0, 0, 0, 0.03),
+    0px 4px 20px rgba(0, 0, 0, 0.02);
+  --shadow-500:
+    0px 2px 8px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.04),
+    0px 8px 32px rgba(0, 0, 0, 0.02);
+  --shadow-600:
+    0px 4px 12.8px rgba(0, 0, 0, 0.09), 0px 8px 25.6px rgba(0, 0, 0, 0.05),
+    0px 16px 51.2px rgba(0, 0, 0, 0.02);
+  --shadow-700:
+    0px 8px 20.48px rgba(0, 0, 0, 0.11), 0px 16px 40.96px rgba(0, 0, 0, 0.05),
+    0px 32px 81.92px rgba(0, 0, 0, 0.03);
+  --shadow-800:
+    0px 16px 32.77px rgba(0, 0, 0, 0.12), 0px 32px 65.54px rgba(0, 0, 0, 0.06),
+    0px 64px 131.07px rgba(0, 0, 0, 0.03);
+  --shadow-background-generator:
+    0px 151px 60px rgba(174, 174, 194, 0.01), 0px 85px 51px rgba(174, 174, 194, 0.05),
+    0px 38px 38px rgba(174, 174, 194, 0.09), 0px 9px 21px rgba(174, 174, 194, 0.1),
+    0px 0px 0px rgba(174, 174, 194, 0.1);
+
+  /* Ring width (extends v4 default scale) */
+  --ring-3: 3px;
+
+  /* Animation timings */
+  --animate-bone-pulse: bone-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-tooltip-slide-down: tooltip-slide-down 0.2s;
+  --animate-tooltip-slide-up: tooltip-slide-up 0.2s;
+  --animate-tooltip-slide-left: tooltip-slide-left 0.2s;
+  --animate-tooltip-slide-right: tooltip-slide-right 0.2s;
+  --animate-button-loading-indeterminate-wiggle: button-loading-indeterminate-wiggle 2498ms
+    cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  --animate-dialog-overlay-enter: dialog-overlay-enter 0.2s ease-out;
+  --animate-dialog-overlay-leave: dialog-overlay-leave 0.2s ease-in;
+  --animate-dialog-enter: dialog-enter 0.2s ease-out;
+  --animate-dialog-leave: dialog-leave 0.2s ease-in;
+  --animate-spotlight-fade-subdued: spotlight-fade-subdued 500ms forwards 1500ms;
+  --animate-spotlight-fade-white: spotlight-fade-white 500ms forwards 1500ms;
+  --animate-radix-accordion-slide-down: radix-accordion-slide-down 300ms
+    cubic-bezier(0.87, 0, 0.13, 1);
+  --animate-radix-accordion-slide-up: radix-accordion-slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+/*
+ * Keyframes (replaces tailwind.config.js theme.extend.keyframes)
+ */
+@keyframes bone-pulse {
+  0% {
+    background-color: var(--color-neutral-alpha-100);
+  }
+  50% {
+    background-color: var(--color-neutral-alpha-300);
+  }
+  100% {
+    background-color: var(--color-neutral-alpha-100);
+  }
+}
+@keyframes tooltip-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes tooltip-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes tooltip-slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes tooltip-slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes button-loading-indeterminate-wiggle {
+  0% {
+    transform: translate(-200%, -50%);
+  }
+  50% {
+    transform: translate(200%, -50%);
+  }
+  100% {
+    transform: translate(-200%, -50%);
+  }
+}
+@keyframes dialog-overlay-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes dialog-overlay-leave {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes dialog-enter {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+@keyframes dialog-leave {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.95);
+  }
+}
+@keyframes spotlight-fade-subdued {
+  0% {
+    background-color: var(--color-background-spotlight);
+  }
+  100% {
+    background-color: var(--color-background-subdued);
+  }
+}
+@keyframes spotlight-fade-white {
+  0% {
+    background-color: var(--color-background-spotlight);
+  }
+  100% {
+    background-color: var(--color-background-white);
+  }
+}
+@keyframes radix-accordion-slide-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+@keyframes radix-accordion-slide-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/*
+ * Custom variants (replaces tailwind.config.js darkMode and src/plugins/variants.js)
+ */
+@custom-variant dark (&:where(.theme-dark, .theme-dark *));
+@custom-variant tall (@media (min-height: 780px));
+@custom-variant mobile (@media (max-width: 600px));
+
+/*
+ * Custom utilities (replaces src/plugins/transitions.js)
+ * https://www.figma.com/design/cHgANa7dtzDDGXk7dKuAOQ/Prism?node-id=62868-23303&m=dev
+ */
+@utility interaction-transition {
+  transition-timing-function: cubic-bezier(0.2, 1, 0.4, 1);
+  transition-duration: 200ms;
+}
+
+/*
+ * Icon offset utilities (replaces src/plugins/icon-offset.js)
+ * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12440
+ */
+@utility icon-offset-200 {
+  margin-left: -1.2px;
+}
+@utility icon-offset-300 {
+  margin-left: -1.4px;
+}
+@utility icon-offset-400 {
+  margin-left: -1.7px;
+}
+@utility icon-offset-500 {
+  margin-left: -2px;
+}
+@utility icon-offset-600 {
+  margin-left: -2.4px;
+}
+@utility icon-offset-700 {
+  margin-left: -2.9px;
+}
+
+/*
+ * Icon size utilities (replaces src/plugins/icon-size.js)
+ * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12716
+ */
+@utility icon-size-200 {
+  width: --spacing(3);
+  height: --spacing(3);
+}
+@utility icon-size-300 {
+  width: 14px;
+  height: 14px;
+}
+@utility icon-size-400 {
+  width: --spacing(4);
+  height: --spacing(4);
+}
+@utility icon-size-500 {
+  width: --spacing(5);
+  height: --spacing(5);
+}
+@utility icon-size-600 {
+  width: --spacing(6);
+  height: --spacing(6);
+}
+@utility icon-size-700 {
+  width: --spacing(7);
+  height: --spacing(7);
+}
+@utility icon-size-800 {
+  width: 34px;
+  height: 34px;
+}
+
+/*
+ * Spacing utilities (replaces src/plugins/spacing.js)
+ *
+ * External paddings (e400–e1000) — https://www.figma.com/file/5G9xtfAPMEgTJoLQbAg1KR/Website?node-id=7043-23918
+ * Internal paddings/gap (i200–i1000) — https://www.figma.com/file/5G9xtfAPMEgTJoLQbAg1KR/Website?node-id=7050-26673
+ */
+@utility pt-e400 {
+  @apply pt-10 sm:pt-12 lg:pt-16;
+}
+@utility pb-e400 {
+  @apply pb-10 sm:pb-12 lg:pb-16;
+}
+@utility py-e400 {
+  @apply py-10 sm:py-12 lg:py-16;
+}
+@utility pt-e500 {
+  @apply pt-10 sm:pt-16 lg:pt-20;
+}
+@utility pb-e500 {
+  @apply pb-10 sm:pb-16 lg:pb-20;
+}
+@utility py-e500 {
+  @apply py-10 sm:py-16 lg:py-20;
+}
+@utility pt-e600 {
+  @apply pt-12 sm:pt-20 lg:pt-24;
+}
+@utility pb-e600 {
+  @apply pb-12 sm:pb-20 lg:pb-24;
+}
+@utility py-e600 {
+  @apply py-12 sm:py-20 lg:py-24;
+}
+@utility pt-e700 {
+  @apply pt-14 sm:pt-24 lg:pt-28;
+}
+@utility pb-e700 {
+  @apply pb-14 sm:pb-24 lg:pb-28;
+}
+@utility py-e700 {
+  @apply py-14 sm:py-24 lg:py-28;
+}
+@utility pt-e800 {
+  @apply pt-16 sm:pt-28 lg:pt-32;
+}
+@utility pb-e800 {
+  @apply pb-16 sm:pb-28 lg:pb-32;
+}
+@utility py-e800 {
+  @apply py-16 sm:py-28 lg:py-32;
+}
+@utility pt-e900 {
+  @apply pt-18 sm:pt-32 lg:pt-36;
+}
+@utility pb-e900 {
+  @apply pb-18 sm:pb-32 lg:pb-36;
+}
+@utility py-e900 {
+  @apply py-18 sm:py-32 lg:py-36;
+}
+@utility pt-e1000 {
+  @apply pt-20 sm:pt-36 lg:pt-40;
+}
+@utility pb-e1000 {
+  @apply pb-20 sm:pb-36 lg:pb-40;
+}
+@utility py-e1000 {
+  @apply py-20 sm:py-36 lg:py-40;
+}
+@utility pt-i200 {
+  @apply pt-8;
+}
+@utility pb-i200 {
+  @apply pb-8;
+}
+@utility py-i200 {
+  @apply py-8;
+}
+@utility gap-i200 {
+  @apply gap-8;
+}
+@utility pt-i300 {
+  @apply pt-10;
+}
+@utility pb-i300 {
+  @apply pb-10;
+}
+@utility py-i300 {
+  @apply py-10;
+}
+@utility gap-i300 {
+  @apply gap-10;
+}
+@utility pt-i400 {
+  @apply pt-12;
+}
+@utility pb-i400 {
+  @apply pb-12;
+}
+@utility py-i400 {
+  @apply py-12;
+}
+@utility gap-i400 {
+  @apply gap-12;
+}
+@utility pt-i500 {
+  @apply pt-12 sm:pt-14 lg:pt-16;
+}
+@utility pb-i500 {
+  @apply pb-12 sm:pb-14 lg:pb-16;
+}
+@utility py-i500 {
+  @apply py-12 sm:py-14 lg:py-16;
+}
+@utility gap-i500 {
+  @apply gap-12 sm:gap-14 lg:gap-16;
+}
+@utility pt-i600 {
+  @apply pt-12 sm:pt-16 lg:pt-20;
+}
+@utility pb-i600 {
+  @apply pb-12 sm:pb-16 lg:pb-20;
+}
+@utility py-i600 {
+  @apply py-12 sm:py-16 lg:py-20;
+}
+@utility gap-i600 {
+  @apply gap-12 sm:gap-16 lg:gap-20;
+}
+@utility pt-i1000 {
+  @apply pt-24 sm:pt-28 lg:pt-32;
+}
+@utility pb-i1000 {
+  @apply pb-24 sm:pb-28 lg:pb-32;
+}
+@utility py-i1000 {
+  @apply py-24 sm:py-28 lg:py-32;
+}
+@utility gap-i1000 {
+  @apply gap-24 sm:gap-28 lg:gap-32;
+}
+
+/*
+ * Background damier (checkerboard) pattern (replaces src/plugins/backgrounds.js)
+ */
+@utility bg-damier-* {
+  background-image: repeating-conic-gradient(--value(--color-*) 0% 25%, transparent 0% 50%);
+  background-position: center;
+}
+@utility bg-damier-small {
+  background-size: 12px 12px;
+}
+@utility bg-damier-medium {
+  background-size: 20px 20px;
+}
+@utility bg-damier-large {
+  background-size: 28px 28px;
+}
+
+/*
+ * Text-to-leading utilities (replaces src/plugins/text-to-leading.js)
+ * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12592
+ */
+@utility text-to-leading-300 {
+  margin-left: 6px;
+}
+@utility text-to-leading-400 {
+  margin-left: 7px;
+}
+@utility text-to-leading-500 {
+  margin-left: 8px;
+}
+@utility text-to-leading-600 {
+  margin-left: 10px;
+}
+@utility text-to-leading-700 {
+  margin-left: 12px;
+}
+@utility text-to-leading-compact-300 {
+  margin-left: 3px;
+}
+@utility text-to-leading-compact-400 {
+  margin-left: 3.3px;
+}
+@utility text-to-leading-compact-500 {
+  margin-left: 4px;
+}
+@utility text-to-leading-compact-600 {
+  margin-left: 5px;
+}
+@utility text-to-leading-compact-700 {
+  margin-left: 6px;
+}
+@utility text-to-leading-spacious-300 {
+  margin-left: 8px;
+}
+@utility text-to-leading-spacious-400 {
+  margin-left: 10px;
+}
+@utility text-to-leading-spacious-500 {
+  margin-left: 12px;
+}
+@utility text-to-leading-spacious-600 {
+  margin-left: 14px;
+}
+@utility text-to-leading-spacious-700 {
+  margin-left: 17px;
+}
+
+/*
+ * Misc design-system utilities (replaces src/plugins/misc.js)
+ * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=20464-7406
+ */
+
+/* Scrollbar */
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Dropdown */
+@utility misc-hairline-spacing {
+  @apply gap-0.5;
+}
+@utility misc-dropdown-padding {
+  @apply p-1;
+}
+@utility misc-dropdown-padding-spacious {
+  @apply p-4;
+}
+@utility misc-dropdown-rounding {
+  @apply rounded-500;
+}
+@utility misc-dropdown-inner-rounding {
+  @apply rounded-300;
+}
+
+/* Dialog */
+@utility misc-dialog-rounding {
+  @apply rounded-500;
+}
+@utility misc-dialog-overlay {
+  background-color: rgba(0, 0, 0, 25%);
+}
+
+/* Border / ring */
+@utility misc-border-size-hairline {
+  @apply border-[0.5px];
+}
+@utility misc-border-size-default {
+  @apply border;
+}
+@utility misc-border-size-selection {
+  @apply border-2;
+}
+@utility misc-border-size-focus-ring {
+  @apply ring-3;
+}
+/*
+ * Outer border using box-shadow so it doesn't affect the element's bounding
+ * box. Use this instead of `border border-misc-border` on floating/elevated UI
+ * elements (pills, menus, popovers) to keep layout size exact and render the
+ * correct semi-transparent misc-border token.
+ */
+@utility misc-outer-border {
+  @apply ring-misc-border ring-1;
+}
+
+/* Shadow */
+@utility misc-shadow-selection {
+  @apply shadow-[inset_0_0_0_1px_var(--color-white)];
+}
+
+/*
+ * Color picker overrides for react-colorful.
+ * !important is needed because react-colorful injects unlayered <style>,
+ * which beats anything inside @layer utilities regardless of specificity.
+ */
+@utility misc-color-picker {
+  & .react-colorful {
+    display: flex !important;
+    width: 100% !important;
+    flex-direction: column !important;
+    gap: 0.75rem !important;
+  }
+  & .react-colorful__saturation {
+    height: 10rem !important;
+    width: 100% !important;
+    border-radius: 8px !important;
+    border: 0 !important;
+  }
+  & .react-colorful__hue {
+    height: 1rem !important;
+    border-radius: 9999px !important;
+  }
+  & .react-colorful__pointer {
+    height: 1rem !important;
+    width: 1rem !important;
+  }
+}
+
+/* Magic gradient on HeroBlock */
+@utility text-hero-magic {
+  background-image: linear-gradient(to bottom right, #410cd9, #f68efe);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+/*
+ * Content-to-edge spacing tokens (used only by the @utility blocks below)
+ * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12472
+ */
+@theme {
+  --content-edge-150: 4px;
+  --content-edge-200: 5px;
+  --content-edge-250: 6px;
+  --content-edge-300: 7px;
+  --content-edge-350: 8px;
+  --content-edge-400: 10px;
+  --content-edge-450: 11px;
+  --content-edge-500: 12px;
+  --content-edge-550: 13px;
+  --content-edge-600: 14px;
+  --content-edge-650: 16px;
+  --content-edge-700: 17px;
+  --content-edge-750: 18px;
+  --content-edge-800: 19px;
+
+  --content-edge-spacious-200: 6px;
+  --content-edge-spacious-250: 8px;
+  --content-edge-spacious-300: 10px;
+  --content-edge-spacious-350: 11px;
+  --content-edge-spacious-400: 13px;
+  --content-edge-spacious-450: 14px;
+  --content-edge-spacious-500: 16px;
+  --content-edge-spacious-550: 18px;
+  --content-edge-spacious-600: 19px;
+  --content-edge-spacious-650: 21px;
+  --content-edge-spacious-700: 22px;
+  --content-edge-spacious-750: 24px;
+  --content-edge-spacious-800: 26px;
+
+  --icon-edge-200: 4px;
+  --icon-edge-250: 5px;
+  --icon-edge-300: 6px;
+  --icon-edge-350: 6px;
+  --icon-edge-400: 8px;
+  --icon-edge-450: 9px;
+  --icon-edge-500: 10px;
+  --icon-edge-550: 11px;
+  --icon-edge-600: 12px;
+  --icon-edge-650: 13px;
+  --icon-edge-700: 14px;
+  --icon-edge-750: 15px;
+  --icon-edge-800: 16px;
+
+  --icon-edge-spacious-200: 5px;
+  --icon-edge-spacious-250: 7px;
+  --icon-edge-spacious-300: 9px;
+  --icon-edge-spacious-350: 9px;
+  --icon-edge-spacious-400: 11px;
+  --icon-edge-spacious-450: 12px;
+  --icon-edge-spacious-500: 14px;
+  --icon-edge-spacious-550: 16px;
+  --icon-edge-spacious-600: 17px;
+  --icon-edge-spacious-650: 18px;
+  --icon-edge-spacious-700: 19px;
+  --icon-edge-spacious-750: 21px;
+  --icon-edge-spacious-800: 23px;
+}
+
+/* Content to edge (replaces src/plugins/content-to-edge.js) */
+@utility content-to-edge-pl-* {
+  padding-left: --value(--content-edge-*);
+}
+@utility content-to-edge-pr-* {
+  padding-right: --value(--content-edge-*);
+}
+@utility content-to-edge-px-* {
+  padding-inline: --value(--content-edge-*);
+}
+@utility content-to-edge-py-* {
+  padding-block: --value(--content-edge-*);
+}
+@utility content-to-edge-spacious-pl-* {
+  padding-left: --value(--content-edge-spacious-*);
+}
+@utility content-to-edge-spacious-pr-* {
+  padding-right: --value(--content-edge-spacious-*);
+}
+@utility content-to-edge-spacious-px-* {
+  padding-inline: --value(--content-edge-spacious-*);
+}
+
+/* Icon to edge (replaces src/plugins/icon-to-edge.js) */
+@utility icon-to-edge-pl-* {
+  padding-left: --value(--icon-edge-*);
+}
+@utility icon-to-edge-pr-* {
+  padding-right: --value(--icon-edge-*);
+}
+@utility icon-to-edge-py-* {
+  padding-block: --value(--icon-edge-*);
+}
+@utility icon-to-edge-spacious-pl-* {
+  padding-left: --value(--icon-edge-spacious-*);
+}
+@utility icon-to-edge-spacious-pr-* {
+  padding-right: --value(--icon-edge-spacious-*);
+}
+
+/*
+ * Size utilities (replaces src/plugins/size.js)
+ * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=16712-19165
+ *
+ * size-N: both width & height; size-w-N: width only; size-h-N: height only.
+ *
+ * NOTE: explicit px values (not @apply h-N w-N) — v4's built-in dynamic
+ * size-N utility (`calc(var(--spacing) * N)`) collides with @utility size-N
+ * by name, and the built-in wins when both produce the same CSS form.
+ * Using px values produces a different declaration that the cascade then
+ * resolves in our favor.
+ */
+@utility size-150 {
+  width: 12px;
+  height: 12px;
+}
+@utility size-200 {
+  width: 16px;
+  height: 16px;
+}
+@utility size-250 {
+  width: 20px;
+  height: 20px;
+}
+@utility size-300 {
+  width: 24px;
+  height: 24px;
+}
+@utility size-350 {
+  width: 28px;
+  height: 28px;
+}
+@utility size-400 {
+  width: 32px;
+  height: 32px;
+}
+@utility size-450 {
+  width: 36px;
+  height: 36px;
+}
+@utility size-500 {
+  width: 40px;
+  height: 40px;
+}
+@utility size-550 {
+  width: 44px;
+  height: 44px;
+}
+@utility size-600 {
+  width: 48px;
+  height: 48px;
+}
+@utility size-650 {
+  width: 52px;
+  height: 52px;
+}
+@utility size-700 {
+  width: 56px;
+  height: 56px;
+}
+@utility size-750 {
+  width: 60px;
+  height: 60px;
+}
+@utility size-800 {
+  width: 64px;
+  height: 64px;
+}
+@utility size-w-150 {
+  width: 12px;
+}
+@utility size-w-200 {
+  width: 16px;
+}
+@utility size-w-250 {
+  width: 20px;
+}
+@utility size-w-300 {
+  width: 24px;
+}
+@utility size-w-350 {
+  width: 28px;
+}
+@utility size-w-400 {
+  width: 32px;
+}
+@utility size-w-450 {
+  width: 36px;
+}
+@utility size-w-500 {
+  width: 40px;
+}
+@utility size-w-550 {
+  width: 44px;
+}
+@utility size-w-600 {
+  width: 48px;
+}
+@utility size-w-650 {
+  width: 52px;
+}
+@utility size-w-700 {
+  width: 56px;
+}
+@utility size-w-750 {
+  width: 60px;
+}
+@utility size-w-800 {
+  width: 64px;
+}
+@utility size-h-150 {
+  height: 12px;
+}
+@utility size-h-200 {
+  height: 16px;
+}
+@utility size-h-250 {
+  height: 20px;
+}
+@utility size-h-300 {
+  height: 24px;
+}
+@utility size-h-350 {
+  height: 28px;
+}
+@utility size-h-400 {
+  height: 32px;
+}
+@utility size-h-450 {
+  height: 36px;
+}
+@utility size-h-500 {
+  height: 40px;
+}
+@utility size-h-550 {
+  height: 44px;
+}
+@utility size-h-600 {
+  height: 48px;
+}
+@utility size-h-650 {
+  height: 52px;
+}
+@utility size-h-700 {
+  height: 56px;
+}
+@utility size-h-750 {
+  height: 60px;
+}
+@utility size-h-800 {
+  height: 64px;
+}
+
+/*
+ * Typography utility classes (replaces src/plugins/typography.js)
+ * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/?node-id=7217%3A13600
+ *
+ * Each class composes a text-size + font-weight + leading + optional
+ * letter-spacing. Used as text presets across the design system.
+ *
+ *   component-{300..900} — default / light / semi-strong / strong
+ *   body-{300..1000}     — default / light / semi-strong / strong
+ *   heading-{300..1200}  — default / light / thin
+ */
+@utility component-300 {
+  @apply text-300 font-500 leading-500;
+}
+@utility component-400 {
+  @apply text-400 font-500 leading-500;
+}
+@utility component-500 {
+  @apply text-500 font-500 leading-500;
+}
+@utility component-600 {
+  @apply text-600 font-500 leading-500;
+}
+@utility component-700 {
+  @apply text-700 font-500 leading-500;
+}
+@utility component-800 {
+  @apply text-800 font-500 leading-500;
+}
+@utility component-900 {
+  @apply text-900 font-500 leading-500 -tracking-[0.058px];
+}
+@utility component-light-300 {
+  @apply text-300 font-400 leading-500;
+}
+@utility component-light-400 {
+  @apply text-400 font-400 leading-500;
+}
+@utility component-light-500 {
+  @apply text-500 font-400 leading-500;
+}
+@utility component-light-600 {
+  @apply text-600 font-400 leading-500;
+}
+@utility component-light-700 {
+  @apply text-700 font-400 leading-500;
+}
+@utility component-light-800 {
+  @apply text-800 font-400 leading-500;
+}
+@utility component-light-900 {
+  @apply text-900 font-400 leading-500 -tracking-[0.0667px];
+}
+@utility component-semi-strong-300 {
+  @apply text-300 font-600 leading-500;
+}
+@utility component-semi-strong-400 {
+  @apply text-400 font-600 leading-500;
+}
+@utility component-semi-strong-500 {
+  @apply text-500 font-600 leading-500;
+}
+@utility component-semi-strong-600 {
+  @apply text-600 font-600 leading-500;
+}
+@utility component-semi-strong-700 {
+  @apply text-700 font-600 leading-500;
+}
+@utility component-semi-strong-800 {
+  @apply text-800 font-600 leading-500;
+}
+@utility component-semi-strong-900 {
+  @apply text-900 font-600 leading-500 -tracking-[0.0493px];
+}
+@utility component-strong-300 {
+  @apply text-300 font-700 leading-500;
+}
+@utility component-strong-400 {
+  @apply text-400 font-700 leading-500;
+}
+@utility component-strong-500 {
+  @apply text-500 font-700 leading-500;
+}
+@utility component-strong-600 {
+  @apply text-600 font-700 leading-500;
+}
+@utility component-strong-700 {
+  @apply text-700 font-700 leading-500;
+}
+@utility component-strong-800 {
+  @apply text-800 font-700 leading-500;
+}
+@utility component-strong-900 {
+  @apply text-900 font-700 leading-500 -tracking-[0.0377px];
+}
+@utility body-300 {
+  @apply text-300 font-500 leading-600;
+}
+@utility body-400 {
+  @apply text-400 font-500 leading-600;
+}
+@utility body-500 {
+  @apply text-500 font-500 leading-600;
+}
+@utility body-600 {
+  @apply text-600 font-500 leading-600;
+}
+@utility body-700 {
+  @apply text-700 font-500 leading-600;
+}
+@utility body-800 {
+  @apply text-800 font-500 leading-600;
+}
+@utility body-900 {
+  @apply text-900 font-500 leading-600;
+}
+@utility body-1000 {
+  @apply text-1000 font-500 leading-600;
+}
+@utility body-light-300 {
+  @apply text-300 font-400 leading-600;
+}
+@utility body-light-400 {
+  @apply text-400 font-400 leading-600;
+}
+@utility body-light-500 {
+  @apply text-500 font-400 leading-600;
+}
+@utility body-light-600 {
+  @apply text-600 font-400 leading-600;
+}
+@utility body-light-700 {
+  @apply text-700 font-400 leading-600;
+}
+@utility body-light-800 {
+  @apply text-800 font-400 leading-600;
+}
+@utility body-light-900 {
+  @apply text-900 font-400 leading-600 -tracking-[0.0667px];
+}
+@utility body-light-1000 {
+  @apply text-1000 font-400 leading-600 -tracking-[0.0203px];
+}
+@utility body-semi-strong-300 {
+  @apply text-300 font-600 leading-600;
+}
+@utility body-semi-strong-400 {
+  @apply text-400 font-600 leading-600;
+}
+@utility body-semi-strong-500 {
+  @apply text-500 font-600 leading-600;
+}
+@utility body-semi-strong-600 {
+  @apply text-600 font-600 leading-600;
+}
+@utility body-semi-strong-700 {
+  @apply text-700 font-600 leading-600;
+}
+@utility body-semi-strong-800 {
+  @apply text-800 font-600 leading-600;
+}
+@utility body-semi-strong-900 {
+  @apply text-900 font-600 leading-600;
+}
+@utility body-semi-strong-1000 {
+  @apply text-1000 font-600 leading-600;
+}
+@utility body-strong-300 {
+  @apply text-300 font-700 leading-600;
+}
+@utility body-strong-400 {
+  @apply text-400 font-700 leading-600;
+}
+@utility body-strong-500 {
+  @apply text-500 font-700 leading-600;
+}
+@utility body-strong-600 {
+  @apply text-600 font-700 leading-600;
+}
+@utility body-strong-700 {
+  @apply text-700 font-700 leading-600;
+}
+@utility body-strong-800 {
+  @apply text-800 font-700 leading-600;
+}
+@utility body-strong-900 {
+  @apply text-900 font-700 leading-600;
+}
+@utility body-strong-1000 {
+  @apply text-1000 font-700 leading-600;
+}
+@utility heading-thin-300 {
+  @apply text-500 font-500 leading-500;
+}
+@utility heading-thin-400 {
+  @apply text-600 font-500 leading-500;
+}
+@utility heading-thin-500 {
+  @apply text-700 font-500 leading-500;
+}
+@utility heading-thin-600 {
+  @apply text-800 font-500 leading-500;
+}
+@utility heading-thin-700 {
+  @apply text-900 font-500 leading-400 -tracking-[0.058px];
+}
+@utility heading-thin-800 {
+  @apply text-1000 font-500 leading-400 -tracking-[0.175px];
+}
+@utility heading-thin-900 {
+  @apply text-1100 font-500 leading-400 -tracking-[0.357px];
+}
+@utility heading-thin-1000 {
+  @apply text-1200 font-500 leading-400 -tracking-[0.625px];
+}
+@utility heading-thin-1100 {
+  @apply text-1300 font-500 leading-400 -tracking-[1.05px];
+}
+@utility heading-thin-1200 {
+  @apply text-1400 font-500 leading-400 -tracking-[1.692px];
+}
+@utility heading-light-300 {
+  @apply text-500 font-600 leading-500;
+}
+@utility heading-light-400 {
+  @apply text-600 font-600 leading-500;
+}
+@utility heading-light-500 {
+  @apply text-700 font-600 leading-500;
+}
+@utility heading-light-600 {
+  @apply text-800 font-600 leading-500;
+}
+@utility heading-light-700 {
+  @apply text-900 font-600 leading-400 -tracking-[0.0493px];
+}
+@utility heading-light-800 {
+  @apply text-1000 font-600 leading-400 -tracking-[0.147px];
+}
+@utility heading-light-900 {
+  @apply text-1100 font-600 leading-400 -tracking-[0.2982px];
+}
+@utility heading-light-1000 {
+  @apply text-1200 font-600 leading-400 -tracking-[0.52px];
+}
+@utility heading-light-1100 {
+  @apply text-1300 font-600 leading-400 -tracking-[0.876px];
+}
+@utility heading-light-1200 {
+  @apply text-1400 font-600 leading-400 -tracking-[1.4112px];
+}
+@utility heading-300 {
+  @apply text-500 font-700 leading-500;
+}
+@utility heading-400 {
+  @apply text-600 font-700 leading-500;
+}
+@utility heading-500 {
+  @apply text-700 font-700 leading-500;
+}
+@utility heading-600 {
+  @apply text-800 font-700 leading-500;
+}
+@utility heading-700 {
+  @apply text-900 font-700 leading-400 -tracking-[0.0377px];
+}
+@utility heading-800 {
+  @apply text-1000 font-700 leading-400 -tracking-[0.1155px];
+}
+@utility heading-900 {
+  @apply text-1100 font-700 leading-400 -tracking-[0.2394px];
+}
+@utility heading-1000 {
+  @apply text-1200 font-700 leading-400 -tracking-[0.415px];
+}
+@utility heading-1100 {
+  @apply text-1300 font-700 leading-400 -tracking-[0.702px];
+}
+@utility heading-1200 {
+  @apply text-1400 font-700 leading-400 -tracking-[1.1304px];
+}
+
+/*
+ * Form input resets (replaces src/plugins/forms.js)
+ */
+@layer base {
+  /* Remove up/down arrows on number inputs */
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+
+  /* Remove the X on search inputs */
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-decoration {
+    appearance: none;
+  }
+}