@patterninc/pattern-ui 0.0.0-main.20260929.db2f8e8fde0d

package/src/pattern-themed-tailwind.css

@@ -0,0 +1,1242 @@
+@import './fonts/geist/font-face.css';
+@import './fonts/wix-madefor-display/font-face.css';
+@import 'tailwindcss';
+@import './text-utilities.css';
+
+/* Configure dark mode for Tailwind v4 */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Pattern Next Design System - Figma Design Tokens */
+/*
+ * Primitive solid + alpha ramps live on :root, not @theme, so they stay available
+ * as `var(--color-gray-950)` / `var(--color-blue-alpha-24)` without generating
+ * utilities like `bg-gray-0`, `bg-blue-alpha-24`, or `text-blue-500`.
+ * https://tailwindcss.com/docs/theme ("Why @theme instead of :root?").
+ *
+ * Theme lockdown: only tokens re-declared in `@theme` become utilities.
+ * Arbitrary values (`p-[13px]`, `w-[64px]`, `bg-[#fff]`, …) are NOT blocked by
+ * `@theme` — ban those via lint.
+ */
+:root {
+  /* Primitive ramps — referenced by semantic tokens, not used as utilities */
+
+  /* Gray Scale - Used for base, border, text, and icon tokens */
+  --color-gray-0: oklch(1 0 0);
+  --color-gray-25: oklch(0.988 0 0);
+  --color-gray-50: oklch(0.976 0 0);
+  --color-gray-100: oklch(0.97 0 0);
+  --color-gray-200: oklch(0.94 0 0);
+  --color-gray-300: oklch(0.861 0 0);
+  --color-gray-400: oklch(0.715 0 0);
+  --color-gray-500: oklch(0.583 0 0);
+  --color-gray-600: oklch(0.475 0 0);
+  --color-gray-700: oklch(0.321 0 0);
+  --color-gray-800: oklch(0.269 0 0);
+  --color-gray-850: oklch(0.248 0 0);
+  --color-gray-900: oklch(0.226 0 0);
+  --color-gray-950: oklch(0.205 0 0);
+
+  /* Blue Scale - Used for primary state colors */
+  --color-blue-25: oklch(0.962 0.018 258.4);
+  --color-blue-50: oklch(0.955 0.024 238.4);
+  --color-blue-100: oklch(0.937 0.037 232.8);
+  --color-blue-200: oklch(0.882 0.068 235.2);
+  --color-blue-300: oklch(0.804 0.113 236.9);
+  --color-blue-400: oklch(0.73 0.157 239.2);
+  --color-blue-500: oklch(0.673 0.182 248.1);
+  --color-blue-600: oklch(0.609 0.164 248);
+  --color-blue-700: oklch(0.531 0.146 249);
+  --color-blue-800: oklch(0.443 0.119 248);
+  --color-blue-900: oklch(0.355 0.096 248.1);
+  --color-blue-950: oklch(0.278 0.068 243.6);
+
+  /* Red Scale - Used for negative state colors */
+  --color-red-25: oklch(0.982 0.009 17.3);
+  --color-red-50: oklch(0.966 0.015 17.4);
+  --color-red-100: oklch(0.921 0.036 17.8);
+  --color-red-200: oklch(0.867 0.061 18.4);
+  --color-red-300: oklch(0.782 0.113 19.9);
+  --color-red-400: oklch(0.712 0.165 22.2);
+  --color-red-500: oklch(0.642 0.206 26.8);
+  --color-red-600: oklch(0.552 0.197 26.6);
+  --color-red-700: oklch(0.469 0.165 26.4);
+  --color-red-800: oklch(0.377 0.131 26.2);
+  --color-red-900: oklch(0.311 0.104 25.7);
+  --color-red-950: oklch(0.274 0.092 25.8);
+
+  /* Green Scale - Used for positive state colors */
+  --color-green-25: oklch(0.984 0.01 164.9);
+  --color-green-50: oklch(0.966 0.023 165.9);
+  --color-green-100: oklch(0.924 0.05 165.5);
+  --color-green-200: oklch(0.88 0.091 164.6);
+  --color-green-300: oklch(0.814 0.122 163.3);
+  --color-green-400: oklch(0.745 0.145 161);
+  --color-green-500: oklch(0.73 0.177 154.5);
+  --color-green-600: oklch(0.648 0.153 155.7);
+  --color-green-700: oklch(0.541 0.118 158.9);
+  --color-green-800: oklch(0.469 0.098 160.9);
+  --color-green-900: oklch(0.394 0.079 162.4);
+  --color-green-950: oklch(0.328 0.065 164.3);
+
+  /* Purple Scale - Used for secondary state colors */
+  --color-purple-25: oklch(0.967 0.014 304.1);
+  --color-purple-50: oklch(0.955 0.027 304.8);
+  --color-purple-100: oklch(0.917 0.047 301.5);
+  --color-purple-200: oklch(0.843 0.09 298.8);
+  --color-purple-300: oklch(0.736 0.156 297.2);
+  --color-purple-400: oklch(0.623 0.23 295.3);
+  --color-purple-500: oklch(0.523 0.291 290.8);
+  --color-purple-600: oklch(0.466 0.254 293.2);
+  --color-purple-700: oklch(0.405 0.216 297.7);
+  --color-purple-800: oklch(0.328 0.17 302.6);
+  --color-purple-900: oklch(0.253 0.126 307.9);
+  --color-purple-950: oklch(0.209 0.103 309.7);
+
+  /* Indigo Scale - Used for tertiary state colors */
+  --color-indigo-25: oklch(0.97 0.015 282);
+  --color-indigo-50: oklch(0.944 0.027 281.3);
+  --color-indigo-100: oklch(0.902 0.048 280.2);
+  --color-indigo-200: oklch(0.831 0.086 280);
+  --color-indigo-300: oklch(0.726 0.144 279.1);
+  --color-indigo-400: oklch(0.61 0.213 276);
+  --color-indigo-500: oklch(0.546 0.252 273.5);
+  --color-indigo-600: oklch(0.479 0.221 273.7);
+  --color-indigo-700: oklch(0.412 0.187 274.2);
+  --color-indigo-800: oklch(0.341 0.151 274.4);
+  --color-indigo-900: oklch(0.269 0.114 275.5);
+  --color-indigo-950: oklch(0.208 0.084 276.3);
+
+  /* Orange Scale - Used for caution state colors */
+  --color-orange-25: oklch(0.979 0.01 67.7);
+  --color-orange-50: oklch(0.971 0.02 65.1);
+  --color-orange-100: oklch(0.954 0.037 75.2);
+  --color-orange-200: oklch(0.901 0.073 70.7);
+  --color-orange-300: oklch(0.812 0.127 62.1);
+  --color-orange-400: oklch(0.758 0.159 55.9);
+  --color-orange-500: oklch(0.705 0.187 47.6);
+  --color-orange-600: oklch(0.646 0.194 41.1);
+  --color-orange-700: oklch(0.553 0.174 38.4);
+  --color-orange-800: oklch(0.47 0.143 37.3);
+  --color-orange-900: oklch(0.408 0.116 38.2);
+  --color-orange-950: oklch(0.266 0.076 36.3);
+
+  /* Yellow Scale - Used for notice state colors */
+  --color-yellow-25: oklch(0.991 0.014 93);
+  --color-yellow-50: oklch(0.979 0.04 97.8);
+  --color-yellow-100: oklch(0.962 0.058 95.6);
+  --color-yellow-200: oklch(0.924 0.115 95.7);
+  --color-yellow-300: oklch(0.879 0.153 91.6);
+  --color-yellow-400: oklch(0.837 0.164 84.4);
+  --color-yellow-500: oklch(0.861 0.173 91.9);
+  --color-yellow-600: oklch(0.795 0.162 86);
+  --color-yellow-700: oklch(0.681 0.142 75.8);
+  --color-yellow-800: oklch(0.554 0.121 66.4);
+  --color-yellow-900: oklch(0.476 0.103 61.9);
+  --color-yellow-950: oklch(0.421 0.09 57.7);
+
+  /* Cyan Scale - Used for information state colors */
+  --color-cyan-25: oklch(0.979 0.019 208.8);
+  --color-cyan-50: oklch(0.964 0.032 209.6);
+  --color-cyan-100: oklch(0.949 0.044 210.5);
+  --color-cyan-200: oklch(0.909 0.081 210.6);
+  --color-cyan-300: oklch(0.856 0.124 212.2);
+  --color-cyan-400: oklch(0.794 0.142 217.7);
+  --color-cyan-500: oklch(0.695 0.124 217.1);
+  --color-cyan-600: oklch(0.627 0.112 217);
+  --color-cyan-700: oklch(0.55 0.098 216.3);
+  --color-cyan-800: oklch(0.451 0.08 216.4);
+  --color-cyan-900: oklch(0.36 0.064 215.5);
+  --color-cyan-950: oklch(0.266 0.047 213.5);
+
+  /* Stone Scale - Alternative neutral color option */
+  --color-stone-0: oklch(1 0 0);
+  --color-stone-25: oklch(0.994 0.006 84.6);
+  --color-stone-50: oklch(0.978 0.005 67.8);
+  --color-stone-100: oklch(0.962 0.006 75.4);
+  --color-stone-200: oklch(0.94 0.008 61.4);
+  --color-stone-300: oklch(0.861 0.01 62.6);
+  --color-stone-400: oklch(0.718 0.012 54.4);
+  --color-stone-500: oklch(0.593 0.014 56.1);
+  --color-stone-600: oklch(0.441 0.013 54.2);
+  --color-stone-700: oklch(0.335 0.013 57.8);
+  --color-stone-800: oklch(0.29 0.011 55.9);
+  --color-stone-850: oklch(0.266 0.012 55.8);
+  --color-stone-900: oklch(0.244 0.011 60.9);
+  --color-stone-950: oklch(0.221 0.01 67.3);
+
+  /* ---- Alpha/Transparency Variants ---- */
+
+  /* Blue Alpha Variants */
+  --color-blue-alpha-0: oklch(0.673 0.182 248.1 / 0);
+  --color-blue-alpha-10: oklch(0.673 0.182 248.1 / 0.1);
+  --color-blue-alpha-16: oklch(0.673 0.182 248.1 / 0.16);
+  --color-blue-alpha-24: oklch(0.673 0.182 248.1 / 0.24);
+  --color-blue-alpha-36: oklch(0.673 0.182 248.1 / 0.36);
+  --color-blue-alpha-48: oklch(0.673 0.182 248.1 / 0.48);
+
+  /* Purple Alpha Variants */
+  --color-purple-alpha-0: oklch(0.523 0.291 290.8 / 0);
+  --color-purple-alpha-10: oklch(0.523 0.291 290.8 / 0.1);
+  --color-purple-alpha-16: oklch(0.523 0.291 290.8 / 0.16);
+  --color-purple-alpha-24: oklch(0.523 0.291 290.8 / 0.24);
+  --color-purple-alpha-36: oklch(0.523 0.291 290.8 / 0.36);
+  --color-purple-alpha-48: oklch(0.523 0.291 290.8 / 0.48);
+
+  /* Indigo Alpha Variants */
+  --color-indigo-alpha-0: oklch(0.546 0.252 273.5 / 0);
+  --color-indigo-alpha-10: oklch(0.546 0.252 273.5 / 0.1);
+  --color-indigo-alpha-16: oklch(0.546 0.252 273.5 / 0.16);
+  --color-indigo-alpha-24: oklch(0.546 0.252 273.5 / 0.24);
+  --color-indigo-alpha-36: oklch(0.546 0.252 273.5 / 0.36);
+  --color-indigo-alpha-48: oklch(0.546 0.252 273.5 / 0.48);
+
+  /* Cyan Alpha Variants */
+  --color-cyan-alpha-0: oklch(0.695 0.124 217.1 / 0);
+  --color-cyan-alpha-10: oklch(0.695 0.124 217.1 / 0.1);
+  --color-cyan-alpha-16: oklch(0.695 0.124 217.1 / 0.16);
+  --color-cyan-alpha-24: oklch(0.695 0.124 217.1 / 0.24);
+  --color-cyan-alpha-36: oklch(0.695 0.124 217.1 / 0.36);
+  --color-cyan-alpha-48: oklch(0.695 0.124 217.1 / 0.48);
+
+  /* Red Alpha Variants */
+  --color-red-alpha-0: oklch(0.642 0.206 26.8 / 0);
+  --color-red-alpha-10: oklch(0.642 0.206 26.8 / 0.1);
+  --color-red-alpha-16: oklch(0.642 0.206 26.8 / 0.16);
+  --color-red-alpha-24: oklch(0.642 0.206 26.8 / 0.24);
+  --color-red-alpha-36: oklch(0.642 0.206 26.8 / 0.36);
+  --color-red-alpha-48: oklch(0.642 0.206 26.8 / 0.48);
+
+  /* Green Alpha Variants */
+  --color-green-alpha-0: oklch(0.73 0.177 154.5 / 0);
+  --color-green-alpha-10: oklch(0.73 0.177 154.5 / 0.1);
+  --color-green-alpha-16: oklch(0.73 0.177 154.5 / 0.16);
+  --color-green-alpha-24: oklch(0.73 0.177 154.5 / 0.24);
+  --color-green-alpha-36: oklch(0.73 0.177 154.5 / 0.36);
+  --color-green-alpha-48: oklch(0.73 0.177 154.5 / 0.48);
+
+  /* Orange Alpha Variants */
+  --color-orange-alpha-0: oklch(0.705 0.187 47.6 / 0);
+  --color-orange-alpha-10: oklch(0.705 0.187 47.6 / 0.1);
+  --color-orange-alpha-16: oklch(0.705 0.187 47.6 / 0.16);
+  --color-orange-alpha-24: oklch(0.705 0.187 47.6 / 0.24);
+  --color-orange-alpha-36: oklch(0.705 0.187 47.6 / 0.36);
+  --color-orange-alpha-48: oklch(0.705 0.187 47.6 / 0.48);
+
+  /* Yellow Alpha Variants */
+  --color-yellow-alpha-0: oklch(0.861 0.173 91.9 / 0);
+  --color-yellow-alpha-10: oklch(0.861 0.173 91.9 / 0.1);
+  --color-yellow-alpha-16: oklch(0.861 0.173 91.9 / 0.16);
+  --color-yellow-alpha-24: oklch(0.861 0.173 91.9 / 0.24);
+  --color-yellow-alpha-36: oklch(0.861 0.173 91.9 / 0.36);
+  --color-yellow-alpha-48: oklch(0.861 0.173 91.9 / 0.48);
+
+  /* Gray Alpha Variants */
+  --color-gray-alpha-0: oklch(0.583 0 0 / 0);
+  --color-gray-alpha-10: oklch(0.583 0 0 / 0.1);
+  --color-gray-alpha-16: oklch(0.583 0 0 / 0.16);
+  --color-gray-alpha-24: oklch(0.583 0 0 / 0.24);
+  --color-gray-alpha-36: oklch(0.583 0 0 / 0.36);
+  --color-gray-alpha-48: oklch(0.583 0 0 / 0.48);
+
+  /* Stone Alpha Variants */
+  --color-stone-alpha-0: oklch(0.593 0.014 56.1 / 0);
+  --color-stone-alpha-10: oklch(0.593 0.014 56.1 / 0.1);
+  --color-stone-alpha-16: oklch(0.593 0.014 56.1 / 0.16);
+  --color-stone-alpha-24: oklch(0.593 0.014 56.1 / 0.24);
+  --color-stone-alpha-36: oklch(0.593 0.014 56.1 / 0.36);
+  --color-stone-alpha-48: oklch(0.593 0.014 56.1 / 0.48);
+
+  /* White Alpha Variants */
+  --color-white-alpha-0: oklch(1 0 0 / 0.0001);
+  --color-white-alpha-4: oklch(1 0 0 / 0.04);
+  --color-white-alpha-8: oklch(1 0 0 / 0.08);
+  --color-white-alpha-16: oklch(1 0 0 / 0.16);
+  --color-white-alpha-24: oklch(1 0 0 / 0.24);
+  --color-white-alpha-36: oklch(1 0 0 / 0.36);
+  --color-white-alpha-48: oklch(1 0 0 / 0.48);
+  --color-white-alpha-56: oklch(1 0 0 / 0.56);
+  --color-white-alpha-64: oklch(1 0 0 / 0.64);
+  --color-white-alpha-72: oklch(1 0 0 / 0.72);
+  --color-white-alpha-80: oklch(1 0 0 / 0.8);
+  --color-white-alpha-88: oklch(1 0 0 / 0.88);
+  --color-white-alpha-96: oklch(1 0 0 / 0.96);
+  --color-white-alpha-100: oklch(1 0 0 / 0.999);
+
+  /* Black Alpha Variants */
+  --color-black-alpha-0: oklch(0.226 0 0 / 0.0001);
+  --color-black-alpha-4: oklch(0.226 0 0 / 0.04);
+  --color-black-alpha-8: oklch(0.226 0 0 / 0.08);
+  --color-black-alpha-16: oklch(0.226 0 0 / 0.16);
+  --color-black-alpha-24: oklch(0.226 0 0 / 0.24);
+  --color-black-alpha-36: oklch(0.226 0 0 / 0.36);
+  --color-black-alpha-48: oklch(0.226 0 0 / 0.48);
+  --color-black-alpha-56: oklch(0.226 0 0 / 0.56);
+  --color-black-alpha-64: oklch(0.226 0 0 / 0.64);
+  --color-black-alpha-72: oklch(0.226 0 0 / 0.72);
+  --color-black-alpha-80: oklch(0.226 0 0 / 0.8);
+  --color-black-alpha-88: oklch(0.226 0 0 / 0.88);
+  --color-black-alpha-96: oklch(0.226 0 0 / 0.96);
+  --color-black-alpha-100: oklch(0.226 0 0 / 0.999);
+}
+
+@theme {
+  /* Font family variables - source of truth */
+  --font-family-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono: 'Geist Mono', ui-monospace, monospace;
+  --font-family-brand: 'Wix Madefor Display', ui-sans-serif, system-ui, sans-serif;
+
+  /* Tailwind utility mappings - reference font-family variables */
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+
+  /* ---- Color lockdown ----
+   * Primitive solid/alpha ramps live in :root (CSS vars only). Wipe default
+   * Tailwind --color-* utilities, keep transparent/current/inherit, then
+   * re-declare semantic tokens only (no bg-gray-500 / bg-blue-alpha-24). */
+  --color-*: initial;
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-inherit: inherit;
+
+  /* ---- Design System Tokens ---- */
+
+  /* Base Colors - Light Mode */
+  --color-base-strong: var(--color-gray-950);
+  --color-base-surface: var(--color-gray-850);
+  --color-base-sub: var(--color-gray-300);
+  --color-base-soft: var(--color-gray-200);
+  --color-base-weak: var(--color-gray-50);
+  --color-base-inverse: var(--color-gray-0);
+
+  /* Text Colors */
+  --color-text-strong: var(--color-gray-950);
+  --color-text-sub: var(--color-gray-600);
+  --color-text-soft: var(--color-gray-400);
+  --color-text-disabled: var(--color-gray-300);
+  --color-text-inverse: var(--color-gray-0);
+
+  /* Icon Colors */
+  --color-icon-strong: var(--color-gray-950);
+  --color-icon-sub: var(--color-gray-600);
+  --color-icon-soft: var(--color-gray-400);
+  --color-icon-disabled: var(--color-gray-300);
+  --color-icon-inverse: var(--color-gray-0);
+
+  /* Border Colors */
+  --color-border-strong: var(--color-gray-950);
+  --color-border-sub: var(--color-gray-300);
+  --color-border-soft: var(--color-gray-200);
+  --color-border-inverse: var(--color-gray-0);
+
+  /* State Colors - Primary */
+  --color-primary-darker: var(--color-blue-900);
+  --color-primary-dark: var(--color-blue-700);
+  --color-primary-base: var(--color-blue-500);
+  --color-primary-light: var(--color-blue-200);
+  --color-primary-lighter: var(--color-blue-50);
+
+  /* State Colors - Secondary */
+  --color-secondary-darker: var(--color-purple-900);
+  --color-secondary-dark: var(--color-purple-700);
+  --color-secondary-base: var(--color-purple-500);
+  --color-secondary-light: var(--color-purple-200);
+  --color-secondary-lighter: var(--color-purple-50);
+
+  /* State Colors - Tertiary */
+  --color-tertiary-darker: var(--color-indigo-900);
+  --color-tertiary-dark: var(--color-indigo-700);
+  --color-tertiary-base: var(--color-indigo-500);
+  --color-tertiary-light: var(--color-indigo-200);
+  --color-tertiary-lighter: var(--color-indigo-50);
+
+  /* State Colors - Negative */
+  --color-negative-darker: var(--color-red-900);
+  --color-negative-dark: var(--color-red-700);
+  --color-negative-base: var(--color-red-500);
+  --color-negative-light: var(--color-red-200);
+  --color-negative-lighter: var(--color-red-50);
+
+  /* State Colors - Positive */
+  --color-positive-darker: var(--color-green-900);
+  --color-positive-dark: var(--color-green-700);
+  --color-positive-base: var(--color-green-500);
+  --color-positive-light: var(--color-green-200);
+  --color-positive-lighter: var(--color-green-50);
+
+  /* State Colors - Caution */
+  --color-caution-darker: var(--color-orange-900);
+  --color-caution-dark: var(--color-orange-700);
+  --color-caution-base: var(--color-orange-500);
+  --color-caution-light: var(--color-orange-200);
+  --color-caution-lighter: var(--color-orange-50);
+
+  /* State Colors - Notice */
+  --color-notice-darker: var(--color-yellow-900);
+  --color-notice-dark: var(--color-yellow-700);
+  --color-notice-base: var(--color-yellow-500);
+  --color-notice-light: var(--color-yellow-200);
+  --color-notice-lighter: var(--color-yellow-50);
+
+  /* State Colors - Information */
+  --color-information-darker: var(--color-cyan-900);
+  --color-information-dark: var(--color-cyan-700);
+  --color-information-base: var(--color-cyan-500);
+  --color-information-light: var(--color-cyan-200);
+  --color-information-lighter: var(--color-cyan-50);
+
+  /* State Colors - Neutral */
+  --color-neutral-darker: var(--color-gray-900);
+  --color-neutral-dark: var(--color-gray-700);
+  --color-neutral-base: var(--color-gray-500);
+  --color-neutral-light: var(--color-gray-200);
+  --color-neutral-lighter: var(--color-gray-50);
+
+  /* Depth Tokens - For layering and elevation effects */
+  --color-depth-white-0: var(--color-white-alpha-0);
+  --color-depth-white-4: var(--color-white-alpha-4);
+  --color-depth-white-8: var(--color-white-alpha-8);
+  --color-depth-white-16: var(--color-white-alpha-16);
+  --color-depth-white-24: var(--color-white-alpha-24);
+  --color-depth-white-36: var(--color-white-alpha-36);
+  --color-depth-white-48: var(--color-white-alpha-48);
+  --color-depth-white-56: var(--color-white-alpha-56);
+  --color-depth-white-64: var(--color-white-alpha-64);
+  --color-depth-white-72: var(--color-white-alpha-72);
+  --color-depth-white-80: var(--color-white-alpha-80);
+  --color-depth-white-88: var(--color-white-alpha-88);
+  --color-depth-white-96: var(--color-white-alpha-96);
+  --color-depth-white-100: var(--color-white-alpha-100);
+
+  --color-depth-black-0: var(--color-black-alpha-0);
+  --color-depth-black-4: var(--color-black-alpha-4);
+  --color-depth-black-8: var(--color-black-alpha-8);
+  --color-depth-black-16: var(--color-black-alpha-16);
+  --color-depth-black-24: var(--color-black-alpha-24);
+  --color-depth-black-36: var(--color-black-alpha-36);
+  --color-depth-black-48: var(--color-black-alpha-48);
+  --color-depth-black-56: var(--color-black-alpha-56);
+  --color-depth-black-64: var(--color-black-alpha-64);
+  --color-depth-black-72: var(--color-black-alpha-72);
+  --color-depth-black-80: var(--color-black-alpha-80);
+  --color-depth-black-88: var(--color-black-alpha-88);
+  --color-depth-black-96: var(--color-black-alpha-96);
+  --color-depth-black-100: var(--color-black-alpha-100);
+
+  --color-depth-primary-0: var(--color-blue-alpha-0);
+  --color-depth-primary-10: var(--color-blue-alpha-10);
+  --color-depth-primary-16: var(--color-blue-alpha-16);
+  --color-depth-primary-24: var(--color-blue-alpha-24);
+  --color-depth-primary-36: var(--color-blue-alpha-36);
+  --color-depth-primary-48: var(--color-blue-alpha-48);
+
+  --color-depth-secondary-0: var(--color-purple-alpha-0);
+  --color-depth-secondary-10: var(--color-purple-alpha-10);
+  --color-depth-secondary-16: var(--color-purple-alpha-16);
+  --color-depth-secondary-24: var(--color-purple-alpha-24);
+  --color-depth-secondary-36: var(--color-purple-alpha-36);
+  --color-depth-secondary-48: var(--color-purple-alpha-48);
+
+  --color-depth-tertiary-0: var(--color-indigo-alpha-0);
+  --color-depth-tertiary-10: var(--color-indigo-alpha-10);
+  --color-depth-tertiary-16: var(--color-indigo-alpha-16);
+  --color-depth-tertiary-24: var(--color-indigo-alpha-24);
+  --color-depth-tertiary-36: var(--color-indigo-alpha-36);
+  --color-depth-tertiary-48: var(--color-indigo-alpha-48);
+
+  --color-depth-negative-0: var(--color-red-alpha-0);
+  --color-depth-negative-10: var(--color-red-alpha-10);
+  --color-depth-negative-16: var(--color-red-alpha-16);
+  --color-depth-negative-24: var(--color-red-alpha-24);
+  --color-depth-negative-36: var(--color-red-alpha-36);
+  --color-depth-negative-48: var(--color-red-alpha-48);
+
+  --color-depth-positive-0: var(--color-green-alpha-0);
+  --color-depth-positive-10: var(--color-green-alpha-10);
+  --color-depth-positive-16: var(--color-green-alpha-16);
+  --color-depth-positive-24: var(--color-green-alpha-24);
+  --color-depth-positive-36: var(--color-green-alpha-36);
+  --color-depth-positive-48: var(--color-green-alpha-48);
+
+  --color-depth-caution-0: var(--color-orange-alpha-0);
+  --color-depth-caution-10: var(--color-orange-alpha-10);
+  --color-depth-caution-16: var(--color-orange-alpha-16);
+  --color-depth-caution-24: var(--color-orange-alpha-24);
+  --color-depth-caution-36: var(--color-orange-alpha-36);
+  --color-depth-caution-48: var(--color-orange-alpha-48);
+
+  --color-depth-notice-0: var(--color-yellow-alpha-0);
+  --color-depth-notice-10: var(--color-yellow-alpha-10);
+  --color-depth-notice-16: var(--color-yellow-alpha-16);
+  --color-depth-notice-24: var(--color-yellow-alpha-24);
+  --color-depth-notice-36: var(--color-yellow-alpha-36);
+  --color-depth-notice-48: var(--color-yellow-alpha-48);
+
+  --color-depth-information-0: var(--color-cyan-alpha-0);
+  --color-depth-information-10: var(--color-cyan-alpha-10);
+  --color-depth-information-16: var(--color-cyan-alpha-16);
+  --color-depth-information-24: var(--color-cyan-alpha-24);
+  --color-depth-information-36: var(--color-cyan-alpha-36);
+  --color-depth-information-48: var(--color-cyan-alpha-48);
+
+  /* Overlay Tokens - For modal backgrounds and overlays */
+  --color-overlay-stone: var(--color-stone-alpha-36);
+  --color-overlay-gray: var(--color-gray-alpha-36);
+
+  /* Float Tokens - For floating surfaces */
+  --color-float-strong: var(--color-gray-0);
+  --color-float-inverse: var(--color-gray-950);
+
+  /* Static Tokens - Colors that don't change with theme */
+  --color-static-black: var(--color-gray-950);
+  --color-static-white: var(--color-gray-0);
+
+  /* Spacing Scale - From Design System */
+  /* --spacing-0: 0px;
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-6: 6px;
+  --spacing-8: 8px;
+  --spacing-10: 10px;
+  --spacing-12: 12px;
+  --spacing-14: 14px;
+  --spacing-16: 16px;
+  --spacing-20: 20px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-40: 40px;
+  --spacing-48: 48px; */
+
+  /* ---- Radius lockdown ----
+   * Wipe default TW radius scale (incl. rounded-4xl), then re-declare the
+   * Figma Radius steps + Pattern extras 10/20/28. Bare `--radius` keeps
+   * unprefixed `rounded` working (maps to sm / 4px). */
+  --radius-*: initial;
+  --radius: 4px;
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-full: 9999px;
+  --radius-10: 10px;
+  --radius-20: 20px;
+  --radius-28: 28px;
+
+  /* Font sizes - the two Figma `Type/Size` steps with no Tailwind equivalent.
+   * 12→text-xs, 14→sm, 16→base, 18→lg, 20→xl, 24→2xl, 30→3xl, 36→4xl,
+   * 48→5xl, 60→6xl, 72→7xl all map 1:1. Line heights are deliberately omitted
+   * so these compose with `leading-*`; a numeric `--leading-*` namespace is not
+   * declared because it would shadow Tailwind's spacing-derived `leading-<n>`
+   * scale (which already covers every Figma `Type/Line` value). */
+  --text-11: 11px;
+  --text-13: 13px;
+
+  /* Letter spacing - Figma `Type/Tracking`. Values are px to match Figma;
+   * Tailwind's defaults are em, so `wide`/`wider` are intentionally overridden
+   * so the design-system values are what the utilities produce. */
+  --tracking-closer: -1px;
+  --tracking-close: -0.5px;
+  --tracking-base: 0px;
+  --tracking-wide: 0.5px;
+  --tracking-wider: 1px;
+
+  /* ---- Shadows - Figma effect styles ----
+   * Named `{group}-{step}` after the Figma paths (Shadows/Normal/X-Small →
+   * shadow-normal-xs). Tailwind default shadows (shadow / sm / md / lg / xl /
+   * 2xl / …) stay available. Pattern tokens below are
+   * additive. Figma lists effects top-layer-first and box-shadow paints the
+   * first entry on top, so ring and highlight layers come first below.
+   * Figma defines no dark-mode variants for effect styles, so neither do these. */
+
+  /* Shadows/Normal */
+  --shadow-normal-xs: 0 1px 2px 0 var(--color-black-alpha-4);
+  /* Figma color #0E121B at 10% - not on any primitive ramp */
+  --shadow-normal-md: 0 16px 32px -12px rgb(14 18 27 / 0.1);
+
+  /* Shadows/Card - canvas and depth use Figma color #100C0C, not on any ramp */
+  --shadow-card-canvas:
+    0 0 2px 0 rgb(16 12 12 / 0.1), 0 1px 2px 0 rgb(16 12 12 / 0.1),
+    0 8px 12px -4px rgb(16 12 12 / 0.08);
+  --shadow-card-outline:
+    0 0 1px 0 var(--color-gray-alpha-24), 0 3px 8px -1px var(--color-gray-alpha-10);
+  --shadow-card-simple: 0 1px 2px 0 var(--color-black-alpha-4);
+  /* Shadows/Card/Depth is card-canvas plus a background blur, which box-shadow
+   * cannot express - pair this with `backdrop-blur-sm`. */
+  --shadow-card-depth: var(--shadow-card-canvas);
+
+  /* Shadows/Depth - every layer is gray-700 at an alpha with no token on the ramp */
+  --shadow-depth-xs:
+    inset 0 -1px 1px -0.5px oklch(0.321 0 0 / 0.06), 0 0 0 1px oklch(0.321 0 0 / 0.04),
+    0 1px 2px 0 oklch(0.321 0 0 / 0.04), 0 2px 4px 0 oklch(0.321 0 0 / 0.04),
+    0 4px 8px -2px oklch(0.321 0 0 / 0.06);
+  --shadow-depth-sm:
+    inset 0 -0.5px 0.5px 0 oklch(0.321 0 0 / 0.08), 0 0 0 1px oklch(0.321 0 0 / 0.04),
+    0 1px 3px -1.5px oklch(0.321 0 0 / 0.16), 0 5px 5px -2.5px oklch(0.321 0 0 / 0.08),
+    0 12px 6px -6px oklch(0.321 0 0 / 0.02), 0 16px 8px -8px oklch(0.321 0 0 / 0.01);
+  --shadow-depth-md:
+    inset 0 -1px 1px -0.5px oklch(0.321 0 0 / 0.06), 0 0 0 1px oklch(0.321 0 0 / 0.04),
+    0 1px 1px 0.5px oklch(0.321 0 0 / 0.04), 0 3px 3px -1.5px oklch(0.321 0 0 / 0.02),
+    0 6px 6px -3px oklch(0.321 0 0 / 0.04), 0 12px 12px -6px oklch(0.321 0 0 / 0.04),
+    0 24px 24px -12px oklch(0.321 0 0 / 0.04), 0 48px 48px -24px oklch(0.321 0 0 / 0.04);
+  --shadow-depth-lg:
+    inset 0 -1px 1px -0.5px oklch(0.321 0 0 / 0.06), 0 0 0 1px oklch(0.321 0 0 / 0.04),
+    0 1px 1px 0.5px oklch(0.321 0 0 / 0.04), 0 3px 3px -1.5px oklch(0.321 0 0 / 0.02),
+    0 6px 6px -3px oklch(0.321 0 0 / 0.04), 0 12px 12px -6px oklch(0.321 0 0 / 0.04),
+    0 24px 24px -12px oklch(0.321 0 0 / 0.04), 0 48px 48px -24px oklch(0.321 0 0 / 0.04),
+    0 96px 96px -32px oklch(0.321 0 0 / 0.06);
+
+  /* Outline - focus rings. Figma specifies the inner 2px ring as white;
+   * base-inverse resolves to white in light mode and adapts in dark. */
+  --shadow-outline-primary:
+    0 0 0 2px var(--color-base-inverse), 0 0 0 3px var(--color-primary-base);
+  --shadow-outline-secondary:
+    0 0 0 2px var(--color-base-inverse), 0 0 0 3px var(--color-secondary-base);
+  --shadow-outline-positive:
+    0 0 0 2px var(--color-base-inverse), 0 0 0 3px var(--color-positive-base);
+  --shadow-outline-negative:
+    0 0 0 2px var(--color-base-inverse), 0 0 0 3px var(--color-negative-base);
+  --shadow-outline-caution:
+    0 0 0 2px var(--color-base-inverse), 0 0 0 3px var(--color-caution-base);
+
+  /* Button - 1px colored ring, drop shadow, plus a top inner highlight on
+   * secondary and caution */
+  --shadow-button-primary:
+    0 0 0 1px var(--color-primary-base), 0 1px 2px 0 var(--color-black-alpha-24);
+  --shadow-button-secondary:
+    inset 0 -1px 0 0 var(--color-white-alpha-36), 0 0 0 1px var(--color-secondary-base),
+    0 1px 2px 0 var(--color-black-alpha-24);
+  --shadow-button-caution:
+    inset 0 -1px 0 0 var(--color-white-alpha-36), 0 0 0 1px var(--color-caution-base),
+    0 1px 2px 0 var(--color-black-alpha-24);
+
+  /* Blur - Figma's `Effects` collection (0/4/8/12/16/24/40/64) and every
+   * Blur/* effect style already match Tailwind's default --blur-* scale
+   * exactly: None→blur-none, Extra Small→xs, Small→sm, Medium→md, Large→lg,
+   * Extra Large→xl, Double Large→2xl, Triple Large→3xl. Blur/Layer uses
+   * `blur-*`; Blur/Background and Blur/Progressive use `backdrop-blur-*`.
+   * No tokens are declared because none are missing. */
+
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-skeleton-shimmer: skeleton-shimmer 1.6s linear infinite;
+  --animate-agent-pulse: agent-pulse 1.2s ease-in-out infinite;
+
+  @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;
+    }
+  }
+
+  @keyframes skeleton-shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
+  @keyframes agent-pulse {
+    0%,
+    100% {
+      opacity: 0.35;
+    }
+
+    50% {
+      opacity: 1;
+    }
+  }
+
+  /* Opacity 0.01 (not 0) so backdrop-filter is sampled before the comment Tag fades in. */
+  @keyframes pdp-annotation-in {
+    from {
+      opacity: 0.01;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
+/*
+ * image-shimmer — static surface + sweep gradient for image loading slots.
+ * Pairs with animate-skeleton-shimmer; background-position is the only
+ * property that changes so the animation is compositor-only (no repaints).
+ */
+@utility image-shimmer {
+  background-image: linear-gradient(
+    110deg,
+    var(--color-depth-black-4) 20%,
+    var(--color-depth-black-8) 40%,
+    var(--color-depth-black-4) 60%
+  );
+  background-size: 200% 100%;
+  background-color: var(--color-depth-black-4);
+  will-change: background-position;
+}
+
+/*
+ * PDP comment Tag fade. Stays at opacity 0.01 until `[data-annotation-visible]` so backdrop-filter
+ * is sampled during camera zoom, then animates to 1. Non-Tag annotation nodes skip this.
+ */
+@utility pdp-annotation-box {
+  & [data-slot='tag'] {
+    opacity: 0.01;
+    will-change: opacity, backdrop-filter;
+  }
+
+  &[data-annotation-visible] [data-slot='tag'] {
+    animation: pdp-annotation-in 0.3s ease forwards;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-skeleton-shimmer {
+    animation: none;
+    background-position: 0 0;
+  }
+
+  .animate-agent-pulse {
+    animation: none;
+    opacity: 1;
+  }
+
+  .pdp-annotation-box[data-annotation-visible] [data-slot='tag'] {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+/* Dark Mode Theme Overrides */
+/* The Pulse always renders as a dark surface, so sileo's viewport opts into the
+   dark token set regardless of the app theme (sileo.css adds a couple of
+   Pulse-specific overrides on top). */
+.dark,
+[data-sileo-viewport] {
+  /* Native UA chrome (selection, scrollbars, form controls) follows the visual theme.
+     Without this, browsers keep the light-mode accent (system blue) for ::selection
+     even though surfaces are near-black. */
+  color-scheme: dark;
+
+  /* Base Colors - Dark Mode */
+  --color-base-strong: var(--color-gray-0);
+  --color-base-surface: var(--color-gray-200);
+  --color-base-sub: var(--color-gray-600);
+  --color-base-soft: var(--color-gray-700);
+  --color-base-weak: var(--color-gray-850);
+  --color-base-inverse: var(--color-gray-950);
+
+  /* Semantic Color Tokens - Dark Mode */
+  --color-text-strong: var(--color-gray-100);
+  --color-text-sub: var(--color-gray-300);
+  --color-text-soft: var(--color-gray-500);
+  --color-text-disabled: var(--color-gray-600);
+  --color-text-inverse: var(--color-gray-950);
+
+  --color-icon-strong: var(--color-gray-0);
+  --color-icon-sub: var(--color-gray-300);
+  --color-icon-soft: var(--color-gray-500);
+  --color-icon-disabled: var(--color-gray-600);
+  --color-icon-inverse: var(--color-gray-950);
+
+  --color-border-strong: var(--color-gray-0);
+  --color-border-sub: var(--color-gray-600);
+  --color-border-soft: var(--color-gray-850);
+  --color-border-inverse: var(--color-gray-950);
+
+  /* State Colors - Dark Mode (using lighter shades for better contrast) */
+  --color-primary-darker: var(--color-blue-200);
+  --color-primary-dark: var(--color-blue-300);
+  --color-primary-base: var(--color-blue-500);
+  --color-primary-light: var(--color-blue-alpha-24);
+  --color-primary-lighter: var(--color-blue-alpha-16);
+
+  --color-secondary-darker: var(--color-purple-200);
+  --color-secondary-dark: var(--color-purple-300);
+  --color-secondary-base: var(--color-purple-400);
+  --color-secondary-light: var(--color-purple-alpha-24);
+  --color-secondary-lighter: var(--color-purple-alpha-16);
+
+  --color-tertiary-darker: var(--color-indigo-200);
+  --color-tertiary-dark: var(--color-indigo-300);
+  --color-tertiary-base: var(--color-indigo-500);
+  --color-tertiary-light: var(--color-indigo-alpha-24);
+  --color-tertiary-lighter: var(--color-indigo-alpha-16);
+
+  --color-negative-darker: var(--color-red-200);
+  --color-negative-dark: var(--color-red-300);
+  --color-negative-base: var(--color-red-400);
+  --color-negative-light: var(--color-red-alpha-24);
+  --color-negative-lighter: var(--color-red-alpha-16);
+
+  --color-positive-darker: var(--color-green-200);
+  --color-positive-dark: var(--color-green-300);
+  --color-positive-base: var(--color-green-400);
+  --color-positive-light: var(--color-green-alpha-24);
+  --color-positive-lighter: var(--color-green-alpha-16);
+
+  --color-caution-darker: var(--color-orange-200);
+  --color-caution-dark: var(--color-orange-300);
+  --color-caution-base: var(--color-orange-400);
+  --color-caution-light: var(--color-orange-alpha-24);
+  --color-caution-lighter: var(--color-orange-alpha-16);
+
+  --color-notice-darker: var(--color-yellow-200);
+  --color-notice-dark: var(--color-yellow-300);
+  --color-notice-base: var(--color-yellow-400);
+  --color-notice-light: var(--color-yellow-alpha-24);
+  --color-notice-lighter: var(--color-yellow-alpha-16);
+
+  --color-information-darker: var(--color-cyan-200);
+  --color-information-dark: var(--color-cyan-300);
+  --color-information-base: var(--color-cyan-400);
+  --color-information-light: var(--color-cyan-alpha-24);
+  --color-information-lighter: var(--color-cyan-alpha-16);
+
+  --color-neutral-darker: var(--color-gray-200);
+  --color-neutral-dark: var(--color-gray-300);
+  --color-neutral-base: var(--color-gray-400);
+  --color-neutral-light: var(--color-stone-alpha-24);
+  --color-neutral-lighter: var(--color-stone-alpha-16);
+
+  /* Depth Tokens - Dark Mode (inverted) */
+  --color-depth-white-0: var(--color-black-alpha-0);
+  --color-depth-white-4: var(--color-black-alpha-4);
+  --color-depth-white-8: var(--color-black-alpha-8);
+  --color-depth-white-16: var(--color-black-alpha-16);
+  --color-depth-white-24: var(--color-black-alpha-24);
+  --color-depth-white-36: var(--color-black-alpha-48);
+  --color-depth-white-48: var(--color-black-alpha-56);
+  --color-depth-white-56: var(--color-black-alpha-64);
+  --color-depth-white-64: var(--color-black-alpha-72);
+  --color-depth-white-72: var(--color-black-alpha-72);
+  --color-depth-white-80: var(--color-black-alpha-80);
+  --color-depth-white-88: var(--color-black-alpha-88);
+  --color-depth-white-96: var(--color-black-alpha-96);
+  --color-depth-white-100: var(--color-black-alpha-100);
+
+  --color-depth-black-0: var(--color-white-alpha-0);
+  --color-depth-black-4: var(--color-white-alpha-4);
+  --color-depth-black-8: var(--color-white-alpha-8);
+  --color-depth-black-16: var(--color-white-alpha-16);
+  --color-depth-black-24: var(--color-white-alpha-24);
+  --color-depth-black-36: var(--color-white-alpha-36);
+  --color-depth-black-48: var(--color-white-alpha-48);
+  --color-depth-black-56: var(--color-white-alpha-56);
+  --color-depth-black-64: var(--color-white-alpha-64);
+  --color-depth-black-72: var(--color-white-alpha-72);
+  --color-depth-black-80: var(--color-white-alpha-80);
+  --color-depth-black-88: var(--color-white-alpha-88);
+  --color-depth-black-96: var(--color-white-alpha-96);
+  --color-depth-black-100: var(--color-white-alpha-100);
+
+  /* Overlay Tokens - Dark Mode */
+  --color-overlay-stone: var(--color-black-alpha-64);
+  --color-overlay-gray: var(--color-black-alpha-64);
+
+  /* Float Tokens - Dark Mode */
+  --color-float-strong: var(--color-gray-850);
+  --color-float-inverse: var(--color-gray-100);
+
+  /* Table sticky header weak - opaque equivalent of depth-black-4 (white-alpha-4) on base-weak → #292929 */
+  .table-header-bg-weak {
+    background: color-mix(in oklch, var(--color-gray-0) 4%, var(--color-base-weak));
+  }
+
+  /* Table sticky header inverse - opaque header on inverse (light #F6F6F6, dark #202020) */
+  .table-header-bg-inverse {
+    background: #202020;
+  }
+}
+
+/* Dashed border: SVG background (fill=none, stroke only). depth-black-8 (light) / depth-white-8 (dark).
+ * Semantic (Tailwind scale): dashed-border-xs | sm | md | lg | xl | 2xl | 3xl | 4xl.
+ * Explicit (pixel): dashed-border-radius-6 | 10 | 12 | 16 | 20 | 24.
+ * Default .dashed-border = 20px. */
+.dashed-border {
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  border-radius: var(--radius-20);
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+/* Semantic: Tailwind scale */
+.dashed-border-xs {
+  border-radius: 2px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-xs {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-sm {
+  border-radius: 4px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-sm {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-md {
+  border-radius: 6px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-md {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-lg {
+  border-radius: 8px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-lg {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-xl {
+  border-radius: 12px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-xl {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-2xl {
+  border-radius: 16px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-2xl {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-3xl {
+  border-radius: 24px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-3xl {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-4xl {
+  border-radius: 32px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='32' ry='32' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-4xl {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='32' ry='32' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+/* Explicit pixel radii */
+.dashed-border-radius-6 {
+  border-radius: 6px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-radius-6 {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-radius-10 {
+  border-radius: 10px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-radius-10 {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-radius-12 {
+  border-radius: 12px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-radius-12 {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-radius-16 {
+  border-radius: 16px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-radius-16 {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-radius-20 {
+  border-radius: var(--radius-20);
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-radius-20 {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dashed-border-radius-24 {
+  border-radius: 24px;
+  background-color: transparent;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='rgba(28%2C28%2C28%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+.dark .dashed-border-radius-24 {
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='rgba(255%2C255%2C255%2C0.08)' stroke-width='1' stroke-dasharray='8%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
+}
+
+/* Keep SVG dashed strokes slightly inset on X-axis to prevent right-edge clipping on zoom, while preserving corner rendering. */
+.dashed-border,
+.dashed-border-xs,
+.dashed-border-sm,
+.dashed-border-md,
+.dashed-border-lg,
+.dashed-border-xl,
+.dashed-border-2xl,
+.dashed-border-3xl,
+.dashed-border-4xl,
+.dashed-border-radius-6,
+.dashed-border-radius-10,
+.dashed-border-radius-12,
+.dashed-border-radius-16,
+.dashed-border-radius-20,
+.dashed-border-radius-24 {
+  background-size: calc(100% - 1px) 100%;
+  background-position: 0.5px 0;
+}
+
+/* Inner Border Utilities - Using box-shadow for better rounded corner support */
+@layer utilities {
+  .border-inner-depth-black-4 {
+    box-shadow: inset 0 0 0 1px var(--color-depth-black-4);
+  }
+
+  .border-inner-depth-black-16 {
+    box-shadow: inset 0 0 0 1px var(--color-depth-black-16);
+  }
+
+  .border-inner-depth-black-24 {
+    box-shadow: inset 0 0 0 1px var(--color-depth-black-24);
+  }
+
+  .border-inner-depth-black-48 {
+    box-shadow: inset 0 0 0 1px var(--color-depth-black-48);
+  }
+
+  /* Table sticky header - opaque equivalent of depth-black-4 on base-weak (light #EDEDED, dark #292929).
+   * Dark mode override is in .dark {} block above (uses white 4% to match depth-black-4 = white-alpha-4). */
+  .table-header-bg-weak {
+    background: color-mix(in oklch, var(--color-gray-950) 3.5%, var(--color-base-weak));
+  }
+
+  /* Table sticky header inverse - light #F6F6F6. Dark #202020 override is in .dark {} block above. */
+  .table-header-bg-inverse {
+    background: color-mix(in oklch, var(--color-gray-950) 3.5%, var(--color-base-inverse));
+  }
+}
+
+/* Seam border for left-pinned sticky columns — 1px depth-black-4 line at the column's right edge.
+   Matches the row-separator border colour so the seam reads as a natural continuation of the grid.
+   ::after is used instead of box-shadow/border because border-collapse clips both on sticky
+   cells in Chrome and Safari. */
+.table-sticky-shadow-right::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: translateX(100%);
+  width: 1px;
+  background: var(--color-depth-black-16);
+  pointer-events: none;
+}
+
+/* Seam border for right-pinned sticky columns — 1px depth-black-4 line at the column's left edge. */
+.table-sticky-shadow-left::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  transform: translateX(-100%);
+  width: 1px;
+  background: var(--color-depth-black-16);
+  pointer-events: none;
+}
+
+/*
+ * Sticky body cell backgrounds — opaque so scrolling content doesn't show
+ * through. On row hover (`.group:hover`) the cell picks up the same opaque
+ * depth-black-4 composite used by `.table-header-bg-*` so the cell tracks
+ * the row highlight without any transparency bleed. Custom CSS classes rather
+ * than Tailwind utilities because `group-hover:` variants can't be applied to
+ * non-@utility classes in Tailwind v4.
+ */
+.table-sticky-cell-weak {
+  background: var(--color-base-weak);
+}
+.table-sticky-cell-inverse {
+  background: var(--color-base-inverse);
+}
+
+/* Row-hover tint only on hover-capable devices (`@media (hover: hover)`). On touch, :hover
+   sticks after a tap and would leave the sticky column highlighted while the
+   rest of the row is not — see review of the Toggle table on mobile.
+
+   The tint layers the SAME depth-black-4 overlay the row hover applies
+   (Table row: `hover:bg-depth-black-4`) over the cell's opaque base, so the
+   sticky column matches the rest of the row exactly. Using the overlay (rather
+   than a header-style color-mix or a hardcoded dark value) keeps it identical
+   across light/dark themes — the previous values didn't match the row tint and
+   read slightly darker on the sticky column. */
+@media (hover: hover) {
+  .group:hover .table-sticky-cell-weak {
+    background:
+      linear-gradient(var(--color-depth-black-4), var(--color-depth-black-4)),
+      var(--color-base-weak);
+  }
+  .group:hover .table-sticky-cell-inverse {
+    background:
+      linear-gradient(var(--color-depth-black-4), var(--color-depth-black-4)),
+      var(--color-base-inverse);
+  }
+}
+
+/* Inner border-soft (0.5px) + Shadows/Normal/X-Small (0 1px 2px 0 black alpha 4).
+ * The class name predates the shadow tokens; --shadow-normal-xs is the Figma
+ * effect style it was always meant to compose with. */
+.shadow-inner-border-soft-elevation-sm {
+  box-shadow:
+    inset 0 0 0 0.5px var(--color-border-soft),
+    var(--shadow-normal-xs);
+}
+
+@layer base {
+  /* Grayscale antialiasing on the root — lighter type on macOS than browser default subpixel. */
+  html,
+  :host {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    color-scheme: light;
+  }
+
+  /*
+   * Inverted text selection, same pattern as Vercel Geist:
+   *   light → charcoal bg + white copy (`--geist-selection` / `--geist-selection-text-color`)
+   *   dark  → near-white bg + charcoal copy (tokens invert under `.dark`)
+   * Kept in @layer base so component utilities like selection:bg-* can still override.
+   */
+  ::selection {
+    background-color: var(--color-text-strong);
+    color: var(--color-text-inverse);
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-depth-black-4) transparent;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--color-depth-black-4);
+      border-radius: 9999px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: var(--color-depth-black-8);
+    }
+  }
+}