@dynamic-labs-sdk/droplet 0.0.0 → 0.27.2

package/src/styles/globals.css

@@ -0,0 +1,615 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --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-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-action: var(--action);
+  --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);
+
+  /* FireUI extended tokens */
+  --color-brand-light: var(--brand-light);
+  --color-brand-default: var(--brand-default);
+  --color-brand-hover: var(--brand-hover);
+  --color-brand-accented: var(--brand-accented);
+  --color-text-link: var(--text-link);
+  --color-text-disabled: var(--text-disabled);
+  --color-text-placeholder: var(--text-placeholder);
+  --color-text-invert: var(--text-invert);
+  --color-bg-bottom: var(--bg-bottom);
+  --color-bg-default: var(--bg-default);
+  --color-bg-accented: var(--bg-accented);
+  --color-bg-strong: var(--bg-strong);
+  --color-bg-absolute: var(--bg-absolute);
+  --color-success-light: var(--success-light);
+  --color-success-default: var(--success-default);
+  --color-text-success: var(--text-success);
+  --color-danger-light: var(--danger-light);
+  --color-danger-default: var(--danger-default);
+  --color-text-danger: var(--text-danger);
+  --color-warning-light: var(--warning-light);
+  --color-warning-default: var(--warning-default);
+  --color-text-warning: var(--text-warning);
+  --color-process-light: var(--process-light);
+  --color-process-default: var(--process-default);
+  --color-text-process: var(--text-process);
+  --color-inactive-light: var(--inactive-light);
+  --color-border-divider: var(--border-divider);
+  --color-border-default: var(--border-default);
+  --color-border-hover: var(--border-hover);
+  --color-border-strong: var(--border-strong);
+  --color-border-focused: var(--border-focused);
+  --color-border-selected: var(--border-selected);
+  --color-border-danger: var(--border-danger);
+  --color-border-success: var(--border-success);
+  --color-border-process: var(--border-process);
+  --color-border-warning: var(--border-warning);
+  --color-overlay-hover: var(--overlay-hover);
+  --color-overlay-pressed: var(--overlay-pressed);
+  --color-overlay-selected: var(--overlay-selected);
+  --color-overlay-selected-hover: var(--overlay-selected-hover);
+  --color-overlay-md: var(--overlay-md);
+  --color-overlay-strong: var(--overlay-strong);
+
+  /* Tiered radius: controls 8px (rounded-md) · containers 12px (rounded-xl) · cards/dialogs 16px (rounded-[16px]) */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-2xl: 14px;
+  --radius-3xl: 16px;
+  --radius-4xl: 20px;
+  --shadow-border: var(--shadow-border);
+  --shadow-card: var(--shadow-card);
+  --shadow-button: var(--shadow-button);
+  --shadow-input: var(--shadow-input);
+  --shadow-elevated: var(--shadow-elevated);
+  --shadow-input-hover: var(--shadow-input-hover);
+  --shadow-card-content: var(--shadow-card-content);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   River UI Design System — Light Mode
+   ═══════════════════════════════════════════════════════════ */
+
+:root {
+  /* ——— Text & Icons (River UI, OKLCH) ——— */
+  --foreground: oklch(0.373 0.031 259.73);            /* text-primary */
+  --muted-foreground: oklch(0.551 0.023 264.36);      /* text-secondary */
+  --text-disabled: oklch(0.714 0.019 261.32);
+  --text-invert: oklch(0.849 0.01 252.82);
+  --text-placeholder: oklch(0.849 0.01 252.82);
+  --text-link: oklch(0.497 0.174 256.63);
+
+  /* ——— Backgrounds (River UI, OKLCH) ——— */
+  --background: oklch(1 0 0);                         /* bg-neutral */
+  --bg-bottom: oklch(0.985 0.002 247.84);
+  --bg-default: oklch(0.967 0.003 264.54);
+  --bg-accented: oklch(0.928 0.006 264.53);           /* bg-default-accented */
+  --bg-strong: oklch(0.551 0.023 264.36);
+  --bg-absolute: oklch(0.373 0.031 259.73);
+
+  /* ——— Card / Popover ——— */
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.373 0.031 259.73);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.373 0.031 259.73);
+
+  /* ——— Primary ——— */
+  --primary: oklch(0.373 0.031 259.73);               /* bg-absolute */
+  --primary-foreground: oklch(1 0 0);
+
+  /* ——— Secondary / Muted / Accent ——— */
+  --secondary: oklch(0.967 0.003 264.54);             /* bg-default */
+  --secondary-foreground: oklch(0.373 0.031 259.73);
+  --muted: oklch(0.967 0.003 264.54);
+  --accent: oklch(0.948 0.005 258.33);                /* bg-default-accented */
+  --accent-foreground: oklch(0.373 0.031 259.73);
+
+  /* ——— Brand / Action (River UI, OKLCH) ——— */
+  --brand-light: oklch(0.964 0.018 253.34);
+  --brand-default: oklch(0.574 0.207 257.4);
+  --brand-hover: oklch(0.652 0.172 253.28);
+  --brand-accented: oklch(0.497 0.174 256.63);
+  --ring: oklch(0.574 0.207 257.4);                   /* border-focused */
+  --action: oklch(0.574 0.207 257.4);
+
+  /* ——— Destructive ——— */
+  --destructive: oklch(0.563 0.189 25.7);             /* danger-default */
+  --destructive-foreground: oklch(1 0 0);
+
+  /* ——— Borders ——— */
+  --border: oklch(0.278 0.03 256.85 / 0.12);
+  --input: oklch(0.278 0.03 256.85 / 0.12);
+  --border-divider: oklch(0.928 0.006 264.53);
+  --border-default: oklch(0.849 0.01 252.82);
+  --border-hover: oklch(0.714 0.019 261.32);
+  --border-strong: oklch(0.551 0.023 264.36);
+  --border-focused: oklch(0.574 0.207 257.4);
+  --border-selected: oklch(0.497 0.174 256.63);
+  --border-danger: oklch(0.497 0.18 26.81);
+  --border-success: oklch(0.438 0.115 146.74);
+  --border-process: oklch(0.516 0.247 281.05);
+  --border-warning: oklch(0.406 0.114 40.88);
+
+  /* ——— Overlays (River UI, OKLCH) ——— */
+  --overlay-hover: oklch(0.278 0.03 256.85 / 0.04);
+  --overlay-pressed: oklch(0.278 0.03 256.85 / 0.08);
+  --overlay-selected: oklch(0.661 0.181 258.32 / 0.08);
+  --overlay-selected-hover: oklch(0.661 0.181 258.32 / 0.12);
+  --overlay-md: oklch(0.278 0.03 256.85 / 0.60);
+  --overlay-strong: oklch(0.278 0.03 256.85 / 0.80);
+
+  /* ——— Functional: Success ——— */
+  --success-light: oklch(0.978 0.025 152.89);
+  --success-default: oklch(0.609 0.18 145.15);
+  --text-success: oklch(0.438 0.115 146.74);
+
+  /* ——— Functional: Danger ——— */
+  --danger-light: oklch(0.971 0.013 17.38);
+  --danger-default: oklch(0.563 0.189 25.7);
+  --text-danger: oklch(0.497 0.18 26.81);
+
+  /* ——— Functional: Warning ——— */
+  --warning-light: oklch(0.98 0.025 89.21);
+  --warning-default: oklch(0.822 0.165 77.75);
+  --text-warning: oklch(0.406 0.114 40.88);
+
+  /* ——— Functional: Process ——— */
+  --process-light: oklch(0.96 0.02 286.02);
+  --process-default: oklch(0.579 0.226 280.94);
+  --text-process: oklch(0.516 0.247 281.05);
+
+  /* ——— Functional: Inactive ——— */
+  --inactive-light: oklch(0.967 0.003 264.54);
+  --border-inactive: oklch(0.872 0.009 258.34);
+
+  /* ——— Charts ——— */
+  --chart-1: oklch(0.574 0.207 257.4);
+  --chart-2: oklch(0.609 0.18 145.15);
+  --chart-3: oklch(0.822 0.165 77.75);
+  --chart-4: oklch(0.563 0.189 25.7);
+  --chart-5: oklch(0.516 0.247 281.05);
+
+  /* ——— Radius ——— */
+  --radius: 8px;
+
+  /* ——— Sidebar ——— */
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.373 0.031 259.73);
+  --sidebar-primary: oklch(0.574 0.207 257.4);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.967 0.003 264.54);
+  --sidebar-accent-foreground: oklch(0.373 0.031 259.73);
+  --sidebar-border: oklch(0.928 0.006 264.53);
+  --sidebar-ring: oklch(0.574 0.207 257.4);
+
+  /* ——— Shadows ——— */
+  --shadow-border: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.10);
+  --shadow-card: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.08), 0px 0px 2px 0px oklch(0.278 0.03 256.85 / 0.08), 0px 1px 2px 0px oklch(0.278 0.03 256.85 / 0.06);
+  --shadow-button: 0px 1px 1px 0px oklch(1 0 0 / 0.07) inset, 0px 2px 3px 0px oklch(0.278 0.03 256.85 / 0.20), 0px 1px 1px 0px oklch(0 0 0 / 0.24);
+  --shadow-input: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.07), 0px 2px 3px -1px oklch(0 0 0 / 0.08), 0px 1px 0px 0px oklch(0 0 0 / 0.02);
+  --shadow-input-hover: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.15), 0px 2px 3px -1px oklch(0 0 0 / 0.08), 0px 1px 0px 0px oklch(0 0 0 / 0.02);
+  --shadow-secondary: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.07), 0px 2px 3px -1px oklch(0 0 0 / 0.08), 0px 1px 0px 0px oklch(0 0 0 / 0.02);
+  --shadow-secondary-hover: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.12), 0px 2px 3px -1px oklch(0 0 0 / 0.08), 0px 1px 0px 0px oklch(0 0 0 / 0.02);
+  --shadow-field: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.10), 0px 0px 1px 0px oklch(0.278 0.03 256.85 / 0.06);
+  --shadow-field-hover: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.18), 0px 0px 1px 0px oklch(0.278 0.03 256.85 / 0.10);
+  --shadow-elevated: 0 0 0 1px oklch(0.278 0.03 256.85 / 0.10), 0px 5px 15px 0px oklch(0.278 0.03 256.85 / 0.08), 0px 15px 35px -5px oklch(0.278 0.03 256.85 / 0.20);
+  --shadow-card-content: 0px 0px 2px 0px oklch(0.278 0.03 256.85 / 0.08), 0px 1px 2px 0px oklch(0.278 0.03 256.85 / 0.06);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Dark Mode
+   ═══════════════════════════════════════════════════════════ */
+
+.dark {
+  /* ——— Text & Icons ——— */
+  --foreground: oklch(0.880 0.017 231);
+  --muted-foreground: oklch(0.520 0.017 231);
+  --text-disabled: oklch(0.375 0.014 231);
+  --text-invert: oklch(0.375 0.014 231);
+  --text-placeholder: oklch(0.375 0.014 231);
+  --text-link: oklch(0.660 0.155 256);
+
+  /* ——— Backgrounds ——— */
+  --background: oklch(0.160 0.014 231);
+  --bg-bottom: oklch(0.135 0.014 231);
+  --bg-default: oklch(0.195 0.014 231);
+  --bg-accented: oklch(0.225 0.016 231);
+  --bg-strong: oklch(0.500 0.014 231);
+  --bg-absolute: oklch(0.880 0.017 231);
+
+  /* ——— Card / Popover ——— */
+  --card: oklch(0.210 0.014 231);
+  --card-foreground: oklch(0.880 0.017 231);
+  --popover: oklch(0.210 0.014 231);
+  --popover-foreground: oklch(0.880 0.017 231);
+
+  /* ——— Primary ——— */
+  --primary: oklch(0.880 0.017 231);
+  --primary-foreground: oklch(0.160 0.014 231);
+
+  /* ——— Secondary / Muted / Accent ——— */
+  --secondary: oklch(0.195 0.014 231);
+  --secondary-foreground: oklch(0.880 0.017 231);
+  --muted: oklch(0.195 0.014 231);
+  --accent: oklch(0.225 0.016 231);
+  --accent-foreground: oklch(0.880 0.017 231);
+
+  /* ——— Brand / Action ——— */
+  --brand-light: oklch(0.235 0.060 257);
+  --brand-default: oklch(0.510 0.205 257);
+  --brand-hover: oklch(0.590 0.175 257);
+  --brand-accented: oklch(0.440 0.215 257);
+  --ring: oklch(0.510 0.205 257);
+  --action: oklch(0.510 0.205 257);
+
+  /* ——— Destructive ——— */
+  --destructive: oklch(0.660 0.210 25);
+  --destructive-foreground: oklch(1 0 0);
+
+  /* ——— Borders ——— */
+  --border: oklch(1 0 0 / 0.05);
+  --input: oklch(1 0 0 / 0.08);
+  --border-divider: oklch(0.220 0.014 231);
+  --border-default: oklch(0.295 0.014 231);
+  --border-hover: oklch(0.370 0.014 231);
+  --border-strong: oklch(0.500 0.014 231);
+  --border-focused: oklch(0.510 0.205 257);
+  --border-selected: oklch(0.440 0.215 257);
+  --border-danger: oklch(0.560 0.120 25);
+  --border-success: oklch(0.570 0.130 145);
+  --border-process: oklch(0.530 0.135 295);
+  --border-warning: oklch(0.620 0.110 78);
+
+  /* ——— Overlays ——— */
+  --overlay-hover: oklch(1 0 0 / 0.04);
+  --overlay-pressed: oklch(1 0 0 / 0.08);
+  --overlay-selected: oklch(0.510 0.205 257 / 0.12);
+  --overlay-selected-hover: oklch(0.510 0.205 257 / 0.18);
+  --overlay-md: oklch(0 0 0 / 0.70);
+  --overlay-strong: oklch(0 0 0 / 0.85);
+
+  /* ——— Functional: Success ——— */
+  --success-light: oklch(0.215 0.048 145);
+  --success-default: oklch(0.600 0.100 145);
+  --text-success: oklch(0.720 0.130 145);
+
+  /* ——— Functional: Danger ——— */
+  --danger-light: oklch(0.200 0.055 25);
+  --danger-default: oklch(0.600 0.110 25);
+  --text-danger: oklch(0.730 0.120 25);
+
+  /* ——— Functional: Warning ——— */
+  --warning-light: oklch(0.215 0.052 78);
+  --warning-default: oklch(0.720 0.090 78);
+  --text-warning: oklch(0.780 0.120 78);
+
+  /* ——— Functional: Process ——— */
+  --process-light: oklch(0.210 0.055 295);
+  --process-default: oklch(0.580 0.110 295);
+  --text-process: oklch(0.700 0.135 295);
+
+  /* ——— Functional: Inactive ——— */
+  --inactive-light: oklch(0.230 0.014 231);
+  --border-inactive: oklch(0.295 0.014 231);
+
+  /* ——— Charts ——— */
+  --chart-1: oklch(0.510 0.205 257);
+  --chart-2: oklch(0.650 0.170 145);
+  --chart-3: oklch(0.780 0.160 78);
+  --chart-4: oklch(0.660 0.210 25);
+  --chart-5: oklch(0.620 0.200 295);
+
+  /* ——— Sidebar ——— */
+  --sidebar: oklch(0.160 0.014 231);
+  --sidebar-foreground: oklch(0.880 0.017 231);
+  --sidebar-primary: oklch(0.510 0.205 257);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.195 0.014 231);
+  --sidebar-accent-foreground: oklch(0.880 0.017 231);
+  --sidebar-border: oklch(0.220 0.014 231);
+  --sidebar-ring: oklch(0.510 0.205 257);
+
+  /* ——— Shadows ——— */
+  --shadow-border: 0 0 0 1px oklch(1 0 0 / 0.05);
+  --shadow-card: 0 0 0 1px oklch(1 0 0 / 0.08), 0px 0px 2px 0px oklch(0 0 0 / 0.08), 0px 1px 2px 0px oklch(0 0 0 / 0.06);
+  --shadow-button: 0px 1px 1px 0px oklch(1 0 0 / 0.06) inset, 0px 2px 3px 0px oklch(0 0 0 / 0.45), 0px 1px 1px 0px oklch(0 0 0 / 0.50);
+  --shadow-input: 0 0 0 1px oklch(1 0 0 / 0.09), 0px 2px 3px -1px oklch(0 0 0 / 0.08), 0px 1px 0px 0px oklch(0 0 0 / 0.02);
+  --shadow-input-hover: 0 0 0 1px oklch(1 0 0 / 0.16), 0px 2px 3px -1px oklch(0 0 0 / 0.08), 0px 1px 0px 0px oklch(0 0 0 / 0.02);
+  --shadow-secondary: 0 0 0 1px oklch(1 0 0 / 0.08), 0px 2px 3px -1px oklch(0 0 0 / 0.08), 0px 1px 0px 0px oklch(0 0 0 / 0.02);
+  --shadow-secondary-hover: 0 0 0 1px oklch(1 0 0 / 0.14), 0px 2px 3px -1px oklch(0 0 0 / 0.08), 0px 1px 0px 0px oklch(0 0 0 / 0.02);
+  --shadow-field: 0 0 0 1px oklch(1 0 0 / 0.08), 0px 0px 1px 0px oklch(0 0 0 / 0.08);
+  --shadow-field-hover: 0 0 0 1px oklch(1 0 0 / 0.18), 0px 0px 1px 0px oklch(0 0 0 / 0.10);
+  --shadow-elevated: 0 0 0 1px oklch(1 0 0 / 0.06), 0px 5px 15px 0px oklch(0 0 0 / 0.25), 0px 15px 35px -5px oklch(0 0 0 / 0.45);
+  --shadow-card-content: 0px 0px 2px 0px oklch(0 0 0 / 0.08), 0px 1px 2px 0px oklch(0 0 0 / 0.06);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  /* Only show focus ring on keyboard navigation, never on click */
+  :focus:not(:focus-visible) {
+    outline: none !important;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000) !important;
+  }
+  /* Prevent accidental text selection on interactive elements */
+  button, [role='button'], [role='tab'], [role='option'], [role='menuitem'],
+  [role='menuitemcheckbox'], [role='menuitemradio'], [role='radio'],
+  [role='checkbox'], label, [data-slot='switch'], [data-slot='checkbox'],
+  [data-slot='toggle-row'], summary {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+  h1, h2, h3, h4 {
+    text-wrap: balance;
+  }
+  p {
+    text-wrap: pretty;
+  }
+  /* Branded text selection */
+  ::selection {
+    background-color: oklch(0.574 0.207 257.4 / 0.15);
+    color: inherit;
+  }
+  /* Slashed zero + tabular nums for monospace contexts */
+  .font-mono, code, pre, kbd, samp {
+    font-variant-numeric: slashed-zero tabular-nums;
+  }
+  /* Global Hugeicons stroke-width */
+  :root { --icon-stroke-width: 1.75; }
+  svg[color='currentColor'] path,
+  svg[color='currentColor'] circle,
+  svg[color='currentColor'] rect,
+  svg[color='currentColor'] polyline,
+  svg[color='currentColor'] line,
+  svg[color='currentColor'] ellipse {
+    stroke-width: var(--icon-stroke-width);
+  }
+  /* Normalize icon stroke-width for custom SVGs */
+  svg[stroke='currentColor'] {
+    stroke-width: var(--icon-stroke-width, 1.75);
+  }
+}
+
+/* Global reduced-motion override */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Checkbox draw-on animation
+   ═══════════════════════════════════════════════════════════ */
+
+@keyframes draw-check {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+
+[data-slot='checkbox-indicator'] path {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  transition: stroke-dashoffset 120ms ease-out;
+}
+
+[data-slot='checkbox-indicator'][data-state='checked'] path {
+  stroke-dashoffset: 0;
+  animation: draw-check 250ms ease-out;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Checkbox hover fill
+   ═══════════════════════════════════════════════════════════ */
+
+[data-slot='checkbox'] { position: relative; }
+
+[data-slot='checkbox'][data-state='unchecked']::before {
+  content: '';
+  position: absolute;
+  inset: 2px;
+  border-radius: 2px;
+  background: oklch(0.278 0.03 256.85 / 0.08);
+  opacity: 0;
+  transition: opacity 150ms ease-out;
+  pointer-events: none;
+}
+
+.dark [data-slot='checkbox'][data-state='unchecked']::before {
+  background: oklch(1 0 0 / 0.10);
+}
+
+[data-slot='checkbox'][data-state='unchecked']:not(:disabled):hover::before {
+  opacity: 1;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Radio hover dot
+   ═══════════════════════════════════════════════════════════ */
+
+[data-slot='radio-group-item'] { position: relative; }
+
+[data-slot='radio-group-item'][data-state='unchecked']::before {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: oklch(0.278 0.03 256.85 / 0.12);
+  opacity: 0;
+  transition: opacity 150ms ease-out;
+  pointer-events: none;
+}
+
+.dark [data-slot='radio-group-item'][data-state='unchecked']::before {
+  background: oklch(1 0 0 / 0.15);
+}
+
+[data-slot='radio-group-item'][data-state='unchecked']:not(:disabled):hover::before {
+  opacity: 1;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Control + label hover feedback
+   ═══════════════════════════════════════════════════════════ */
+
+:has(> [data-slot='checkbox']):hover,
+:has(> [data-slot='switch']):hover,
+:has(> [data-slot='radio-group-item']):hover {
+  cursor: pointer;
+}
+
+:has(> [data-slot='checkbox']):hover > *,
+:has(> [data-slot='switch']):hover > *,
+:has(> [data-slot='radio-group-item']):hover > * {
+  cursor: pointer;
+}
+
+:has(> [data-slot='checkbox']):hover > [data-slot='checkbox'],
+:has(> [data-slot='switch']):hover > [data-slot='switch'],
+:has(> [data-slot='radio-group-item']):hover > [data-slot='radio-group-item'] {
+  filter: brightness(1.15);
+  transition: filter 0.1s ease-out;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Solid button gradient overlay
+   ═══════════════════════════════════════════════════════════ */
+
+[data-slot='button'][data-variant='default']::after,
+[data-slot='button'][data-variant='destructive']::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(180deg, oklch(1 0 0 / 1), oklch(1 0 0 / 0));
+  opacity: 0.1;
+  transition: opacity 0.5s;
+  pointer-events: none;
+}
+
+[data-slot='button'][data-variant='default']:hover::after,
+[data-slot='button'][data-variant='destructive']:hover::after {
+  opacity: 0.15;
+}
+
+[data-slot='button'][data-variant='default']:active::after,
+[data-slot='button'][data-variant='destructive']:active::after {
+  opacity: 0.05;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Custom Animations
+   ═══════════════════════════════════════════════════════════ */
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@keyframes shimmer-ltr {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes progress-indeterminate {
+  0% { transform: translateX(-100%); }
+  50% { transform: translateX(0%); }
+  100% { transform: translateX(100%); }
+}
+
+@utility animate-shimmer {
+  animation: shimmer 3s ease-in-out infinite;
+}
+
+@utility animate-progress-indeterminate {
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes onboarding-enter {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.onboarding-enter {
+  animation: onboarding-enter 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
+  will-change: transform, opacity;
+}
+.onboarding-card-enter {
+  opacity: 0;
+  transform: translateY(6px);
+  animation: onboarding-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
+  will-change: transform, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+  .onboarding-enter,
+  .onboarding-card-enter {
+    animation-duration: 0.01ms;
+    transform: none;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Card with footer
+   ═══════════════════════════════════════════════════════════ */
+
+[data-slot='card-content']:has(+ [data-slot='card-footer']),
+[data-slot='dialog-body']:has(+ [data-slot='dialog-footer']) {
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+  box-shadow: var(--shadow-card-content);
+  position: relative;
+  z-index: 1;
+}
+
+[data-slot='card-content'] + [data-slot='card-footer'],
+[data-slot='dialog-body'] + [data-slot='dialog-footer'] {
+  margin-top: -12px;
+  padding-top: calc(12px + 1rem);
+}