@caffeinebounce/ui 0.62.2

package/dist/styles.css

@@ -0,0 +1,1213 @@
+/**
+ * @caffeinebounce/ui Base Styles
+ *
+ * Import this in your app's globals.css after @import "tailwindcss":
+ *
+ *   @import "tailwindcss";
+ *   @import "@caffeinebounce/ui/styles.css";
+ *
+ *   // Required plugins (must be in app's CSS for proper resolution)
+ *   @plugin "tailwindcss-animate";
+ *   @plugin "@tailwindcss/typography";
+ *
+ * Then add your product-specific @source directives and overrides.
+ */
+
+/* Dark mode variant - enables dark: prefix classes */
+@custom-variant dark (&:is(.dark *));
+
+/* ===========================================
+   CSS Custom Properties (Variables)
+   Products can override these in their own :root block
+   =========================================== */
+
+:root {
+  /* Border radius scale */
+  --radius: 0.625rem;
+  --box-radius: var(--radius);
+
+  /* Layout variables - centralized width settings */
+  --layout-max-width: 1280px;
+  --layout-max-width-narrow: 640px;
+  --layout-max-width-wide: 1536px;
+  --layout-padding-mobile: 1rem;
+  --layout-padding-tablet: 1.5rem;
+  --layout-padding-desktop: 2rem;
+  --layout-navbar-height: 56px;
+
+  /* Sidebar variables */
+  --sidebar-width: 16rem;
+  --sidebar-width-mobile: 18rem;
+  --sidebar-width-icon: 3rem;
+
+  /* Typography - base */
+  --text-base: 0.875rem;
+
+  /* CTA buttons */
+  --button-cta-font-family: var(
+    --font-sans,
+    ui-sans-serif,
+    system-ui,
+    sans-serif
+  );
+  --button-cta-font-weight: 500;
+  --button-cta-letter-spacing: 0;
+  --button-cta-text-transform: none;
+  --button-cta-theme-overlay-opacity: 1;
+  --button-cta-theme-overlay-hover-opacity: 1;
+  --button-cta-theme-overlay-offset: calc(100% + 2px);
+  --button-cta-theme-hover-scale: 1;
+  --button-cta-theme-hover-shadow: none;
+
+  --button-default-bg: var(--primary);
+  --button-default-fg: var(--primary-foreground);
+  --button-default-border: transparent;
+  --button-default-hover-bg: color-mix(in srgb, var(--primary) 90%, black);
+  --button-default-hover-fg: var(--primary-foreground);
+  --button-default-hover-border: transparent;
+  --button-default-active-bg: color-mix(in srgb, var(--primary) 82%, black);
+  --button-default-active-fg: var(--primary-foreground);
+  --button-default-active-border: transparent;
+
+  --button-outline-bg: var(--background);
+  --button-outline-fg: var(--foreground);
+  --button-outline-border: var(--border);
+  --button-outline-hover-bg: var(--accent);
+  --button-outline-hover-fg: var(--accent-foreground);
+  --button-outline-hover-border: var(--border);
+  --button-outline-active-bg: color-mix(in srgb, var(--accent) 90%, black);
+  --button-outline-active-fg: var(--accent-foreground);
+  --button-outline-active-border: var(--border);
+
+  --button-secondary-bg: var(--secondary);
+  --button-secondary-fg: var(--secondary-foreground);
+  --button-secondary-border: transparent;
+  --button-secondary-hover-bg: color-mix(in srgb, var(--secondary) 90%, black);
+  --button-secondary-hover-fg: var(--secondary-foreground);
+  --button-secondary-hover-border: transparent;
+  --button-secondary-active-bg: color-mix(in srgb, var(--secondary) 82%, black);
+  --button-secondary-active-fg: var(--secondary-foreground);
+  --button-secondary-active-border: transparent;
+
+  --button-premium-bg: white;
+  --button-premium-fg: black;
+  --button-premium-border: white;
+  --button-premium-hover-bg: var(--primary);
+  --button-premium-hover-fg: var(--primary-foreground);
+  --button-premium-hover-border: var(--primary);
+  --button-premium-active-bg: color-mix(in srgb, var(--primary) 86%, black);
+  --button-premium-active-fg: var(--primary-foreground);
+  --button-premium-active-border: color-mix(in srgb, var(--primary) 86%, black);
+
+  /* ===========================================
+     Brand Customization Variables (Phase 2)
+     Products can override these for differentiation
+     =========================================== */
+
+  /* Brand accent - secondary brand color for highlights, gradients */
+  --brand-accent: var(--primary);
+
+  /* Brand gradients - for hero sections, buttons, backgrounds */
+  --brand-gradient-from: var(--primary);
+  --brand-gradient-to: var(--brand-accent);
+
+  /* Highlight color - for text highlights, selections */
+  --highlight-color: oklch(0.95 0.05 90);
+
+  /*
+   * Shadow intensity - multiplier for shadow depth (0.5 = subtle, 1.5 = dramatic)
+   * Usage: Apply in custom shadow definitions, e.g.:
+   *   box-shadow: 0 4px calc(12px * var(--shadow-intensity)) rgba(0,0,0,0.1);
+   * Products can override to create subtler or more dramatic shadow effects.
+   */
+  --shadow-intensity: 1;
+
+  /* Typography customization */
+  --font-headers: var(--font-sans);
+  --font-display: var(--font-sans);
+  --heading-weight: 600;
+  --heading-tracking: -0.025em;
+
+  /*
+   * Spacing scale - multiplier for consistent spacing adjustments
+   * Usage: Apply in custom spacing calculations, e.g.:
+   *   padding: calc(1rem * var(--spacing-scale));
+   * Products can override to create tighter (0.875) or looser (1.125) layouts.
+   */
+  --spacing-scale: 1;
+
+  /* ===========================================
+     Semantic Color Tokens (Light Mode)
+     Override --primary for brand customization
+     =========================================== */
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+
+  /* Primary - override this for brand color */
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  --destructive: oklch(0.577 0.245 27.325);
+  --success: oklch(0.527 0.154 150.069);
+
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  /* Chart colors */
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  /* Sidebar colors */
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Icon colors */
+  --icon: oklch(0.45 0 0);
+  --icon-hover: oklch(0.145 0 0);
+
+  /* Neutral colors for effects */
+  --color-neutral-100: oklch(0.97 0 0);
+  --color-neutral-300: oklch(0.87 0 0);
+  --color-neutral-500: oklch(0.55 0 0);
+
+  /* BackgroundRippleEffect component colors */
+  --cell-border-color: oklch(0.92 0 0);
+  --cell-fill-color: oklch(0.98 0 0);
+  --cell-shadow-color: oklch(0.85 0 0);
+}
+
+/* ===========================================
+   Dark Mode Color Overrides
+   =========================================== */
+
+.dark {
+  --background: oklch(0 0 0);
+  --foreground: oklch(1 0 0);
+
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(1 0 0);
+
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(1 0 0);
+
+  /*
+   * Primary colors: NOT overridden in dark mode.
+   * This allows brand colors set in :root to work consistently in both modes.
+   * Products with dark brand primaries (L < 0.7) get white text automatically.
+   * If you need white buttons in dark mode, override in your product CSS:
+   *   .dark { --primary: oklch(1 0 0); --primary-foreground: oklch(0 0 0); }
+   */
+
+  --secondary: oklch(0.205 0 0);
+  --secondary-foreground: oklch(1 0 0);
+
+  --muted: oklch(0.205 0 0);
+  --muted-foreground: oklch(0.7 0 0);
+
+  --accent: oklch(1 0 0 / 0.15);
+  --accent-foreground: oklch(1 0 0);
+
+  --destructive: oklch(0.704 0.191 22.216);
+  --success: oklch(0.627 0.194 149.214);
+
+  --border: oklch(1 0 0 / 0.15);
+  --input: oklch(1 0 0 / 0.15);
+  --ring: oklch(0.556 0 0);
+
+  /* Chart colors - dark mode */
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  /* Sidebar colors - dark mode */
+  --sidebar: oklch(0 0 0);
+  --sidebar-foreground: oklch(1 0 0);
+  /* Sidebar primary inherits from :root for brand consistency */
+  --sidebar-accent: oklch(1 0 0 / 0.1);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(1 0 0 / 0.15);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  /* Icon colors - dark mode */
+  --icon: oklch(1 0 0 / 0.7);
+  --icon-hover: oklch(1 0 0);
+
+  --button-outline-bg: color-mix(in srgb, var(--input) 30%, transparent);
+  --button-outline-border: var(--input);
+  --button-outline-hover-bg: color-mix(in srgb, var(--input) 50%, transparent);
+  --button-outline-hover-fg: var(--foreground);
+  --button-outline-hover-border: var(--input);
+  --button-outline-active-bg: color-mix(in srgb, var(--input) 65%, transparent);
+  --button-outline-active-fg: var(--foreground);
+  --button-outline-active-border: var(--input);
+
+  /* BackgroundRippleEffect - dark mode */
+  --cell-border-color: oklch(1 0 0 / 0.2);
+  --cell-fill-color: oklch(1 0 0 / 0.08);
+  --cell-shadow-color: oklch(1 0 0 / 0.1);
+}
+
+/* ===========================================
+   Data-Theme Attribute Support (Phase 2)
+   Enables theme switching via data-theme attribute
+   Works alongside existing .dark class pattern
+   =========================================== */
+
+/*
+ * Light theme (explicit)
+ * Intentionally only sets color-scheme and relies on :root for all color variables.
+ * This ensures that switching from other data-theme values correctly falls back to
+ * the base light theme defined in :root. Keep :root in sync with desired light palette.
+ */
+[data-theme="light"] {
+  color-scheme: light;
+}
+
+/*
+ * Dark theme via data-theme attribute
+ * Note: These values intentionally duplicate .dark class for completeness.
+ * This allows the data-theme system to work independently of the .dark class,
+ * enabling pure attribute-based theming without relying on class toggling.
+ * The ThemeProvider adds both for backward compatibility, but new implementations
+ * can use data-theme exclusively.
+ */
+[data-theme="dark"] {
+  color-scheme: dark;
+  --background: oklch(0 0 0);
+  --foreground: oklch(1 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(1 0 0);
+  --secondary: oklch(0.205 0 0);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.205 0 0);
+  --muted-foreground: oklch(0.7 0 0);
+  --accent: oklch(1 0 0 / 0.15);
+  --accent-foreground: oklch(1 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --success: oklch(0.627 0.194 149.214);
+  --border: oklch(1 0 0 / 0.15);
+  --input: oklch(1 0 0 / 0.15);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0 0 0);
+  --sidebar-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(1 0 0 / 0.1);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(1 0 0 / 0.15);
+  --sidebar-ring: oklch(0.556 0 0);
+  --icon: oklch(1 0 0 / 0.7);
+  --icon-hover: oklch(1 0 0);
+  --button-outline-bg: color-mix(in srgb, var(--input) 30%, transparent);
+  --button-outline-border: var(--input);
+  --button-outline-hover-bg: color-mix(in srgb, var(--input) 50%, transparent);
+  --button-outline-hover-fg: var(--foreground);
+  --button-outline-hover-border: var(--input);
+  --button-outline-active-bg: color-mix(in srgb, var(--input) 65%, transparent);
+  --button-outline-active-fg: var(--foreground);
+  --button-outline-active-border: var(--input);
+  --highlight-color: oklch(0.3 0.05 90);
+  --cell-border-color: oklch(1 0 0 / 0.2);
+  --cell-fill-color: oklch(1 0 0 / 0.08);
+  --cell-shadow-color: oklch(1 0 0 / 0.1);
+}
+
+/* Colorful theme - vibrant, saturated colors */
+[data-theme="colorful"] {
+  color-scheme: light;
+  --background: oklch(0.99 0.01 280);
+  --foreground: oklch(0.2 0.02 280);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2 0.02 280);
+  --muted: oklch(0.95 0.02 280);
+  --muted-foreground: oklch(0.5 0.03 280);
+  --accent: oklch(0.92 0.05 200);
+  --accent-foreground: oklch(0.2 0.02 200);
+  --highlight-color: oklch(0.92 0.1 90);
+}
+
+/* High contrast theme - designed for strong contrast (WCAG-focused) */
+[data-theme="high-contrast"] {
+  color-scheme: light;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.1 0 0);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.95 0 0);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.9 0 0);
+  --muted-foreground: oklch(0.2 0 0);
+  --accent: oklch(0.9 0 0);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(0.45 0.3 25);
+  --success: oklch(0.35 0.2 145);
+  --border: oklch(0 0 0);
+  --input: oklch(0.8 0 0);
+  --ring: oklch(0 0 0);
+}
+
+/* High contrast dark theme */
+[data-theme="high-contrast-dark"] {
+  color-scheme: dark;
+  --background: oklch(0 0 0);
+  --foreground: oklch(1 0 0);
+  --card: oklch(0.05 0 0);
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.05 0 0);
+  --popover-foreground: oklch(1 0 0);
+  --primary: oklch(1 0 0);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.15 0 0);
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.2 0 0);
+  --muted-foreground: oklch(0.85 0 0);
+  --accent: oklch(0.2 0 0);
+  --accent-foreground: oklch(1 0 0);
+  --destructive: oklch(0.65 0.25 25);
+  --success: oklch(0.7 0.2 145);
+  --border: oklch(1 0 0);
+  --input: oklch(0.3 0 0);
+  --ring: oklch(1 0 0);
+}
+
+/*
+ * Deuteranopia theme - green-weak colorblind safe
+ * Deuteranopia affects M-cones (green), making green-based colors harder to distinguish.
+ * Uses blue as primary, orange for warnings, and avoids green entirely.
+ */
+[data-theme="deuteranopia"] {
+  color-scheme: light;
+  --primary: oklch(0.55 0.18 250);
+  --primary-foreground: oklch(1 0 0);
+  --destructive: oklch(0.55 0.22 25);
+  --success: oklch(0.55 0.18 250);
+  --chart-1: oklch(0.55 0.18 250);
+  --chart-2: oklch(0.7 0.18 70);
+  --chart-3: oklch(0.45 0.12 290);
+  --chart-4: oklch(0.65 0.1 200);
+  --chart-5: oklch(0.5 0.15 40);
+}
+
+/*
+ * Protanopia theme - red-weak colorblind safe
+ * Protanopia affects L-cones (red), making reds appear darker and harder to distinguish.
+ * Uses cyan/teal as primary (avoiding red spectrum), brightens warm colors for visibility.
+ */
+[data-theme="protanopia"] {
+  color-scheme: light;
+  --primary: oklch(0.55 0.15 200);
+  --primary-foreground: oklch(1 0 0);
+  --destructive: oklch(0.6 0.2 55);
+  --success: oklch(0.55 0.15 200);
+  --chart-1: oklch(0.55 0.15 200);
+  --chart-2: oklch(0.7 0.18 80);
+  --chart-3: oklch(0.5 0.12 260);
+  --chart-4: oklch(0.65 0.08 180);
+  --chart-5: oklch(0.45 0.15 300);
+}
+
+/* Tritanopia theme - blue-yellow colorblind safe */
+[data-theme="tritanopia"] {
+  color-scheme: light;
+  --primary: oklch(0.55 0.2 15);
+  --primary-foreground: oklch(1 0 0);
+  --destructive: oklch(0.5 0.25 15);
+  --success: oklch(0.55 0.15 170);
+  --chart-1: oklch(0.55 0.2 15);
+  --chart-2: oklch(0.55 0.15 170);
+  --chart-3: oklch(0.7 0.1 15);
+  --chart-4: oklch(0.4 0.15 170);
+  --chart-5: oklch(0.6 0.05 0);
+}
+
+/* ===========================================
+   Accessibility Media Queries (Phase 2)
+   Auto-adjusts for user preferences
+   =========================================== */
+
+/*
+ * High contrast preference - enhance contrast for users who prefer it
+ * Applies to both automatic (no data-theme) and explicit theme selections.
+ * When data-theme is set to a high-contrast variant, those values take precedence.
+ */
+@media (prefers-contrast: more) {
+  :root:not([data-theme^="high-contrast"]) {
+    --foreground: oklch(0 0 0);
+    --muted-foreground: oklch(0.3 0 0);
+    --border: oklch(0.5 0 0);
+  }
+
+  .dark:not([data-theme^="high-contrast"]) {
+    --foreground: oklch(1 0 0);
+    --muted-foreground: oklch(0.8 0 0);
+    --border: oklch(0.6 0 0);
+  }
+}
+
+/*
+ * Reduced motion preference - minimize animations for accessibility
+ * Uses extremely short durations instead of completely disabling, which preserves
+ * visual feedback for state changes while eliminating motion discomfort.
+ * Components may use [data-essential-motion] to override for critical UI feedback
+ * (e.g., loading indicators, focus states).
+ */
+@media (prefers-reduced-motion: reduce) {
+  *:not([data-essential-motion]),
+  *:not([data-essential-motion])::before,
+  *:not([data-essential-motion])::after {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+    transition-duration: 0.01ms;
+  }
+}
+
+/* ===========================================
+   Tailwind Theme Configuration
+   Maps CSS variables to Tailwind utilities
+   =========================================== */
+
+@theme inline {
+  /* Font families - map Tailwind utilities to Geist fonts */
+  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
+
+  /* Border radius scale */
+  --radius-box: var(--box-radius);
+  --radius-sm: max(calc(var(--radius) - 4px), 0px);
+  --radius-md: max(calc(var(--radius) - 2px), 0px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Color mappings */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-icon: var(--icon);
+  --color-icon-hover: var(--icon-hover);
+
+  /* Brand customization colors */
+  --color-brand-accent: var(--brand-accent);
+  --color-brand-gradient-from: var(--brand-gradient-from);
+  --color-brand-gradient-to: var(--brand-gradient-to);
+  --color-highlight: var(--highlight-color);
+
+  /* BackgroundRippleEffect Animation */
+  --animate-cell-ripple: cell-ripple var(--duration, 200ms) ease-out none 1
+    var(--delay, 0ms);
+
+  @keyframes cell-ripple {
+    0% {
+      opacity: 0.4;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      opacity: 0.4;
+    }
+  }
+}
+
+/* ===========================================
+   Global Cursor Rules
+   =========================================== */
+
+body {
+  cursor: default;
+  /* Hide text caret by default - only show in actual text inputs */
+  caret-color: transparent;
+}
+
+/* Text cursor for editable elements - also restore caret visibility */
+input,
+textarea,
+[contenteditable="true"] {
+  cursor: text;
+  caret-color: auto;
+}
+
+/* Restore pointer cursor for interactive elements */
+button,
+a,
+[role="button"],
+[role="link"],
+[role="tab"],
+[role="menuitem"],
+[role="option"],
+select,
+label[for],
+summary {
+  cursor: pointer;
+}
+
+/* Disabled elements should show not-allowed cursor */
+button:disabled,
+input:disabled,
+textarea:disabled,
+select:disabled,
+[aria-disabled="true"] {
+  cursor: not-allowed;
+}
+
+/* ===========================================
+   Container Utilities
+   =========================================== */
+
+.container {
+  width: 100%;
+  max-width: var(--layout-max-width);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--layout-padding-mobile);
+  padding-right: var(--layout-padding-mobile);
+}
+
+@media (min-width: 640px) {
+  .container {
+    padding-left: var(--layout-padding-tablet);
+    padding-right: var(--layout-padding-tablet);
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    padding-left: var(--layout-padding-desktop);
+    padding-right: var(--layout-padding-desktop);
+  }
+}
+
+.container-narrow {
+  max-width: var(--layout-max-width-narrow);
+}
+
+.container-wide {
+  max-width: var(--layout-max-width-wide);
+}
+
+/* ===========================================
+   Base Layer Styles
+   =========================================== */
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html,
+  body {
+    @apply h-full;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html.dark {
+    background-color: #000000;
+    color: #ffffff;
+  }
+  html.dark body {
+    background-color: #000000;
+    color: #ffffff;
+  }
+
+  /* Header font customization */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-headers, inherit);
+    font-weight: var(--heading-weight, 600);
+    letter-spacing: var(--heading-tracking, -0.025em);
+  }
+
+  /* Monospace font customization */
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: var(--font-mono, ui-monospace, monospace);
+  }
+}
+
+/* ===========================================
+   BackgroundRippleEffect Utilities
+   =========================================== */
+
+/* Ripple effect mask utilities */
+.mask-radial-from-70\%,
+[class*="mask-radial-from-70"] {
+  mask-image: radial-gradient(
+    ellipse farthest-corner at top,
+    black 70%,
+    transparent 100%
+  );
+  -webkit-mask-image: radial-gradient(
+    ellipse farthest-corner at top,
+    black 70%,
+    transparent 100%
+  );
+}
+
+/* Ripple grid cell styling */
+.cell {
+  border-width: 0.5px;
+}
+
+/* Fractional border width utility */
+.border-\[0\.5px\] {
+  border-width: 0.5px;
+}
+
+/* Z-index utilities */
+.z-2 {
+  z-index: 2;
+}
+
+.z-3 {
+  z-index: 3;
+}
+
+/* ===========================================
+   Prose Styles (for legal pages, markdown content)
+   =========================================== */
+
+.prose ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.prose ol {
+  list-style-type: decimal;
+  padding-left: 1.5rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.prose li {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.prose a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.prose a:hover {
+  opacity: 0.8;
+}
+
+/* ===========================================
+   Form Element Fixes
+   =========================================== */
+
+/* Fix placeholder text scaling on smaller screens */
+input::placeholder,
+textarea::placeholder {
+  font-size: inherit;
+}
+
+@media (max-width: 640px) {
+  input::placeholder,
+  textarea::placeholder {
+    font-size: 0.875rem;
+  }
+}
+
+/*
+ * Autofill / password-manager fill styling
+ *
+ * Centralize the filled-input treatment so shared Input/PasswordInput components
+ * stay readable across browser autofill and extension-based password managers.
+ *
+ * Known coverage:
+ * - WebKit/Blink native autofill (:autofill / :-webkit-autofill)
+ * - Firefox autofill (:-moz-autofill)
+ * - 1Password extension fills (data-com-onepassword-filled)
+ *
+ * Components opt in via [data-autofill-aware="true"], which keeps this extensible
+ * for additional provider-specific selectors without requiring app-level overrides.
+ */
+:root {
+  --autofill-fg: var(--foreground);
+  --autofill-bg: var(--background);
+  --autofill-border: var(--input);
+}
+
+.dark {
+  --autofill-fg: rgb(248 250 252);
+  --autofill-bg: rgb(17 24 39);
+  --autofill-border: rgb(55 65 81);
+}
+
+:is(
+    input[data-autofill-aware="true"],
+    textarea[data-autofill-aware="true"]
+  ):-webkit-autofill,
+:is(
+    input[data-autofill-aware="true"],
+    textarea[data-autofill-aware="true"]
+  ):-webkit-autofill:hover,
+:is(
+    input[data-autofill-aware="true"],
+    textarea[data-autofill-aware="true"]
+  ):-webkit-autofill:focus,
+:is(
+    input[data-autofill-aware="true"],
+    textarea[data-autofill-aware="true"]
+  ):-webkit-autofill:active {
+  -webkit-text-fill-color: var(--autofill-fg) !important;
+  color: var(--autofill-fg) !important;
+  caret-color: var(--autofill-fg) !important;
+  background-color: var(--autofill-bg) !important;
+  -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset !important;
+  box-shadow: 0 0 0 1000px var(--autofill-bg) inset !important;
+  border-color: var(--autofill-border) !important;
+  border-radius: inherit !important;
+  transition: background-color 99999s ease-in-out 0s;
+}
+
+:is(
+    input[data-autofill-aware="true"],
+    textarea[data-autofill-aware="true"]
+  ):-webkit-autofill::first-line {
+  color: var(--autofill-fg) !important;
+  -webkit-text-fill-color: var(--autofill-fg) !important;
+}
+
+:is(
+    input[data-autofill-aware="true"],
+    textarea[data-autofill-aware="true"]
+  ):-moz-autofill {
+  color: var(--autofill-fg) !important;
+  background-color: var(--autofill-bg) !important;
+  box-shadow: 0 0 0 1000px var(--autofill-bg) inset !important;
+  border-color: var(--autofill-border) !important;
+}
+
+:is(
+    input[data-autofill-aware="true"][data-com-onepassword-filled],
+    textarea[data-autofill-aware="true"][data-com-onepassword-filled],
+    input[data-autofill-aware="true"][data-com-onepassword-filled="light"],
+    input[data-autofill-aware="true"][data-com-onepassword-filled="dark"],
+    textarea[data-autofill-aware="true"][data-com-onepassword-filled="light"],
+    textarea[data-autofill-aware="true"][data-com-onepassword-filled="dark"]
+  ) {
+  color: var(--autofill-fg) !important;
+  -webkit-text-fill-color: var(--autofill-fg) !important;
+  caret-color: var(--autofill-fg) !important;
+  background-color: var(--autofill-bg) !important;
+  box-shadow: 0 0 0 1000px var(--autofill-bg) inset !important;
+  border-color: var(--autofill-border) !important;
+}
+
+/* ===========================================
+   Button Slide Hover Effect
+   =========================================== */
+
+/* CTA button theme contract */
+[data-slot="button"].button-cta {
+  font-family: var(--button-cta-font-family) !important;
+  font-weight: var(--button-cta-font-weight) !important;
+  letter-spacing: var(--button-cta-letter-spacing) !important;
+  text-transform: var(--button-cta-text-transform) !important;
+  background-color: var(--button-cta-bg);
+  color: var(--button-cta-fg);
+  border-color: var(--button-cta-border);
+}
+
+[data-slot="button"].button-cta-default {
+  --button-cta-bg: var(--button-default-bg);
+  --button-cta-fg: var(--button-default-fg);
+  --button-cta-border: var(--button-default-border);
+  --button-cta-hover-bg: var(--button-default-hover-bg);
+  --button-cta-hover-fg: var(--button-default-hover-fg);
+  --button-cta-hover-border: var(--button-default-hover-border);
+  --button-cta-active-bg: var(--button-default-active-bg);
+  --button-cta-active-fg: var(--button-default-active-fg);
+  --button-cta-active-border: var(--button-default-active-border);
+}
+
+[data-slot="button"].button-cta-outline {
+  --button-cta-bg: var(--button-outline-bg);
+  --button-cta-fg: var(--button-outline-fg);
+  --button-cta-border: var(--button-outline-border);
+  --button-cta-hover-bg: var(--button-outline-hover-bg);
+  --button-cta-hover-fg: var(--button-outline-hover-fg);
+  --button-cta-hover-border: var(--button-outline-hover-border);
+  --button-cta-active-bg: var(--button-outline-active-bg);
+  --button-cta-active-fg: var(--button-outline-active-fg);
+  --button-cta-active-border: var(--button-outline-active-border);
+}
+
+[data-slot="button"].button-cta-secondary {
+  --button-cta-bg: var(--button-secondary-bg);
+  --button-cta-fg: var(--button-secondary-fg);
+  --button-cta-border: var(--button-secondary-border);
+  --button-cta-hover-bg: var(--button-secondary-hover-bg);
+  --button-cta-hover-fg: var(--button-secondary-hover-fg);
+  --button-cta-hover-border: var(--button-secondary-hover-border);
+  --button-cta-active-bg: var(--button-secondary-active-bg);
+  --button-cta-active-fg: var(--button-secondary-active-fg);
+  --button-cta-active-border: var(--button-secondary-active-border);
+}
+
+[data-slot="button"].button-cta-premium {
+  --button-cta-bg: var(--button-premium-bg);
+  --button-cta-fg: var(--button-premium-fg);
+  --button-cta-border: var(--button-premium-border);
+  --button-cta-hover-bg: var(--button-premium-hover-bg);
+  --button-cta-hover-fg: var(--button-premium-hover-fg);
+  --button-cta-hover-border: var(--button-premium-hover-border);
+  --button-cta-active-bg: var(--button-premium-active-bg);
+  --button-cta-active-fg: var(--button-premium-active-fg);
+  --button-cta-active-border: var(--button-premium-active-border);
+}
+
+[data-slot="button"].button-cta:not([data-hover-effect="slide"]):not(
+    [data-hover-effect="theme"]
+  ):hover {
+  background-color: var(--button-cta-hover-bg);
+  color: var(--button-cta-hover-fg);
+  border-color: var(--button-cta-hover-border);
+}
+
+[data-slot="button"].button-cta:not([data-hover-effect="slide"]):not(
+    [data-hover-effect="theme"]
+  ):active {
+  background-color: var(--button-cta-active-bg);
+  color: var(--button-cta-active-fg);
+  border-color: var(--button-cta-active-border);
+}
+
+[data-slot="button"].button-cta[data-hover-effect="theme"],
+[data-slot="button"].button-cta[data-hover-effect="slide"] {
+  position: relative;
+  overflow: hidden;
+  z-index: 0;
+}
+
+[data-slot="button"].button-cta[data-hover-effect="theme"]::before,
+[data-slot="button"].button-cta[data-hover-effect="slide"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--button-cta-hover-bg);
+  opacity: var(--button-cta-theme-overlay-opacity);
+  transform: translate3d(0, var(--button-cta-theme-overlay-offset), 0);
+  transition: transform 300ms ease-out;
+  will-change: transform;
+  backface-visibility: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+
+[data-slot="button"].button-cta[data-hover-effect="theme"]:hover::before,
+[data-slot="button"].button-cta[data-hover-effect="slide"]:hover::before {
+  transform: translate3d(0, 0, 0);
+  opacity: var(--button-cta-theme-overlay-hover-opacity);
+}
+
+[data-slot="button"].button-cta[data-hover-effect="theme"]:hover,
+[data-slot="button"].button-cta[data-hover-effect="slide"]:hover {
+  color: var(--button-cta-hover-fg);
+  border-color: var(--button-cta-hover-border);
+}
+
+[data-slot="button"].button-cta[data-hover-effect="theme"]:active,
+[data-slot="button"].button-cta[data-hover-effect="slide"]:active {
+  color: var(--button-cta-active-fg);
+  border-color: var(--button-cta-active-border);
+}
+
+[data-slot="button"].button-cta[data-hover-effect="theme"]:hover {
+  box-shadow: var(--button-cta-theme-hover-shadow);
+  transform: scale(var(--button-cta-theme-hover-scale));
+}
+
+/* Destructive button with slide effect - starts light, fills with red on hover */
+[data-slot="button"][data-variant="destructive"][data-hover-effect="slide"] {
+  position: relative;
+  overflow: hidden;
+  z-index: 0;
+  background-color: var(--background);
+  color: var(--destructive);
+  border: 1px solid var(--destructive);
+}
+
+[data-slot="button"][data-variant="destructive"][data-hover-effect="slide"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--destructive);
+  transform: translate3d(0, calc(100% + 2px), 0);
+  transition: transform 300ms ease-out;
+  will-change: transform;
+  backface-visibility: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+
+[data-slot="button"][data-variant="destructive"][data-hover-effect="slide"]:hover::before,
+[data-slot="button"][data-variant="destructive"][data-hover-effect="slide"][data-active]::before {
+  transform: translate3d(0, 0, 0);
+}
+
+[data-slot="button"][data-variant="destructive"][data-hover-effect="slide"]:hover,
+[data-slot="button"][data-variant="destructive"][data-hover-effect="slide"][data-active] {
+  color: white;
+}
+
+/* ===========================================
+   Segmented Switcher
+   =========================================== */
+
+[data-slot="segmented-switcher"] {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+[data-slot="segmented-switcher"]::-webkit-scrollbar {
+  display: none;
+}
+
+[data-slot="segmented-switcher-track"] {
+  position: relative;
+  display: inline-flex;
+  min-width: 100%;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
+  background: color-mix(in srgb, var(--background) 84%, var(--foreground) 4%);
+  padding: 0.25rem;
+}
+
+[data-slot="segmented-switcher-item"] {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 9999px;
+  text-decoration: none;
+  color: color-mix(in srgb, var(--foreground) 65%, transparent);
+  transition: transform 180ms ease;
+}
+
+[data-slot="segmented-switcher-item"]:not([aria-disabled="true"]):not(
+    [data-active]
+  ):hover {
+  color: color-mix(in srgb, var(--foreground) 82%, transparent);
+}
+
+[data-slot="segmented-switcher-item"][data-active],
+[data-slot="segmented-switcher-item"][data-active]:hover {
+  color: #080808;
+}
+
+[data-slot="segmented-switcher-item"][data-disabled],
+[data-slot="segmented-switcher-item"][aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+
+[data-slot="segmented-switcher-item"]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ring);
+}
+
+[data-slot="segmented-switcher-indicator"] {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
+  background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
+}
+
+[data-slot="segmented-switcher-item-label"] {
+  position: relative;
+  z-index: 1;
+}
+
+[data-slot="segmented-switcher"][data-variant="investor"]
+  [data-slot="segmented-switcher-track"] {
+  min-height: 2.75rem;
+  padding: 0.25rem;
+}
+
+[data-slot="segmented-switcher"][data-variant="investor"]
+  [data-slot="segmented-switcher-item"] {
+  min-height: 2.25rem;
+  padding: 0.5rem 1.05rem;
+  font-size: 0.94rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+[data-slot="segmented-switcher"][data-variant="admin"]
+  [data-slot="segmented-switcher-track"] {
+  min-height: 2.5rem;
+  padding: 0.2rem;
+  border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
+}
+
+[data-slot="segmented-switcher"][data-variant="admin"]
+  [data-slot="segmented-switcher-item"] {
+  min-height: 2.05rem;
+  padding: 0.45rem 0.82rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+[data-slot="segmented-switcher"][data-variant="admin"]
+  [data-slot="segmented-switcher-item"][data-active],
+[data-slot="segmented-switcher"][data-variant="admin"]
+  [data-slot="segmented-switcher-item"][data-active]:hover {
+  color: #111111;
+}
+
+[data-slot="segmented-switcher"][data-track-border="false"]
+  [data-slot="segmented-switcher-track"] {
+  border-color: transparent;
+}
+
+[data-slot="segmented-switcher"][data-track-background="false"]
+  [data-slot="segmented-switcher-track"] {
+  background: transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="segmented-switcher-item"] {
+    transition-duration: 0ms;
+  }
+}
+
+/* ===========================================
+   Features Grid With Large Skeletons
+   =========================================== */
+
+[data-slot="feature-workflow-skeleton-panel"] {
+  transform: translate3d(1rem, -1rem, 0);
+  transition: transform 300ms ease;
+  will-change: transform;
+}
+
+[data-slot="feature-workflow-skeleton"]:hover
+  [data-slot="feature-workflow-skeleton-panel"],
+[data-slot="features-grid-large-skeleton-card"]:hover
+  [data-slot="feature-workflow-skeleton-panel"],
+[data-slot="features-grid-large-skeleton-card"]:focus-within
+  [data-slot="feature-workflow-skeleton-panel"] {
+  transform: translate3d(0, 0, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="feature-workflow-skeleton-panel"] {
+    transition-duration: 0ms;
+  }
+}
+
+/* ===========================================
+   Text Highlight Animation
+   =========================================== */
+
+@keyframes text-highlight-draw {
+  from {
+    background-size: 0% 100%;
+  }
+  to {
+    background-size: 100% 100%;
+  }
+}
+
+/* Animated text highlight - uses CSS custom properties for duration/delay */
+.text-highlight-animated {
+  background-size: 0% 100%;
+  animation: text-highlight-draw var(--highlight-duration, 2s) linear
+    var(--highlight-delay, 0.5s) forwards;
+}
+
+/* Respect prefers-reduced-motion: show highlight instantly without animation */
+@media (prefers-reduced-motion: reduce) {
+  .text-highlight-animated {
+    animation: none;
+    background-size: 100% 100%;
+  }
+}