@fileflow/sdk 0.1.13 → 0.1.14

package/dist/styles.css

@@ -0,0 +1,1329 @@
+/* NOTE: @tailwind base is intentionally omitted to prevent global style leaks.
+   Preflight is disabled in tailwind.config.js. Tailwind CSS variable defaults
+   are scoped to .fileflow-sdk-root below.
+   
+   IMPORTANT: @tailwind utilities MUST come AFTER the scoped resets below.
+   The scoped reset (.fileflow-sdk-root *) and Tailwind utility classes
+   (e.g. .ff-border) have equal specificity (0,1,0). CSS uses source order
+   as the tiebreaker, so utilities must come last to win. */
+@tailwind components;
+
+/* ============================================
+   FileFlow SDK Styles
+   PaySpace Design System (from Figma)
+   
+   Color Token System:
+   - Primitives: Raw color values from Figma
+   - Tokens: Semantic tokens referencing primitives
+   
+   Source of truth: packages/shared/src/styles/color-tokens.ts
+   
+   STYLE ISOLATION:
+   All styles are scoped to .fileflow-sdk-root to prevent
+   leaking styles to or inheriting from the host application.
+   ============================================ */
+
+/* ============================================
+   SDK Root - Style Isolation Container
+   Prevents host styles from affecting SDK components
+   and prevents SDK styles from leaking out.
+   ============================================ */
+
+.fileflow-sdk-root {
+  /* Reset all inherited properties */
+  all: revert;
+  
+  /* Establish new stacking context */
+  isolation: isolate;
+  
+  /* Reset typography */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  
+  /* Reset box model */
+  box-sizing: border-box;
+  
+  /* Reset colors */
+  color: #21201d;
+  background-color: transparent;
+  
+  /* Reset text */
+  text-align: left;
+  direction: ltr;
+  text-rendering: optimizeLegibility;
+  
+  /* Reset spacing */
+  margin: 0;
+  padding: 0;
+
+  /* ----------------------------------------
+     Tailwind CSS variable defaults (scoped)
+     These are normally set by @tailwind base on *, ::before, ::after
+     but we scope them here to prevent global leaks.
+     ---------------------------------------- */
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position: ;
+  --tw-gradient-via-position: ;
+  --tw-gradient-to-position: ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+}
+
+/* Ensure all children inherit box-sizing and Tailwind CSS variable defaults */
+.fileflow-sdk-root *,
+.fileflow-sdk-root *::before,
+.fileflow-sdk-root *::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+}
+
+/* Reset common elements within SDK root */
+.fileflow-sdk-root button,
+.fileflow-sdk-root input,
+.fileflow-sdk-root select,
+.fileflow-sdk-root textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+}
+
+.fileflow-sdk-root button {
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.fileflow-sdk-root img,
+.fileflow-sdk-root svg {
+  display: block;
+  max-width: 100%;
+}
+
+.fileflow-sdk-root a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.fileflow-sdk-root h1,
+.fileflow-sdk-root h2,
+.fileflow-sdk-root h3,
+.fileflow-sdk-root h4,
+.fileflow-sdk-root h5,
+.fileflow-sdk-root h6 {
+  font-size: inherit;
+  font-weight: inherit;
+  margin: 0;
+}
+
+.fileflow-sdk-root p,
+.fileflow-sdk-root ul,
+.fileflow-sdk-root ol {
+  margin: 0;
+  padding: 0;
+}
+
+.fileflow-sdk-root ul,
+.fileflow-sdk-root ol {
+  list-style: none;
+}
+
+/* CSS Variables for theming - Default Theme (Brown Theme from Figma) */
+/* Scoped ONLY to SDK root to prevent conflicts with host app */
+.fileflow-sdk-root {
+  /* ----------------------------------------
+     PRIMARY BLUE SCALE (Main brand color)
+     From Figma: primary blue palette
+     ---------------------------------------- */
+  --ff-primary-10: #f9fafb;
+  --ff-primary-20: #eef0f6;
+  --ff-primary-30: #e2e6f0;
+  --ff-primary-40: #dce1ec;
+  --ff-primary-50: #d7e1f2;  /* Main primary background */
+  --ff-primary-60: #c6d6f0;
+  --ff-primary-70: #c0d0ed;  /* Hover state */
+  --ff-primary-80: #b9cbeb;
+  --ff-primary-90: #728ab3;
+  --ff-primary-100: #6980a5;
+  --ff-primary-110: #4f6180;
+  --ff-primary-120: #132036;
+  
+  /* Convenience aliases */
+  --ff-primary-500: #d7e1f2;  /* Main for buttons */
+  --ff-primary-600: #c0d0ed;  /* Hover for buttons */
+  
+  /* ----------------------------------------
+     PRIMARY BROWN SCALE (Text on primary)
+     From Figma: primary brown palette
+     ---------------------------------------- */
+  --ff-brown-10: #f0ece8;
+  --ff-brown-20: #d4c4ba;
+  --ff-brown-30: #b59f8c;
+  --ff-brown-40: #a68c74;
+  --ff-brown-50: #97795d;
+  --ff-brown-60: #8a6447;
+  --ff-brown-70: #7a522f;
+  --ff-brown-80: #6b3f18;  /* Main text on primary */
+  --ff-brown-90: #613916;
+  --ff-brown-100: #563213;
+  --ff-brown-110: #4b2c11;
+  --ff-brown-120: #36200c;
+  
+  /* Convenience alias */
+  --ff-primary-text: #6b3f18;
+  
+  /* ----------------------------------------
+     GRAY SCALE (Neutral colors)
+     From Figma: gray palette
+     ---------------------------------------- */
+  --ff-gray-white: #ffffff;
+  --ff-gray-10: #fcfcfb;
+  --ff-gray-20: #f9f9f7;
+  --ff-gray-30: #f0efed;
+  --ff-gray-40: #e9e8e4;
+  --ff-gray-50: #e2e0dd;
+  --ff-gray-60: #dadad5;
+  --ff-gray-70: #cfceca;
+  --ff-gray-80: #bcbbb7;
+  --ff-gray-90: #8e8d89;
+  --ff-gray-100: #848280;
+  --ff-gray-110: #656461;
+  --ff-gray-120: #21201d;
+  
+  /* ----------------------------------------
+     SEMANTIC TOKENS
+     Reference primitives for consistent UI
+     ---------------------------------------- */
+  
+  /* Background */
+  --ff-bg-primary: var(--ff-gray-white);
+  --ff-bg-secondary: var(--ff-gray-10);
+  --ff-bg-tertiary: var(--ff-gray-30);
+  --ff-bg-brand: var(--ff-primary-50);
+  --ff-bg-brand-light: var(--ff-primary-20);
+  
+  /* Text */
+  --ff-text-primary: var(--ff-gray-120);
+  --ff-text-secondary: var(--ff-gray-110);
+  --ff-text-muted: var(--ff-gray-90);
+  --ff-text-supportive: var(--ff-gray-80);
+  --ff-text-inverse: var(--ff-gray-white);
+  --ff-text-link: var(--ff-primary-90);
+  --ff-text-brand: var(--ff-brown-80);
+  
+  /* Border */
+  --ff-border-light: var(--ff-gray-30);
+  --ff-border-default: var(--ff-gray-40);
+  --ff-border-dark: var(--ff-gray-70);
+  --ff-border-brand: var(--ff-brown-80);
+  --ff-border-focus: var(--ff-primary-70);
+  
+  /* Icons */
+  --ff-icon-default: var(--ff-gray-90);
+  --ff-icon-active: var(--ff-gray-120);
+  --ff-icon-muted: var(--ff-gray-80);
+  --ff-icon-brand: var(--ff-brown-80);
+  --ff-icon-inverse: var(--ff-gray-white);
+  
+  /* System Feedback - From Figma */
+  --ff-success-light: #e7f5e4;
+  --ff-success: #298e33;
+  --ff-success-dark: #1f3c20;
+  --ff-warning-light: #ffe6c1;
+  --ff-warning: #a86807;
+  --ff-warning-dark: #4a3723;
+  --ff-error-light: #fcdede;
+  --ff-error: #d43338;
+  --ff-error-dark: #641a1a;
+  
+  /* Focus ring */
+  --ff-focus-ring: rgba(192, 208, 237, 0.5);  /* primary-70 at 50% */
+  --ff-focus-ring-accent: rgba(168, 85, 247, 0.25);
+  
+  /* ----------------------------------------
+     ACCENT - Purple (alternate theme)
+     ---------------------------------------- */
+  --ff-accent-50: #faf5ff;
+  --ff-accent-100: #f3e8ff;
+  --ff-accent-200: #e9d5ff;
+  --ff-accent-300: #d8b4fe;
+  --ff-accent-400: #c084fc;
+  --ff-accent-500: #a855f7;
+  --ff-accent-600: #9333ea;
+  --ff-accent-700: #7c3aed;
+  --ff-accent-800: #6b21a8;
+  --ff-accent-900: #581c87;
+  
+  /* ----------------------------------------
+     NAVY (for tooltips, dark elements)
+     ---------------------------------------- */
+  --ff-navy-950: #1a2029;
+}
+
+/* Container */
+.ff-container {
+  @apply ff-font-sans;
+  color: var(--ff-text-primary);
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+}
+
+/* ============================================
+   Data Table Styles (from Figma Tables)
+   ============================================ */
+
+.ff-table-container {
+  @apply ff-relative ff-overflow-auto ff-rounded-xl ff-border;
+  border-color: var(--ff-border-light);
+  background-color: var(--ff-bg-primary);
+}
+
+.ff-table {
+  @apply ff-w-full ff-text-sm;
+}
+
+.ff-table thead {
+  @apply ff-sticky ff-top-0 ff-z-10;
+  background-color: var(--ff-bg-secondary);
+}
+
+/* Rounded corners for first and last header cells to match container */
+.ff-table thead tr:first-child th:first-child {
+  @apply ff-rounded-tl-xl;
+}
+
+.ff-table thead tr:first-child th:last-child {
+  @apply ff-rounded-tr-xl;
+}
+
+.ff-table th {
+  @apply ff-px-4 ff-py-3 ff-text-left ff-font-semibold ff-text-xs ff-uppercase ff-tracking-wider;
+  color: var(--ff-text-secondary);
+  border-bottom: 2px solid var(--ff-border-light);
+}
+
+.ff-table td {
+  @apply ff-px-4 ff-py-3;
+  color: var(--ff-text-primary);
+  border-bottom: 1px solid var(--ff-border-light);
+}
+
+.ff-table tbody tr {
+  @apply ff-transition-colors ff-duration-150;
+}
+
+.ff-table tbody tr:hover {
+  background-color: var(--ff-bg-secondary);
+}
+
+/* Cell States */
+.ff-cell-error {
+  @apply ff-border-l-4;
+  background-color: var(--ff-error-light);
+  border-left-color: var(--ff-error);
+}
+
+.ff-cell-warning {
+  @apply ff-border-l-4;
+  background-color: var(--ff-warning-light);
+  border-left-color: var(--ff-warning);
+}
+
+.ff-cell-editing {
+  @apply ff-ring-2;
+  background-color: var(--ff-primary-50);
+  --tw-ring-color: var(--ff-primary-400);
+}
+
+.ff-cell-success {
+  background-color: var(--ff-success-light);
+}
+
+/* Row error state */
+.ff-row-error {
+  background-color: rgba(212, 51, 56, 0.1);  /* ff-error at 10% opacity */
+}
+
+/* Edit button */
+.ff-edit-btn {
+  color: var(--ff-text-muted);
+}
+
+.ff-edit-btn:hover {
+  color: var(--ff-text-secondary);
+}
+
+/* ============================================
+   Input Styles (from Figma Inputs)
+   ============================================ */
+
+.ff-input {
+  @apply ff-w-full ff-px-4 ff-py-3 ff-text-sm ff-border ff-rounded-lg;
+  border-color: var(--ff-border-default);
+  background-color: var(--ff-bg-primary);
+  color: var(--ff-text-primary);
+  @apply ff-transition-all ff-duration-200;
+}
+
+.ff-input::placeholder {
+  color: var(--ff-text-muted);
+}
+
+.ff-input:hover {
+  border-color: var(--ff-border-dark);
+}
+
+.ff-input:focus {
+  @apply ff-outline-none ff-ring-4;
+  border-color: var(--ff-primary-500);
+  --tw-ring-color: var(--ff-focus-ring);
+}
+
+.ff-input-error {
+  border-color: var(--ff-error);
+}
+
+.ff-input-error:focus {
+  border-color: var(--ff-error);
+  --tw-ring-color: rgba(212, 51, 56, 0.2);  /* ff-error at 20% opacity */
+}
+
+/* Select */
+.ff-select {
+  @apply ff-appearance-none ff-cursor-pointer ff-pr-10;
+}
+
+.ff-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2378716c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.75rem center;
+  background-repeat: no-repeat;
+  background-size: 1.25em 1.25em;
+}
+
+/* ============================================
+   Button Styles (Demo-matching design)
+   ============================================ */
+
+.ff-btn {
+  @apply ff-inline-flex ff-items-center ff-justify-center ff-gap-2;
+  @apply ff-font-semibold ff-text-sm;
+  @apply ff-px-5 ff-py-2.5;
+  @apply ff-rounded-lg;
+  @apply ff-transition-all ff-duration-150;
+  @apply ff-border ff-border-transparent;
+  @apply ff-cursor-pointer;
+}
+
+.ff-btn:focus {
+  @apply ff-outline-none;
+}
+
+.ff-btn:disabled {
+  @apply ff-opacity-50 ff-cursor-not-allowed;
+}
+
+/* Primary - Prominent dark button with white text */
+.ff-btn-primary {
+  background-color: var(--ff-primary-110);
+  color: var(--ff-gray-white);
+}
+
+.ff-btn-primary:hover:not(:disabled) {
+  background-color: var(--ff-primary-120);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.2);
+}
+
+.ff-btn-primary:active:not(:disabled) {
+  background-color: var(--ff-primary-130);
+  transform: translateY(0);
+}
+
+.ff-btn-primary:focus-visible {
+  box-shadow: 0 0 0 3px var(--ff-focus-ring);
+}
+
+/* Secondary - Outlined */
+.ff-btn-secondary {
+  background-color: var(--ff-bg-primary);
+  color: var(--ff-text-primary);
+  border-color: var(--ff-border-default);
+}
+
+.ff-btn-secondary:hover:not(:disabled) {
+  background-color: var(--ff-bg-secondary);
+  border-color: var(--ff-border-dark);
+}
+
+.ff-btn-secondary:active:not(:disabled) {
+  background-color: var(--ff-bg-tertiary);
+}
+
+.ff-btn-secondary:focus-visible {
+  box-shadow: 0 0 0 3px var(--ff-focus-ring);
+}
+
+/* Ghost */
+.ff-btn-ghost {
+  background-color: transparent;
+  color: var(--ff-text-secondary);
+}
+
+.ff-btn-ghost:hover:not(:disabled) {
+  background-color: var(--ff-bg-secondary);
+  color: var(--ff-text-primary);
+}
+
+/* Accent - Purple (for alternate theme) */
+.ff-btn-accent {
+  background-color: var(--ff-accent-500);
+  color: var(--ff-text-inverse);
+}
+
+.ff-btn-accent:hover:not(:disabled) {
+  background-color: var(--ff-accent-600);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px -2px rgba(168, 85, 247, 0.3);
+}
+
+.ff-btn-accent:active:not(:disabled) {
+  background-color: var(--ff-accent-700);
+  transform: translateY(0);
+}
+
+.ff-btn-accent:focus {
+  @apply ff-outline-none ff-ring-4;
+  --tw-ring-color: var(--ff-focus-ring-accent);
+}
+
+/* Danger */
+.ff-btn-danger {
+  @apply ff-bg-error-500 ff-text-white;
+}
+
+.ff-btn-danger:hover:not(:disabled) {
+  @apply ff-bg-error-600;
+  transform: translateY(-1px);
+}
+
+/* Link style button */
+.ff-btn-link {
+  background-color: transparent;
+  color: var(--ff-primary-text);
+  @apply ff-px-2 ff-py-1;
+}
+
+.ff-btn-link:hover:not(:disabled) {
+  color: #4a2a10;  /* Darker brown */
+  text-decoration: underline;
+}
+
+/* Button sizes */
+.ff-btn-sm {
+  @apply ff-px-3 ff-py-2 ff-text-sm ff-rounded-md;
+}
+
+.ff-btn-lg {
+  @apply ff-px-6 ff-py-3 ff-text-base ff-rounded-xl;
+}
+
+/* ============================================
+   Checkbox Styles (from Figma Selectors)
+   ============================================ */
+
+.ff-checkbox {
+  @apply ff-w-5 ff-h-5 ff-rounded ff-border-2 ff-cursor-pointer;
+  @apply ff-transition-all ff-duration-150;
+  border-color: var(--ff-border-default);
+  background-color: var(--ff-bg-primary);
+}
+
+.ff-checkbox:hover {
+  border-color: var(--ff-primary-400);
+}
+
+.ff-checkbox:checked {
+  background-color: var(--ff-primary-500);
+  border-color: var(--ff-primary-500);
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+
+.ff-checkbox:focus {
+  @apply ff-outline-none ff-ring-4;
+  --tw-ring-color: var(--ff-focus-ring);
+}
+
+/* Radio */
+.ff-radio {
+  @apply ff-w-5 ff-h-5 ff-rounded-full ff-border-2 ff-cursor-pointer;
+  @apply ff-transition-all ff-duration-150;
+  border-color: var(--ff-border-default);
+  background-color: var(--ff-bg-primary);
+}
+
+.ff-radio:checked {
+  border-color: var(--ff-primary-500);
+  border-width: 6px;
+}
+
+.ff-radio:focus {
+  @apply ff-outline-none ff-ring-4;
+  --tw-ring-color: var(--ff-focus-ring);
+}
+
+/* Toggle Switch */
+.ff-toggle {
+  @apply ff-relative ff-w-11 ff-h-6 ff-rounded-full ff-cursor-pointer;
+  @apply ff-transition-all ff-duration-200;
+  background-color: var(--ff-border-default);
+}
+
+.ff-toggle::after {
+  @apply ff-absolute ff-top-0.5 ff-left-0.5 ff-w-5 ff-h-5 ff-rounded-full;
+  @apply ff-transition-transform ff-duration-200;
+  content: '';
+  background-color: var(--ff-bg-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.ff-toggle:checked {
+  background-color: var(--ff-primary-500);
+}
+
+.ff-toggle:checked::after {
+  transform: translateX(1.25rem);
+}
+
+/* ============================================
+   Dropzone Styles (Demo-matching design)
+   ============================================ */
+
+.ff-dropzone {
+  @apply ff-flex ff-flex-col ff-items-center ff-justify-center;
+  @apply ff-p-8;
+  @apply ff-border-2 ff-border-dashed ff-rounded-xl;
+  border-color: var(--ff-border-default);
+  background-color: var(--ff-bg-secondary);
+  @apply ff-cursor-pointer;
+  @apply ff-transition-all ff-duration-150;
+}
+
+/* Ensure dropzone children don't block drag events */
+.ff-dropzone * {
+  pointer-events: none;
+}
+
+.ff-dropzone input {
+  pointer-events: auto;
+}
+
+.ff-dropzone:hover {
+  border-color: var(--ff-primary-70);
+  background-color: var(--ff-primary-10);
+}
+
+.ff-dropzone-active {
+  border-color: var(--ff-primary-90);
+  background-color: var(--ff-primary-20);
+  @apply ff-scale-[1.01];
+}
+
+.ff-dropzone-icon-wrapper {
+  @apply ff-w-14 ff-h-14 ff-rounded-xl ff-flex ff-items-center ff-justify-center ff-mx-auto ff-mb-4;
+  background-color: var(--ff-primary-20);
+  @apply ff-transition-colors ff-duration-150;
+}
+
+.ff-dropzone-active .ff-dropzone-icon-wrapper {
+  background-color: var(--ff-primary-30);
+}
+
+.ff-dropzone-icon {
+  @apply ff-w-7 ff-h-7;
+  color: var(--ff-primary-90);
+  @apply ff-transition-colors ff-duration-150;
+}
+
+.ff-dropzone-active .ff-dropzone-icon {
+  color: var(--ff-primary-110);
+}
+
+.ff-dropzone-text {
+  @apply ff-text-base ff-font-semibold ff-mb-1;
+  color: var(--ff-text-primary);
+}
+
+.ff-dropzone-hint {
+  @apply ff-text-sm ff-mb-4;
+  color: var(--ff-text-muted);
+}
+
+.ff-dropzone-formats {
+  @apply ff-text-xs ff-mt-3;
+  color: var(--ff-text-muted);
+}
+
+/* ============================================
+   Badge Styles (from Figma status badges)
+   ============================================ */
+
+.ff-badge {
+  @apply ff-inline-flex ff-items-center ff-px-2.5 ff-py-1 ff-text-xs ff-font-semibold ff-rounded-full;
+}
+
+.ff-badge-error {
+  background-color: var(--ff-error-light);
+  color: var(--ff-error);
+}
+
+.ff-badge-warning {
+  background-color: var(--ff-warning-light);
+  color: var(--ff-warning);
+}
+
+.ff-badge-success {
+  background-color: var(--ff-success-light);
+  color: var(--ff-success);
+}
+
+.ff-badge-info {
+  background-color: var(--ff-primary-20);
+  color: var(--ff-primary-90);
+}
+
+.ff-badge-neutral {
+  background-color: var(--ff-bg-tertiary);
+  color: var(--ff-text-secondary);
+}
+
+.ff-badge-primary {
+  background-color: var(--ff-primary-100);
+  color: var(--ff-primary-700);
+}
+
+.ff-badge-accent {
+  background-color: var(--ff-accent-100);
+  color: var(--ff-accent-700);
+}
+
+/* ============================================
+   Modal/Overlay Styles (Demo-matching design)
+   ============================================ */
+
+.ff-overlay {
+  @apply ff-fixed ff-inset-0 ff-z-50;
+  background-color: rgba(28, 25, 23, 0.5);
+  backdrop-filter: blur(4px);
+  @apply ff-flex ff-items-center ff-justify-center;
+  @apply ff-p-4;
+  animation: ff-fade-in 0.2s ease-out;
+  @apply ff-overflow-y-auto;
+}
+
+@keyframes ff-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Modal overlay - self-contained backdrop for modal mode */
+.ff-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.5);
+  @apply ff-flex ff-items-center ff-justify-center;
+  @apply ff-p-4;
+}
+
+.ff-modal {
+  background-color: var(--ff-bg-primary);
+  @apply ff-rounded-2xl;
+  @apply ff-w-full ff-max-w-4xl;
+  @apply ff-flex ff-flex-col;
+  max-height: min(90vh, calc(100vh - 2rem));
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  animation: ff-scale-in 0.2s ease-out;
+  @apply ff-my-auto;
+}
+
+/* Embed mode - inline component without modal chrome */
+.ff-embed {
+  background-color: var(--ff-bg-primary);
+  @apply ff-w-full ff-flex ff-flex-col;
+  @apply ff-rounded-xl ff-border;
+  border-color: var(--ff-border-light);
+  /* No max-height, max-width, shadow, or animation - consumer controls sizing */
+}
+
+.ff-embed .ff-modal-header {
+  @apply ff-rounded-t-xl;
+}
+
+.ff-embed .ff-modal-footer {
+  @apply ff-rounded-b-xl;
+}
+
+@keyframes ff-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.ff-modal-header {
+  @apply ff-flex ff-items-center ff-justify-between ff-px-6 ff-py-5;
+  border-bottom: 1px solid var(--ff-border-light);
+  @apply ff-flex-shrink-0;
+  @apply ff-rounded-t-2xl;
+}
+
+.ff-modal-header-left {
+  @apply ff-flex ff-items-center ff-gap-4;
+}
+
+.ff-modal-icon {
+  @apply ff-w-10 ff-h-10 ff-rounded-lg ff-flex ff-items-center ff-justify-center;
+  background-color: var(--ff-primary-20);
+}
+
+.ff-modal-icon svg {
+  @apply ff-w-5 ff-h-5;
+  color: var(--ff-primary-90);
+}
+
+.ff-modal-title {
+  @apply ff-text-lg ff-font-semibold;
+  color: var(--ff-text-primary);
+}
+
+.ff-modal-close {
+  @apply ff-p-2 ff-rounded-lg;
+  color: var(--ff-text-muted);
+  @apply ff-transition-colors ff-duration-150;
+}
+
+.ff-modal-close:hover {
+  color: var(--ff-text-primary);
+  background-color: var(--ff-bg-tertiary);
+}
+
+.ff-modal-body {
+  @apply ff-p-6 ff-overflow-y-auto ff-flex-1;
+}
+
+.ff-modal-footer {
+  @apply ff-flex ff-items-center ff-justify-between ff-px-6 ff-py-4;
+  background-color: var(--ff-bg-secondary);
+  border-top: 1px solid var(--ff-border-light);
+  @apply ff-flex-shrink-0;
+  @apply ff-rounded-b-2xl;
+}
+
+/* ============================================
+   Step Indicator (Demo-matching design)
+   ============================================ */
+
+.ff-steps {
+  @apply ff-flex ff-items-center ff-gap-2;
+}
+
+.ff-step {
+  @apply ff-flex ff-items-center ff-justify-center;
+  @apply ff-w-8 ff-h-8 ff-rounded-full;
+  @apply ff-text-sm ff-font-semibold;
+  @apply ff-transition-all ff-duration-150;
+}
+
+.ff-step-pending {
+  background-color: var(--ff-bg-tertiary);
+  color: var(--ff-text-muted);
+}
+
+.ff-step-active {
+  background-color: var(--ff-primary-50);
+  color: var(--ff-primary-90);
+  box-shadow: 0 0 0 4px var(--ff-primary-20);
+}
+
+.ff-step-complete {
+  background-color: var(--ff-success);
+  color: white;
+}
+
+.ff-step-connector {
+  @apply ff-w-8 ff-h-0.5;
+  background-color: var(--ff-border-default);
+  @apply ff-transition-colors ff-duration-150;
+}
+
+.ff-step-connector-complete {
+  background-color: var(--ff-success);
+}
+
+/* ============================================
+   Progress Bar (from Figma Loaders)
+   ============================================ */
+
+.ff-progress {
+  @apply ff-h-2 ff-rounded-full ff-overflow-hidden;
+  background-color: var(--ff-bg-tertiary);
+}
+
+.ff-progress-bar {
+  @apply ff-h-full ff-rounded-full ff-transition-all ff-duration-500 ff-ease-out;
+  background-color: var(--ff-primary-500);
+}
+
+.ff-progress-bar-animated {
+  background: linear-gradient(90deg, var(--ff-primary-400) 0%, var(--ff-primary-500) 50%, var(--ff-primary-400) 100%);
+  background-size: 200% 100%;
+  animation: shimmer 2s linear infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* ============================================
+   Tooltip
+   ============================================ */
+
+.ff-tooltip {
+  @apply ff-absolute ff-z-50 ff-px-3 ff-py-2 ff-text-xs ff-font-medium ff-rounded-lg;
+  @apply ff-opacity-0 ff-invisible ff-transition-all ff-duration-200;
+  background-color: var(--ff-navy-950);
+  color: var(--ff-text-inverse);
+  box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.2);
+}
+
+.ff-tooltip-visible {
+  @apply ff-opacity-100 ff-visible;
+}
+
+/* ============================================
+   Spinner (from Figma Loaders)
+   ============================================ */
+
+.ff-spinner {
+  @apply ff-w-5 ff-h-5 ff-border-2 ff-rounded-full ff-animate-spin;
+  border-color: var(--ff-border-light);
+  border-top-color: var(--ff-primary-500);
+}
+
+.ff-spinner-lg {
+  @apply ff-w-8 ff-h-8;
+  border-width: 3px;
+}
+
+/* ============================================
+   Document Preview
+   ============================================ */
+
+.ff-document-preview {
+  @apply ff-relative ff-rounded-xl ff-overflow-hidden;
+  background-color: var(--ff-bg-tertiary);
+}
+
+.ff-document-preview img {
+  @apply ff-w-full ff-h-auto ff-object-contain;
+}
+
+/* ============================================
+   Column Mapping Styles (Demo-matching design)
+   ============================================ */
+
+.ff-mapping-header {
+  @apply ff-flex ff-items-center ff-justify-between ff-mb-4;
+}
+
+.ff-mapping-title {
+  @apply ff-text-lg ff-font-semibold;
+  color: var(--ff-text-primary);
+}
+
+.ff-mapping-subtitle {
+  @apply ff-text-sm;
+  color: var(--ff-text-muted);
+}
+
+.ff-mapping-legend {
+  @apply ff-flex ff-items-center ff-gap-4 ff-text-sm;
+}
+
+.ff-mapping-legend-item {
+  @apply ff-flex ff-items-center ff-gap-1.5;
+}
+
+.ff-mapping-legend-dot {
+  @apply ff-w-2 ff-h-2 ff-rounded-full;
+}
+
+.ff-mapping-row {
+  @apply ff-flex ff-items-center ff-gap-4 ff-p-4 ff-border ff-rounded-xl;
+  @apply ff-transition-all ff-duration-150;
+  background-color: var(--ff-bg-primary);
+  border-color: var(--ff-border-light);
+}
+
+.ff-mapping-row:hover {
+  border-color: var(--ff-border-default);
+  background-color: var(--ff-bg-secondary);
+}
+
+.ff-mapping-row-success {
+  border-color: var(--ff-success-light);
+  background-color: rgba(231, 245, 228, 0.5);
+}
+
+.ff-mapping-row-warning {
+  border-color: var(--ff-warning-light);
+  background-color: rgba(255, 230, 193, 0.5);
+}
+
+.ff-mapping-source {
+  @apply ff-flex-1 ff-px-4 ff-py-2.5 ff-rounded-lg ff-font-mono ff-text-sm;
+  background-color: var(--ff-bg-tertiary);
+  color: var(--ff-text-secondary);
+}
+
+.ff-mapping-arrow {
+  @apply ff-flex-shrink-0;
+  color: var(--ff-text-muted);
+}
+
+.ff-mapping-target {
+  @apply ff-flex-1;
+}
+
+.ff-mapping-status {
+  @apply ff-w-8 ff-flex ff-justify-center;
+}
+
+/* ============================================
+   Confidence Indicator
+   ============================================ */
+
+.ff-confidence {
+  @apply ff-inline-flex ff-items-center ff-gap-1.5 ff-text-xs ff-font-medium;
+}
+
+.ff-confidence-high {
+  color: var(--ff-success);
+}
+
+.ff-confidence-medium {
+  color: var(--ff-warning);
+}
+
+.ff-confidence-low {
+  color: var(--ff-error);
+}
+
+.ff-confidence-bar {
+  @apply ff-h-1.5 ff-rounded-full;
+  background-color: var(--ff-bg-tertiary);
+}
+
+.ff-confidence-bar-fill {
+  @apply ff-h-full ff-rounded-full ff-transition-all ff-duration-300;
+}
+
+/* NOTE: Step Indicator styles are defined above in the "Step Indicator (Demo-matching design)" section */
+
+/* ============================================
+   Validation Summary
+   ============================================ */
+
+.ff-validation-summary {
+  @apply ff-p-4 ff-rounded-xl ff-border;
+}
+
+.ff-validation-summary-error {
+  background-color: var(--ff-error-light);
+  border-color: var(--ff-error);
+}
+
+.ff-validation-summary-warning {
+  background-color: var(--ff-warning-light);
+  border-color: var(--ff-warning);
+}
+
+.ff-validation-summary-success {
+  background-color: var(--ff-success-light);
+  border-color: var(--ff-success);
+}
+
+/* ============================================
+   Card Styles
+   ============================================ */
+
+.ff-card {
+  @apply ff-rounded-xl ff-border;
+  background-color: var(--ff-bg-primary);
+  border-color: var(--ff-border-light);
+  box-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.04);
+}
+
+.ff-card-hover {
+  @apply ff-transition-all ff-duration-300;
+}
+
+.ff-card-hover:hover {
+  border-color: var(--ff-border-default);
+  box-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.08);
+  transform: translateY(-2px);
+}
+
+/* ============================================
+   Status Indicator
+   ============================================ */
+
+.ff-status {
+  @apply ff-inline-flex ff-items-center ff-gap-2;
+}
+
+.ff-status-dot {
+  @apply ff-w-2 ff-h-2 ff-rounded-full;
+}
+
+.ff-status-dot-success {
+  background-color: var(--ff-success);
+}
+
+.ff-status-dot-warning {
+  background-color: var(--ff-warning);
+}
+
+.ff-status-dot-error {
+  background-color: var(--ff-error);
+}
+
+.ff-status-dot-pending {
+  background-color: var(--ff-text-muted);
+}
+
+.ff-status-dot-processing {
+  @apply ff-animate-pulse;
+  background-color: var(--ff-primary-90);
+}
+
+/* ============================================
+   Empty State
+   ============================================ */
+
+.ff-empty-state {
+  @apply ff-flex ff-flex-col ff-items-center ff-justify-center ff-py-12 ff-text-center;
+}
+
+.ff-empty-state-icon {
+  @apply ff-w-16 ff-h-16 ff-mb-4;
+  color: var(--ff-border-default);
+}
+
+.ff-empty-state-title {
+  @apply ff-text-lg ff-font-semibold ff-mb-2;
+  color: var(--ff-text-primary);
+}
+
+.ff-empty-state-description {
+  @apply ff-text-sm ff-max-w-sm;
+  color: var(--ff-text-muted);
+}
+
+/* ============================================
+   Skeleton Loading
+   ============================================ */
+
+.ff-skeleton {
+  @apply ff-rounded ff-animate-pulse;
+  background-color: var(--ff-bg-tertiary);
+}
+
+.ff-skeleton-text {
+  @apply ff-h-4 ff-rounded;
+}
+
+.ff-skeleton-title {
+  @apply ff-h-6 ff-rounded ff-w-3/4;
+}
+
+.ff-skeleton-avatar {
+  @apply ff-w-10 ff-h-10 ff-rounded-full;
+}
+
+/* ============================================
+   Pagination (from Figma Tables)
+   ============================================ */
+
+.ff-pagination {
+  @apply ff-flex ff-items-center ff-gap-1;
+}
+
+.ff-pagination-btn {
+  @apply ff-w-9 ff-h-9 ff-flex ff-items-center ff-justify-center;
+  @apply ff-rounded-lg ff-text-sm ff-font-medium;
+  @apply ff-transition-colors ff-duration-150;
+  color: var(--ff-text-secondary);
+}
+
+.ff-pagination-btn:hover {
+  background-color: var(--ff-bg-secondary);
+  color: var(--ff-text-primary);
+}
+
+.ff-pagination-btn-active {
+  background-color: var(--ff-primary-500);
+  color: var(--ff-text-inverse);
+}
+
+.ff-pagination-btn-active:hover {
+  background-color: var(--ff-primary-600);
+  color: var(--ff-text-inverse);
+}
+
+/* ============================================
+   Selector Group (from Figma Selectors)
+   ============================================ */
+
+.ff-selector-group {
+  @apply ff-inline-flex ff-flex-wrap ff-gap-2;
+}
+
+.ff-selector-item {
+  @apply ff-inline-flex ff-items-center ff-gap-1.5;
+  @apply ff-px-3 ff-py-1.5 ff-rounded-full;
+  @apply ff-text-sm ff-font-medium ff-cursor-pointer;
+  @apply ff-transition-all ff-duration-150;
+  background-color: var(--ff-bg-secondary);
+  color: var(--ff-text-secondary);
+  border: 1px solid var(--ff-border-light);
+}
+
+.ff-selector-item:hover {
+  background-color: var(--ff-bg-tertiary);
+  border-color: var(--ff-border-default);
+}
+
+.ff-selector-item-active {
+  background-color: var(--ff-primary-500);
+  color: var(--ff-text-inverse);
+  border-color: var(--ff-primary-500);
+}
+
+.ff-selector-item-active:hover {
+  background-color: var(--ff-primary-600);
+  border-color: var(--ff-primary-600);
+}
+
+/* ============================================
+   Animations
+   ============================================ */
+
+.ff-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.ff-slide-up {
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ============================================
+   Theme Variants (Purple/Accent)
+   ============================================ */
+
+.ff-theme-accent {
+  --ff-primary-50: var(--ff-accent-50);
+  --ff-primary-100: var(--ff-accent-100);
+  --ff-primary-200: var(--ff-accent-200);
+  --ff-primary-300: var(--ff-accent-300);
+  --ff-primary-400: var(--ff-accent-400);
+  --ff-primary-500: var(--ff-accent-500);
+  --ff-primary-600: var(--ff-accent-600);
+  --ff-primary-700: var(--ff-accent-700);
+  --ff-primary-800: var(--ff-accent-800);
+  --ff-primary-900: var(--ff-accent-900);
+  --ff-focus-ring: var(--ff-focus-ring-accent);
+}
+
+/* ============================================
+   Tailwind Utilities - MUST be last!
+   Utility classes used in JSX (e.g. ff-flex, ff-p-4, ff-border)
+   need to come after scoped resets to win with equal specificity.
+   ============================================ */
+@tailwind utilities;