documentation-hub 5.7.2

package/src/styles/global.css

@@ -0,0 +1,782 @@
+/* Tailwind CSS v4 - Modern CSS-First Configuration */
+@import 'tailwindcss';
+
+/* Enable class-based dark mode */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Base Theme Definition */
+@theme {
+  /* Semantic Colors - Light Mode Defaults */
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(240 10% 4%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(240 10% 4%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(240 10% 4%);
+  --color-primary: hsl(217 91% 60%);
+  --color-primary-foreground: hsl(210 40% 98%);
+  --color-secondary: hsl(210 40% 96%);
+  --color-secondary-foreground: hsl(222 47% 11%);
+  --color-muted: hsl(210 40% 96%);
+  --color-muted-foreground: hsl(215 16% 47%);
+  --color-accent: hsl(210 40% 96%);
+  --color-accent-foreground: hsl(222 47% 11%);
+  --color-destructive: hsl(0 84% 60%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+  --color-border: hsl(214 32% 91%);
+  --color-input: hsl(214 32% 91%);
+  --color-ring: hsl(217 91% 60%);
+
+  /* Design Tokens */
+  --radius: 0.5rem;
+  --spacing-unit: 1;
+
+  /* Gradient Colors */
+  --gradient-from: hsl(217 91% 60%);
+  --gradient-to: hsl(258 90% 66%);
+
+  /* Custom Font Settings (defaults) */
+  --custom-font-size: 15px;
+  --custom-font-family: system-ui;
+  --custom-font-weight: 400;
+  --custom-font-style: normal;
+  --custom-letter-spacing: 0;
+  --custom-line-height: 1.5;
+}
+
+/* Theme Variants */
+@layer base {
+  /* ========================================
+     DARK MODE
+     ======================================== */
+  .dark {
+    --color-background: hsl(240 10% 4%);
+    --color-foreground: hsl(0 0% 98%);
+    --color-card: hsl(240 10% 4%);
+    --color-card-foreground: hsl(0 0% 98%);
+    --color-popover: hsl(240 10% 4%);
+    --color-popover-foreground: hsl(0 0% 98%);
+    --color-primary: hsl(213 94% 68%);
+    --color-primary-foreground: hsl(210 40% 98%);
+    --color-secondary: hsl(240 5% 10%);
+    --color-secondary-foreground: hsl(0 0% 98%);
+    --color-muted: hsl(240 5% 10%);
+    --color-muted-foreground: hsl(240 5% 65%);
+    --color-accent: hsl(240 5% 10%);
+    --color-accent-foreground: hsl(0 0% 98%);
+    --color-destructive: hsl(0 63% 31%);
+    --color-destructive-foreground: hsl(0 0% 98%);
+    --color-border: hsl(240 5% 16%);
+    --color-input: hsl(240 5% 16%);
+    --color-ring: hsl(217 91% 60%);
+  }
+
+  /* ========================================
+     ACCENT THEMES
+     ======================================== */
+
+  /* Purple Accent */
+  [data-accent='purple'] {
+    --color-primary: hsl(270 91% 65%);
+    --color-ring: hsl(270 91% 65%);
+    --gradient-from: hsl(270 91% 65%);
+    --gradient-to: hsl(270 91% 57%);
+  }
+
+  [data-accent='purple'].dark {
+    --color-primary: hsl(270 91% 76%);
+    --color-primary-foreground: hsl(0 0% 98%);
+    --color-ring: hsl(270 91% 65%);
+  }
+
+  /* Green Accent */
+  [data-accent='green'] {
+    --color-primary: hsl(142 71% 45%);
+    --color-ring: hsl(142 71% 45%);
+    --gradient-from: hsl(142 71% 45%);
+    --gradient-to: hsl(142 70% 37%);
+  }
+
+  [data-accent='green'].dark {
+    --color-primary: hsl(142 71% 65%);
+    --color-primary-foreground: hsl(0 0% 98%);
+    --color-ring: hsl(142 71% 45%);
+  }
+
+  /* Orange Accent */
+  [data-accent='orange'] {
+    --color-primary: hsl(25 95% 53%);
+    --color-ring: hsl(25 95% 53%);
+    --gradient-from: hsl(25 95% 53%);
+    --gradient-to: hsl(25 95% 48%);
+  }
+
+  [data-accent='orange'].dark {
+    --color-primary: hsl(25 95% 61%);
+    --color-primary-foreground: hsl(0 0% 98%);
+    --color-ring: hsl(25 95% 53%);
+  }
+
+  /* Pink Accent */
+  [data-accent='pink'] {
+    --color-primary: hsl(330 81% 60%);
+    --color-ring: hsl(330 81% 60%);
+    --gradient-from: hsl(330 81% 60%);
+    --gradient-to: hsl(330 81% 50%);
+  }
+
+  [data-accent='pink'].dark {
+    --color-primary: hsl(330 81% 70%);
+    --color-primary-foreground: hsl(0 0% 98%);
+    --color-ring: hsl(330 81% 60%);
+  }
+
+  /* Cyan Accent */
+  [data-accent='cyan'] {
+    --color-primary: hsl(189 94% 43%);
+    --color-ring: hsl(189 94% 43%);
+    --gradient-from: hsl(189 94% 43%);
+    --gradient-to: hsl(189 94% 37%);
+  }
+
+  [data-accent='cyan'].dark {
+    --color-primary: hsl(189 94% 53%);
+    --color-primary-foreground: hsl(0 0% 98%);
+    --color-ring: hsl(189 94% 43%);
+  }
+
+  /* Indigo Accent */
+  [data-accent='indigo'] {
+    --color-primary: hsl(239 84% 67%);
+    --color-ring: hsl(239 84% 67%);
+    --gradient-from: hsl(239 84% 67%);
+    --gradient-to: hsl(239 84% 59%);
+  }
+
+  [data-accent='indigo'].dark {
+    --color-primary: hsl(239 84% 75%);
+    --color-primary-foreground: hsl(0 0% 98%);
+    --color-ring: hsl(239 84% 67%);
+  }
+
+  /* Custom Accent (user-defined) */
+  [data-accent='custom'] {
+    --color-primary: hsl(var(--custom-accent));
+    --color-ring: hsl(var(--custom-accent));
+    --gradient-from: hsl(var(--custom-accent));
+    --gradient-to: hsl(var(--custom-accent));
+  }
+
+  [data-accent='custom'].dark {
+    --color-primary: hsl(var(--custom-accent));
+    --color-primary-foreground: hsl(0 0% 98%);
+    --color-ring: hsl(var(--custom-accent));
+  }
+
+  /* ========================================
+     CUSTOM COLORS OVERRIDE
+     ======================================== */
+  [data-custom-colors='true'] {
+    --color-primary: hsl(var(--custom-primary)) !important;
+    --color-background: hsl(var(--custom-background)) !important;
+    --color-foreground: hsl(
+      var(--custom-foreground)
+    ) !important; /* Auto-calculated based on luminance */
+    --color-border: hsl(var(--custom-border)) !important;
+    --color-card: hsl(var(--custom-background)) !important;
+    --color-card-foreground: hsl(var(--custom-foreground)) !important;
+    --color-popover: hsl(var(--custom-background)) !important;
+    --color-popover-foreground: hsl(var(--custom-foreground)) !important;
+    --color-muted-foreground: hsl(var(--custom-secondary-font)) !important;
+    --color-secondary-foreground: hsl(var(--custom-secondary-font)) !important;
+
+    /* Adaptive hover state colors - ensures readability with any custom color scheme */
+    --color-accent: color-mix(
+      in srgb,
+      hsl(var(--custom-foreground)) 12%,
+      hsl(var(--custom-background))
+    ) !important;
+    --color-accent-foreground: hsl(var(--custom-foreground)) !important;
+    --color-muted: color-mix(
+      in srgb,
+      hsl(var(--custom-foreground)) 8%,
+      hsl(var(--custom-background))
+    ) !important;
+    --color-secondary: color-mix(
+      in srgb,
+      hsl(var(--custom-foreground)) 6%,
+      hsl(var(--custom-background))
+    ) !important;
+  }
+
+  /* Custom header with auto-calculated text color */
+  [data-custom-colors='true'] .header-bg {
+    background-color: hsl(var(--custom-header)) !important;
+    color: hsl(var(--custom-header-text)) !important; /* Auto-calculated for contrast */
+  }
+
+  /* Force all text elements in header to use the auto-calculated header text color */
+  [data-custom-colors='true'] .header-bg *,
+  [data-custom-colors='true'] .header-bg button,
+  [data-custom-colors='true'] .header-bg span,
+  [data-custom-colors='true'] .header-bg p {
+    color: hsl(var(--custom-header-text)) !important;
+  }
+
+  /* Icons inherit text color */
+  [data-custom-colors='true'] .header-bg svg {
+    color: inherit !important;
+  }
+
+  /* Subtle variation for secondary text (descriptions, muted elements) */
+  [data-custom-colors='true'] .header-bg .text-muted-foreground {
+    opacity: 0.7;
+  }
+
+  /* Clock widget background adapts to custom header color */
+  [data-custom-colors='true'] .header-bg .clock-widget {
+    background-color: color-mix(
+      in srgb,
+      hsl(var(--custom-header)) 85%,
+      hsl(var(--custom-header-text)) 15%
+    ) !important;
+  }
+
+  /* Custom sidebar with auto-calculated text color */
+  [data-custom-colors='true'] .sidebar-bg {
+    background-color: hsl(var(--custom-sidebar)) !important;
+    color: hsl(var(--custom-sidebar-text)) !important; /* Auto-calculated for contrast */
+  }
+
+  /* Force base text elements in sidebar to use the auto-calculated sidebar text color */
+  [data-custom-colors='true']
+    .sidebar-bg
+    span:not(.text-primary-foreground):not(.text-accent-foreground),
+  [data-custom-colors='true']
+    .sidebar-bg
+    svg:not(.text-primary):not([class*='group-hover:text-primary']) {
+    color: hsl(var(--custom-sidebar-text)) !important;
+  }
+
+  /* Sidebar hover states - adaptive background with proper contrast */
+  [data-custom-colors='true'] .sidebar-bg [class*='hover:bg-accent']:hover {
+    background-color: color-mix(
+      in srgb,
+      hsl(var(--custom-sidebar-text)) 12%,
+      hsl(var(--custom-sidebar))
+    ) !important;
+  }
+
+  [data-custom-colors='true'] .sidebar-bg [class*='hover:text-accent-foreground']:hover {
+    color: hsl(var(--custom-sidebar-text)) !important;
+  }
+
+  /* Let active states keep their semantic colors - ensure all text is visible */
+  /* Doubled attribute selector bumps specificity to (0,5,1), beating the span:not() rule above at (0,4,1) */
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg .bg-primary span,
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg .bg-primary div,
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg .bg-primary div span,
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg .bg-primary button,
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg button.bg-primary,
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg button.bg-primary span,
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg button.bg-primary div,
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg button.bg-primary svg {
+    color: hsl(var(--custom-primary-text)) !important;
+  }
+
+  /* SVG stroke override for Lucide icons inside active sidebar items */
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg .bg-primary svg,
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg .bg-primary svg *,
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg button.bg-primary svg,
+  [data-custom-colors='true'][data-custom-colors='true'] .sidebar-bg button.bg-primary svg * {
+    color: hsl(var(--custom-primary-text)) !important;
+    stroke: hsl(var(--custom-primary-text)) !important;
+  }
+
+  /* Apply subtle secondary text color to muted elements */
+  [data-custom-colors='true'] .text-muted-foreground {
+    color: hsl(var(--custom-secondary-font)) !important;
+  }
+
+  /* Checkbox/toggle with auto-calculated colors for custom theme */
+  [data-custom-colors='true'] .checkbox-checked,
+  [data-custom-colors='true'] .toggle-checked {
+    background-color: hsl(var(--custom-primary)) !important;
+    border-color: hsl(var(--custom-primary)) !important;
+  }
+
+  /* Checkmark icon color based on primary color luminance */
+  [data-custom-colors='true'] .checkbox-checkmark {
+    color: hsl(var(--custom-primary-text)) !important;
+  }
+
+  /* ========================================
+     PRIMARY ELEMENT TEXT COLOR (LUMINANCE-BASED)
+     ======================================== */
+  /* Override primary-foreground color to use luminance-calculated text color */
+  [data-custom-colors='true'] {
+    --color-primary-foreground: hsl(var(--custom-primary-text)) !important;
+  }
+
+  /* Ensure all text on primary-colored elements uses the calculated color */
+  [data-custom-colors='true'] .bg-primary,
+  [data-custom-colors='true'] .bg-primary *,
+  [data-custom-colors='true'] button.bg-primary,
+  [data-custom-colors='true'] button.bg-primary *,
+  [data-custom-colors='true'] a.bg-primary,
+  [data-custom-colors='true'] a.bg-primary *,
+  [data-custom-colors='true'] div.bg-primary,
+  [data-custom-colors='true'] div.bg-primary * {
+    color: hsl(var(--custom-primary-text)) !important;
+  }
+
+  /* SVG icons within primary backgrounds - force color inheritance */
+  [data-custom-colors='true'] .bg-primary svg,
+  [data-custom-colors='true'] button.bg-primary svg,
+  [data-custom-colors='true'] a.bg-primary svg,
+  [data-custom-colors='true'] div.bg-primary svg {
+    color: hsl(var(--custom-primary-text)) !important;
+    --svg-color: hsl(var(--custom-primary-text)) !important;
+  }
+
+  /* Force SVG stroke color for Lucide icons (which use stroke, not fill) */
+  [data-custom-colors='true'] .bg-primary svg,
+  [data-custom-colors='true'] .bg-primary svg *,
+  [data-custom-colors='true'] button.bg-primary svg,
+  [data-custom-colors='true'] button.bg-primary svg * {
+    stroke: hsl(var(--custom-primary-text)) !important;
+  }
+
+  /* Text elements explicitly marked as primary-foreground */
+  [data-custom-colors='true'] .text-primary-foreground,
+  [data-custom-colors='true'] .text-primary-foreground * {
+    color: hsl(var(--custom-primary-text)) !important;
+  }
+
+  /* Ensure text-primary-foreground SVG icons also adapt */
+  [data-custom-colors='true'] .text-primary-foreground svg,
+  [data-custom-colors='true'] .text-primary-foreground svg * {
+    color: hsl(var(--custom-primary-text)) !important;
+    stroke: hsl(var(--custom-primary-text)) !important;
+  }
+
+  /* ========================================
+     READABLE PRIMARY ACCENT COLOR
+     ======================================== */
+  /* Override standalone text-primary (accent text/icons on page background) to use
+     the readable version that guarantees 3:1 contrast against the background.
+     This does NOT affect bg-primary (backgrounds keep the user's chosen color).
+     --custom-primary-readable is auto-calculated in ThemeContext. */
+  [data-custom-colors='true'] .text-primary {
+    color: hsl(var(--custom-primary-readable)) !important;
+  }
+
+  [data-custom-colors='true'] .text-primary svg,
+  [data-custom-colors='true'] svg.text-primary {
+    color: hsl(var(--custom-primary-readable)) !important;
+    stroke: hsl(var(--custom-primary-readable)) !important;
+  }
+
+  /* ========================================
+     TOGGLE BUTTON STYLING
+     ======================================== */
+  /* Toggle track borders for clear definition (following Radix UI, shadcn/ui patterns) */
+  button[role='switch'],
+  button[aria-label*='Toggle'],
+  button.toggle-checked,
+  .toggle-checked {
+    border: 2px solid var(--color-border);
+  }
+
+  /* Toggle track - On state gets primary border */
+  .toggle-checked,
+  button.toggle-checked,
+  button[role='switch'][aria-checked='true'] {
+    border-color: hsl(var(--color-primary));
+  }
+
+  /* Custom colors: toggle borders adapt with proper contrast */
+  [data-custom-colors='true'] button[role='switch'],
+  [data-custom-colors='true'] button[aria-label*='Toggle'] {
+    border: 2px solid color-mix(in srgb, hsl(var(--custom-foreground)) 50%, transparent) !important;
+  }
+
+  [data-custom-colors='true'] .toggle-checked,
+  [data-custom-colors='true'] button[aria-label*='Toggle'].toggle-checked,
+  [data-custom-colors='true'] button[role='switch'][aria-checked='true'] {
+    border: 2px solid hsl(var(--custom-primary)) !important;
+  }
+
+  /* Toggle knob - subtle border for definition against track (catches both span and motion.span) */
+  /* Fixed vertical alignment: top-0 for perfect centering (track is 24px, border 4px, knob 20px) */
+  button[role='switch'] > span,
+  button[aria-label*='Toggle'] > span {
+    top: 0 !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.12),
+      0 1px 2px rgba(0, 0, 0, 0.08) !important;
+  }
+
+  /* Dark mode: lighter knob border */
+  .dark button[role='switch'] > span,
+  .dark button[aria-label*='Toggle'] > span {
+    border-color: rgba(255, 255, 255, 0.15) !important;
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.3),
+      0 1px 2px rgba(0, 0, 0, 0.24) !important;
+  }
+
+  /* ========================================
+     DENSITY MODES
+     ======================================== */
+  [data-density='minimal'] {
+    --spacing-unit: 0.5;
+    --content-max-width: 100%;
+    font-size: 13px;
+  }
+
+  [data-density='compact'] {
+    --spacing-unit: 0.75;
+    --content-max-width: 100%;
+    font-size: 14px;
+  }
+
+  [data-density='comfortable'] {
+    --spacing-unit: 1;
+    --content-max-width: 100%;
+    font-size: 15px;
+  }
+
+  /* Apply density to common elements */
+  [data-density] .p-2 {
+    padding: calc(0.5rem * var(--spacing-unit));
+  }
+
+  [data-density] .p-3 {
+    padding: calc(0.75rem * var(--spacing-unit));
+  }
+
+  [data-density] .p-4 {
+    padding: calc(1rem * var(--spacing-unit));
+  }
+
+  [data-density] .p-6 {
+    padding: calc(1.5rem * var(--spacing-unit));
+  }
+
+  [data-density] .gap-2 {
+    gap: calc(0.5rem * var(--spacing-unit));
+  }
+
+  [data-density] .gap-3 {
+    gap: calc(0.75rem * var(--spacing-unit));
+  }
+
+  [data-density] .gap-4 {
+    gap: calc(1rem * var(--spacing-unit));
+  }
+
+  /* Fix layout issues in compact/minimal modes */
+  [data-density='compact'] main,
+  [data-density='minimal'] main {
+    max-width: var(--content-max-width);
+    width: 100%;
+    margin: 0;
+  }
+
+  /* Adjust sidebar spacing in density modes */
+  [data-density='minimal'] .sidebar-bg {
+    padding: calc(0.5rem * var(--spacing-unit));
+  }
+
+  [data-density='compact'] .sidebar-bg {
+    padding: calc(0.75rem * var(--spacing-unit));
+  }
+
+  /* Fix header spacing */
+  [data-density='minimal'] .header-bg,
+  [data-density='compact'] .header-bg {
+    padding-left: calc(1.5rem * var(--spacing-unit));
+    padding-right: calc(1.5rem * var(--spacing-unit));
+  }
+
+  /* Ensure proper content alignment */
+  [data-density] .max-w-7xl {
+    max-width: 100%;
+  }
+
+  [data-density='minimal'] .px-6,
+  [data-density='compact'] .px-6 {
+    padding-left: calc(1.5rem * var(--spacing-unit));
+    padding-right: calc(1.5rem * var(--spacing-unit));
+  }
+
+  /* ========================================
+     BASE STYLES
+     ======================================== */
+  * {
+    border-color: var(--color-border);
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: var(--custom-font-size, 15px);
+    font-family: var(--custom-font-family, system-ui);
+    font-weight: var(--custom-font-weight, 400);
+    font-style: var(--custom-font-style, normal);
+    letter-spacing: var(--custom-letter-spacing, 0);
+    line-height: var(--custom-line-height, 1.5);
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  /* ========================================
+     ANIMATIONS & EFFECTS
+     ======================================== */
+
+  /* Disable animations */
+  .no-animations * {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  /* Disable blur effects */
+  .no-blur .glass,
+  .no-blur .backdrop-blur-xl,
+  .no-blur .backdrop-blur-md {
+    backdrop-filter: none !important;
+    background: var(--color-background) !important;
+  }
+
+  /* Reduce motion - accessibility option */
+  .reduce-motion *,
+  .reduce-motion *::before,
+  .reduce-motion *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  /* Also respect system preference for reduced motion */
+  @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;
+    }
+  }
+
+  /* Scrollbar Styling */
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: var(--color-muted);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--color-muted-foreground) 20%, transparent);
+    border-radius: 0.375rem;
+    transition: background-color 0.2s;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in srgb, var(--color-muted-foreground) 30%, transparent);
+  }
+
+  /* Custom theme scrollbar colors */
+  [data-custom-colors='true'] ::-webkit-scrollbar-track {
+    background-color: color-mix(
+      in srgb,
+      hsl(var(--custom-background)) 90%,
+      hsl(var(--custom-foreground)) 10%
+    );
+  }
+
+  [data-custom-colors='true'] ::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, hsl(var(--custom-foreground)) 20%, transparent);
+  }
+
+  [data-custom-colors='true'] ::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in srgb, hsl(var(--custom-foreground)) 30%, transparent);
+  }
+
+  /* Selection */
+  ::selection {
+    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+    color: var(--color-primary-foreground);
+  }
+
+  /* Electron Window Controls */
+  .drag-region {
+    -webkit-app-region: drag;
+  }
+
+  .no-drag {
+    -webkit-app-region: no-drag;
+  }
+
+  /* Hide Search Cancel Button */
+  input[type='search']::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  /* Skeleton Loading Animation */
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  .skeleton {
+    position: relative;
+    overflow: hidden;
+    background-color: var(--color-muted);
+  }
+
+  .skeleton::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      color-mix(in srgb, var(--color-muted-foreground) 8%, transparent),
+      transparent
+    );
+    animation: shimmer 1.5s infinite;
+  }
+
+  /* ========================================
+     GLASS MORPHISM EFFECTS
+     ======================================== */
+  .glass {
+    background-color: color-mix(in srgb, var(--color-background) 60%, transparent);
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+  }
+
+  .glass-heavy {
+    background-color: color-mix(in srgb, var(--color-background) 30%, transparent);
+    -webkit-backdrop-filter: blur(24px);
+    backdrop-filter: blur(24px);
+    background-image: linear-gradient(
+      to bottom right,
+      rgba(255, 255, 255, 0.1),
+      rgba(255, 255, 255, 0.05)
+    );
+  }
+
+  .glass-light {
+    background-color: color-mix(in srgb, var(--color-background) 80%, transparent);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+  }
+
+  @supports not (backdrop-filter: blur(10px)) {
+    .glass,
+    .glass-heavy,
+    .glass-light {
+      background-color: color-mix(in srgb, var(--color-background) 95%, transparent);
+    }
+  }
+
+  /* ========================================
+     DARK MODE SPECIFIC EFFECTS
+     ======================================== */
+  .dark .glow {
+    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.5));
+  }
+
+  .dark .glow-primary {
+    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--color-primary) 50%, transparent));
+  }
+
+  /* ========================================
+     INTERACTIVE EFFECTS
+     ======================================== */
+  .interactive-hover {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .interactive-hover::before {
+    content: '';
+    position: absolute;
+    top: var(--mouse-y, 50%);
+    left: var(--mouse-x, 50%);
+    transform: translate(-50%, -50%);
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
+    transition:
+      width 0.3s,
+      height 0.3s;
+    pointer-events: none;
+  }
+
+  .interactive-hover:hover::before {
+    width: 200%;
+    height: 200%;
+  }
+
+  /* Bento Grid Item */
+  .bento-item {
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-border);
+    padding: 1rem;
+    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .bento-item:hover {
+    box-shadow:
+      0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Bento Grid Layout */
+  .bento-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+
+  /* Progressive Blur */
+  .progressive-blur {
+    mask-image: linear-gradient(to bottom, black 60%, transparent);
+  }
+}
+
+/* ========================================
+   UTILITY CLASSES
+   ======================================== */
+
+/* Scrollbar Hide Utility */
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}