@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/global.scss

@@ -0,0 +1,954 @@
+/* src/global.css */
+/* NOTE: Tailwind imports are in tailwind-config.css to prevent Sass mangling */
+/* NOTE: Font @import url() moved to tailwind-config.css to fix CSS ordering warnings */
+
+@import "./styles/theme.css";
+
+/* Glass effect */
+.glass-effect {
+  @apply overflow-hidden backdrop-blur-lg;
+  background-image: var(--glass-gradient-outer);
+
+  /* Multi-layer borders - light highlight on top/left edges */
+  border-top: 1px solid
+    color-mix(in srgb, var(--color-background) 90%, transparent);
+  border-left: 1px solid
+    color-mix(in srgb, var(--color-background) 70%, transparent);
+  border-right: 1px solid
+    color-mix(in srgb, var(--color-border) 50%, transparent);
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--color-border) 60%, transparent);
+
+  /* Layered shadows for depth + subtle outer glow */
+  box-shadow:
+    inset 0 1px 4px 2px color-mix(in srgb, white 30%, transparent),
+    inset 0 -1px 2px 0 color-mix(in srgb, var(--color-border) 30%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--color-border) 80%, transparent),
+    0 4px 16px -4px color-mix(in srgb, var(--color-border) 40%, transparent),
+    0 24px 44px -12px rgb(0 0 0 / 0.1);
+  &:before {
+    content: "";
+    @apply absolute inset-0 m-[0.5px] opacity-70;
+    z-index: -1;
+    border-radius: inherit;
+    background-image: var(--glass-gradient-inner);
+  }
+  &:after {
+    content: "";
+    @apply absolute inset-0 m-[1px] opacity-90  border-2 border-neutral-500 blur-lg;
+    border-radius: inherit;
+    z-index: -1;
+  }
+}
+
+/*
+   Glass Effect Opus - Gradient border that glows from top-left
+   Designed to match the "music card" aesthetic with directional light:
+   - Gradient border: bright at top-left, fading toward bottom-right
+   - High backdrop blur for frosted glass look
+   - Subtle inner glow
+   - Works on any background color
+*/
+.glass-effect-2 {
+  position: relative;
+  overflow: hidden;
+  @apply backdrop-blur-2xl;
+
+  /* Semi-transparent dark background for the glass */
+  background: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.08) 0%,
+    rgba(255, 255, 255, 0.02) 100%
+  );
+
+  /* Subtle inner shadow for depth */
+  box-shadow:
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1),
+    0 8px 32px 0 rgba(0, 0, 0, 0.2);
+
+  /* Gradient border using ::before pseudo-element */
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px; /* Border thickness */
+
+    /* Gradient from top-left (bright) to bottom-right (dim) */
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.15) 0%,
+      rgba(255, 255, 255, 0.15) 25%,
+      rgba(255, 255, 255, 0) 50%,
+      rgba(255, 255, 255, 0.05) 75%,
+      rgba(255, 255, 255, 0.02) 100%
+    );
+
+    /* Mask to show only the border (hollow out the center) */
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+
+    pointer-events: none;
+  }
+}
+
+/*
+   Glass Effect Opus 2 - Multi-point gradient border with rim lighting
+   More sophisticated version with "shine" at multiple points:
+   - Strong brightness at top-left corner
+   - Glow continues along top and left edges
+   - Subtle rim light on other edges
+   - Creates a 3D lit glass effect
+*/
+.glass-effect-3 {
+  position: relative;
+  overflow: hidden;
+  @apply backdrop-blur-2xl;
+
+  /* Semi-transparent background for the glass */
+  background: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.08) 0%,
+    rgba(255, 255, 255, 0.02) 100%
+  );
+
+  /* Subtle inner shadow for depth */
+  box-shadow:
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1),
+    0 8px 32px 0 rgba(0, 0, 0, 0.2);
+
+  /* Multi-layer gradient border using ::before */
+  &::before {
+    content: "";
+    @apply absolute inset-0 blur-lg;
+    border-radius: inherit;
+    padding: 0.5px; /* Border thickness */
+
+    /* Layered gradients for multi-point shine effect */
+    background:
+      /* Top-left corner highlight - strong radial glow */
+      radial-gradient(
+        ellipse 60% 40% at 5% 5%,
+        rgba(255, 255, 255, 0.7) 0%,
+        transparent 50%
+      ),
+      /* Top edge glow spreading right */
+      linear-gradient(
+          90deg,
+          rgba(255, 255, 255, 0.5) 0%,
+          rgba(255, 255, 255, 0.25) 20%,
+          rgba(255, 255, 255, 0.1) 50%,
+          rgba(255, 255, 255, 0.03) 80%,
+          transparent 100%
+        ),
+      /* Left edge glow spreading down */
+      linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.4) 0%,
+          rgba(255, 255, 255, 0.15) 30%,
+          rgba(255, 255, 255, 0.05) 60%,
+          transparent 100%
+        ),
+      /* Bottom-right subtle highlight for rim effect */
+      radial-gradient(
+          ellipse 40% 30% at 95% 95%,
+          rgba(255, 255, 255, 0.08) 0%,
+          transparent 50%
+        ),
+      /* Very subtle base border for continuity */
+      linear-gradient(
+          135deg,
+          rgba(255, 255, 255, 0.1) 0%,
+          rgba(255, 255, 255, 0.04) 50%,
+          rgba(255, 255, 255, 0.02) 100%
+        );
+
+    /* Mask to show only the border */
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+
+    pointer-events: none;
+  }
+}
+
+/*
+   Glass Effect Opus 3 - Copy of glass-effect with gradient border
+   Same as .glass-effect but with gradient border instead of solid borders
+*/
+.glass-effect-4 {
+  @apply overflow-hidden backdrop-blur-lg;
+  background-image: var(--glass-gradient-outer);
+
+  /* Layered shadows for depth + subtle outer glow (same as glass-effect) */
+  box-shadow:
+    inset 0 1px 4px 2px color-mix(in srgb, white 30%, transparent),
+    inset 0 -1px 2px 0 color-mix(in srgb, var(--color-border) 30%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--color-border) 80%, transparent),
+    0 4px 16px -4px color-mix(in srgb, var(--color-border) 40%, transparent),
+    0 24px 44px -12px rgb(0 0 0 / 0.1);
+
+  /* Gradient border using ::before */
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 0.5px; /* Border thickness */
+
+    /* Gradient from top-left (bright) to bottom-right (dim) */
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.2) 25%,
+      rgba(255, 255, 255, 0.2) 50%,
+      rgba(255, 255, 255, 0.2) 75%,
+      rgba(255, 255, 255, 0.1) 100%
+    );
+
+    /* Mask to show only the border (hollow out the center) */
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+
+    pointer-events: none;
+  }
+
+  /* Inner glow/halo effect - same as glass-effect ::after */
+  &::after {
+    content: "";
+    @apply absolute inset-0 m-[1px] opacity-20 border-2 border-neutral-500 blur-lg;
+    border-radius: inherit;
+    z-index: -1;
+  }
+}
+
+/*
+   Glass Effect 2 - Ultra-premium frosted glass
+   Designed to match the "music card" aesthetic:
+   - High blur
+   - Clean, thin white border
+   - Subtle inner glow
+   - Deep drop shadow
+*/
+.glass-effect-5 {
+  @apply overflow-hidden backdrop-blur-2xl;
+
+  /* Subtle gradient background - mostly transparent */
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.12) 0%,
+    rgba(255, 255, 255, 0.04) 100%
+  );
+
+  /* Distinct, thin semi-transparent light border */
+  border: 1px solid rgba(255, 255, 255, 0.18);
+
+  /* Shadows: 
+     1. Inner white highlight to accentuate the edge (bevel effect)
+     2. Deep, soft drop shadow for elevation
+  */
+  box-shadow:
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
+    0 8px 32px 0 rgba(31, 38, 135, 0.15);
+
+  /* Ensure it works on dark mode too with slightly different values if needed,
+     but for now, the "white glass" look is often universal. */
+}
+
+/* Global overlay scrollbar styling */
+@layer base {
+  :root {
+    /* Scrollbar styling */
+    --ui-scrollbar-size: 4px;
+    --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.3);
+    --ui-scrollbar-thumb-active: rgb(209 213 219);
+    --ui-scrollbar-track-rest: transparent;
+    --ui-scrollbar-track-active: rgba(209, 213, 219, 0.1);
+  }
+
+  * {
+    /* Firefox - use thin scrollbar with custom colors */
+    scrollbar-width: thin;
+    scrollbar-color: var(--ui-scrollbar-thumb-rest)
+      var(--ui-scrollbar-track-rest);
+    -ms-overflow-style: none; /* IE/Edge */
+  }
+
+  /* Show more prominent scrollbars on hover/focus */
+  *:hover,
+  *:focus,
+  *:active {
+    scrollbar-color: var(--ui-scrollbar-thumb-active)
+      var(--ui-scrollbar-track-active);
+  }
+
+  /* Webkit overlay scrollbars */
+  *::-webkit-scrollbar {
+    width: var(--ui-scrollbar-size);
+    height: var(--ui-scrollbar-size);
+    /* Make scrollbar overlay instead of taking up space */
+    position: absolute;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: var(--ui-scrollbar-track-rest);
+    transition: background-color 0.3s ease;
+    /* Position track to overlay on right edge */
+    position: absolute;
+    right: 0;
+    border-radius: calc(var(--ui-scrollbar-size) / 2);
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--ui-scrollbar-thumb-rest);
+    border-radius: calc(var(--ui-scrollbar-size) / 2);
+    transition: background-color 0.3s ease;
+    /* Ensure thumb overlays properly */
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Show scrollbar on hover/focus/active states */
+  *:hover::-webkit-scrollbar-thumb,
+  *:focus::-webkit-scrollbar-thumb,
+  *:active::-webkit-scrollbar-thumb {
+    background: var(--ui-scrollbar-thumb-active);
+  }
+
+  *:hover::-webkit-scrollbar-track,
+  *:focus::-webkit-scrollbar-track,
+  *:active::-webkit-scrollbar-track {
+    background: var(--ui-scrollbar-track-active);
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+    position: absolute;
+  }
+}
+
+@layer utilities {
+  /* Shadow elevation utilities */
+  .shadow-real-sm {
+    box-shadow:
+      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+      0.1px 3.6px 3.2px -4.1px rgba(0, 0, 0, 0.08);
+  }
+
+  .shadow-real-md {
+    box-shadow:
+      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+      0.1px 3.7px 3.3px -2px rgba(0, 0, 0, 0.09),
+      0.4px 18.2px 16.2px -4.1px rgba(0, 0, 0, 0.06);
+  }
+
+  .shadow-real-lg {
+    box-shadow:
+      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+      0.1px 3.6px 3.2px -0.8px rgba(0, 0, 0, 0.06),
+      0.2px 9.5px 8.5px -1.6px rgba(0, 0, 0, 0.06),
+      0.5px 22.6px 20.2px -2.4px rgba(0, 0, 0, 0.05),
+      1.1px 47.3px 42.2px -3.2px rgba(0, 0, 0, 0.04),
+      2.1px 87.7px 78.3px -4.1px rgba(0, 0, 0, 0.03);
+  }
+
+  .shadow-real-xl {
+    box-shadow:
+      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+      0.2px 4.8px 4.3px -0.5px rgba(0, 0, 0, 0.06),
+      0.4px 11.2px 10px -1px rgba(0, 0, 0, 0.06),
+      0.7px 21.3px 19px -1.5px rgba(0, 0, 0, 0.05),
+      1.2px 38.4px 34.3px -2px rgba(0, 0, 0, 0.05),
+      2px 64.6px 57.7px -2.5px rgba(0, 0, 0, 0.04),
+      3.1px 102.1px 91.2px -3px rgba(0, 0, 0, 0.03),
+      4.7px 154.3px 137.8px -3.5px rgba(0, 0, 0, 0.03),
+      6.8px 222.5px 198.7px -4.1px rgba(0, 0, 0, 0.02);
+  }
+
+  .shadow-real-2xl {
+    box-shadow:
+      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+      0.3px 6.2px 5.5px -0.3px rgba(0, 0, 0, 0.06),
+      0.6px 14.8px 13.2px -0.6px rgba(0, 0, 0, 0.06),
+      1px 27.1px 24.2px -0.9px rgba(0, 0, 0, 0.06),
+      1.6px 45.2px 40.4px -1.2px rgba(0, 0, 0, 0.05),
+      2.5px 70.3px 62.8px -1.5px rgba(0, 0, 0, 0.05),
+      3.7px 104.2px 93.1px -1.8px rgba(0, 0, 0, 0.04),
+      5.4px 148.9px 133px -2.1px rgba(0, 0, 0, 0.04),
+      7.6px 207.4px 185.3px -2.4px rgba(0, 0, 0, 0.03),
+      10.4px 283.8px 253.5px -2.7px rgba(0, 0, 0, 0.03),
+      14px 381.6px 340.9px -3px rgba(0, 0, 0, 0.02),
+      18.4px 503.7px 450px -3.3px rgba(0, 0, 0, 0.02);
+  }
+
+  .shadow-real-3xl {
+    box-shadow:
+      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
+      0.4px 8.1px 7.2px -0.2px rgba(0, 0, 0, 0.06),
+      0.8px 19.3px 17.2px -0.4px rgba(0, 0, 0, 0.06),
+      1.3px 34.8px 31.1px -0.6px rgba(0, 0, 0, 0.06),
+      2px 55.2px 49.3px -0.8px rgba(0, 0, 0, 0.06),
+      3px 81.7px 73px -1px rgba(0, 0, 0, 0.05),
+      4.3px 115.8px 103.4px -1.2px rgba(0, 0, 0, 0.05),
+      6px 158.9px 142px -1.4px rgba(0, 0, 0, 0.05),
+      8.2px 212.4px 189.7px -1.6px rgba(0, 0, 0, 0.04),
+      10.9px 278.8px 249.1px -1.8px rgba(0, 0, 0, 0.04),
+      14.2px 360.5px 322.1px -2px rgba(0, 0, 0, 0.03),
+      18.2px 460.1px 411px -2.2px rgba(0, 0, 0, 0.03),
+      23px 579.9px 518px -2.4px rgba(0, 0, 0, 0.02),
+      28.7px 722.4px 645.3px -2.6px rgba(0, 0, 0, 0.02),
+      35.3px 890.8px 796px -2.8px rgba(0, 0, 0, 0.02);
+  }
+}
+
+@layer utilities {
+  /* Overlay scrollbar utility classes */
+  .scrollbar-thin {
+    --ui-scrollbar-size: 6px;
+  }
+
+  .scrollbar-thick {
+    --ui-scrollbar-size: 8px;
+  }
+
+  .scrollbar-thumb-gray-300 {
+    --ui-scrollbar-thumb-active: rgb(209 213 219);
+  }
+
+  .scrollbar-thumb-\[var\(--color-neutral-300\)\] {
+    --ui-scrollbar-thumb-active: var(--color-neutral-300);
+  }
+
+  .scrollbar-track-\[var\(--color-neutral-100\)\] {
+    --ui-scrollbar-track-active: var(--color-neutral-100);
+  }
+
+  .scrollbar-track-transparent {
+    --ui-scrollbar-track-active: transparent;
+  }
+
+  /* Auto-show scrollbars (default behavior) - visible when scrollable, prominent on hover */
+  .scrollbar-auto-show {
+    --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.3);
+    --ui-scrollbar-thumb-active: rgb(209 213 219);
+    --ui-scrollbar-track-rest: transparent;
+    --ui-scrollbar-track-active: rgba(209, 213, 219, 0.1);
+  }
+
+  /* Hide scrollbars until hover (minimal UI approach) */
+  .scrollbar-auto-hide {
+    --ui-scrollbar-thumb-rest: transparent;
+    --ui-scrollbar-track-rest: transparent;
+    scrollbar-color: transparent transparent;
+  }
+
+  .scrollbar-auto-hide:hover,
+  .scrollbar-auto-hide:focus,
+  .scrollbar-auto-hide.scrolling {
+    --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.7);
+    --ui-scrollbar-thumb-active: rgb(209 213 219);
+    --ui-scrollbar-track-rest: transparent;
+    --ui-scrollbar-track-active: rgba(209, 213, 219, 0.1);
+    scrollbar-color: var(--ui-scrollbar-thumb-rest)
+      var(--ui-scrollbar-track-rest);
+  }
+
+  /* Always visible scrollbars with full opacity */
+  .scrollbar-always-visible {
+    --ui-scrollbar-thumb-rest: rgb(209 213 219);
+    --ui-scrollbar-thumb-active: rgb(156 163 175);
+    --ui-scrollbar-track-rest: rgba(229, 231, 235, 0.5);
+    --ui-scrollbar-track-active: rgb(229 231 235);
+    scrollbar-color: var(--ui-scrollbar-thumb-rest)
+      var(--ui-scrollbar-track-rest);
+  }
+
+  /* Completely hide scrollbars */
+  .scrollbar-hide {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    scrollbar-color: transparent transparent;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hover-only visibility for minimal interfaces */
+  .scrollbar-hover-only {
+    --ui-scrollbar-thumb-rest: transparent;
+    --ui-scrollbar-track-rest: transparent;
+    scrollbar-color: transparent transparent;
+  }
+
+  .scrollbar-hover-only:hover {
+    --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.6);
+    --ui-scrollbar-thumb-active: rgb(209 213 219);
+    scrollbar-color: var(--ui-scrollbar-thumb-rest)
+      var(--ui-scrollbar-track-rest);
+  }
+}
+
+/* ─── Neumorphic Surface Utilities ───
+   Usage: <div class="neu-raised rounded-2xl p-4 bg-neutral-800">
+   Uses ::after for gradient border — composes cleanly with bg-image (::before).
+   Content inside needs "relative z-2" to sit above the ::after border.
+*/
+@layer utilities {
+  .neu-raised {
+    position: relative;
+    box-shadow: var(--neu-raised-shadow);
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: var(--neu-border-width, 1.5px);
+      background: var(--neu-raised-border);
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  .neu-inset {
+    position: relative;
+    box-shadow: var(--neu-inset-shadow);
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: var(--neu-border-width, 1.5px);
+      background: var(--neu-inset-border);
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  /* Circle button — outer groove */
+  .neu-circle-groove {
+    position: relative;
+    border-radius: 9999px;
+    box-shadow: var(--neu-circle-groove-shadow);
+    border: 1px solid rgba(0,0,0,0.12);
+
+    .dark & {
+      border-color: rgba(0,0,0,0.40);
+    }
+  }
+
+  /* Circle button — inner disc (gradient border via ::after) */
+  .neu-circle-disc {
+    position: absolute;
+    inset: 2px;
+    border-radius: 9999px;
+    box-shadow: var(--neu-circle-disc-shadow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: var(--neu-border-width, 1.5px);
+      background: var(--neu-raised-border);
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  /* Preset border-width modifiers */
+  .neu-border-thin {
+    --neu-border-width: 1px;
+  }
+  .neu-border-thick {
+    --neu-border-width: 2px;
+  }
+}
+
+/* Background image utility system
+   Usage: <div className="background-1 background-blur-2xl background-scale-125">
+   Uses ::before pseudo-element — content needs "relative z-10" to appear above.
+   Base class auto-applies position:relative and overflow:hidden.
+*/
+@layer utilities {
+  /* Shared base setup for all bg-image classes */
+  .bg-image {
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      background-image: var(--bg-image);
+      background-size: cover;
+      background-position: center;
+      filter: blur(var(--bg-image-blur, 0px));
+      transform: scale(var(--bg-image-scale, 1));
+      opacity: var(--bg-image-opacity, 0.5);
+      mix-blend-mode: var(--bg-image-blend, multiply);
+      pointer-events: none;
+    }
+  }
+
+  /* Image presets */
+  .bg-image-1 {
+    --bg-image: url("/bg/1.jpg");
+  }
+  .bg-image-2 {
+    --bg-image: url("/bg/2.jpg");
+  }
+  .bg-image-3 {
+    --bg-image: url("/bg/3.jpg");
+  }
+  .bg-image-4 {
+    --bg-image: url("/bg/4.jpg");
+  }
+  .bg-image-5 {
+    --bg-image: url("/bg/5.jpg");
+  }
+  .bg-image-6 {
+    --bg-image: url("/bg/6.jpg");
+  }
+  .bg-image-7 {
+    --bg-image: url("/bg/7.jpg");
+  }
+  .bg-image-8 {
+    --bg-image: url("/bg/8.jpg");
+  }
+  .bg-image-9 {
+    --bg-image: url("/bg/9.jpg");
+  }
+  .bg-image-10 {
+    --bg-image: url("/bg/10.jpg");
+  }
+  .bg-image-11 {
+    --bg-image: url("/bg/11.jpg");
+  }
+  .bg-image-12 {
+    --bg-image: url("/bg/12.jpg");
+  }
+  .bg-image-13 {
+    --bg-image: url("/bg/13.jpg");
+  }
+  .bg-image-14 {
+    --bg-image: url("/bg/14.jpg");
+  }
+  .bg-image-15 {
+    --bg-image: url("/bg/15.jpg");
+  }
+  .bg-image-16 {
+    --bg-image: url("/bg/16.jpg");
+  }
+  .bg-image-17 {
+    --bg-image: url("/bg/17.jpg");
+  }
+  .bg-image-18 {
+    --bg-image: url("/bg/18.jpg");
+  }
+  .bg-image-19 {
+    --bg-image: url("/bg/19.jpg");
+  }
+  .bg-image-20 {
+    --bg-image: url("/bg/20.jpg");
+  }
+  .bg-image-21 {
+    --bg-image: url("/bg/21.jpg");
+  }
+  .bg-image-22 {
+    --bg-image: url("/bg/22.jpg");
+  }
+  .bg-image-23 {
+    --bg-image: url("/bg/23.jpg");
+  }
+  .bg-image-24 {
+    --bg-image: url("/bg/24.jpg");
+  }
+
+  /* Blur modifiers */
+  .bg-image-blur-sm {
+    --bg-image-blur: 4px;
+  }
+  .bg-image-blur-md {
+    --bg-image-blur: 8px;
+  }
+  .bg-image-blur-lg {
+    --bg-image-blur: 16px;
+  }
+  .bg-image-blur-xl {
+    --bg-image-blur: 24px;
+  }
+  .bg-image-blur-2xl {
+    --bg-image-blur: 40px;
+  }
+  .bg-image-blur-3xl {
+    --bg-image-blur: 64px;
+  }
+
+  /* Scale modifiers */
+  .bg-image-scale-105 {
+    --bg-image-scale: 1.05;
+  }
+  .bg-image-scale-110 {
+    --bg-image-scale: 1.1;
+  }
+  .bg-image-scale-125 {
+    --bg-image-scale: 1.25;
+  }
+  .bg-image-scale-150 {
+    --bg-image-scale: 1.5;
+  }
+
+  /* Opacity modifiers */
+  .bg-image-opacity-0 {
+    --bg-image-opacity: 0;
+  }
+  .bg-image-opacity-5 {
+    --bg-image-opacity: 0.05;
+  }
+  .bg-image-opacity-10 {
+    --bg-image-opacity: 0.1;
+  }
+  .bg-image-opacity-15 {
+    --bg-image-opacity: 0.15;
+  }
+  .bg-image-opacity-20 {
+    --bg-image-opacity: 0.2;
+  }
+  .bg-image-opacity-25 {
+    --bg-image-opacity: 0.25;
+  }
+  .bg-image-opacity-30 {
+    --bg-image-opacity: 0.3;
+  }
+  .bg-image-opacity-35 {
+    --bg-image-opacity: 0.35;
+  }
+  .bg-image-opacity-40 {
+    --bg-image-opacity: 0.4;
+  }
+  .bg-image-opacity-45 {
+    --bg-image-opacity: 0.45;
+  }
+  .bg-image-opacity-50 {
+    --bg-image-opacity: 0.5;
+  }
+  .bg-image-opacity-55 {
+    --bg-image-opacity: 0.55;
+  }
+  .bg-image-opacity-60 {
+    --bg-image-opacity: 0.6;
+  }
+  .bg-image-opacity-65 {
+    --bg-image-opacity: 0.65;
+  }
+  .bg-image-opacity-70 {
+    --bg-image-opacity: 0.7;
+  }
+  .bg-image-opacity-75 {
+    --bg-image-opacity: 0.75;
+  }
+  .bg-image-opacity-80 {
+    --bg-image-opacity: 0.8;
+  }
+  .bg-image-opacity-85 {
+    --bg-image-opacity: 0.85;
+  }
+  .bg-image-opacity-90 {
+    --bg-image-opacity: 0.9;
+  }
+  .bg-image-opacity-95 {
+    --bg-image-opacity: 0.95;
+  }
+  .bg-image-opacity-100 {
+    --bg-image-opacity: 1;
+  }
+
+  /* Blend mode modifiers */
+  .bg-image-blend-normal {
+    --bg-image-blend: normal;
+  }
+  .bg-image-blend-multiply {
+    --bg-image-blend: multiply;
+  }
+  .bg-image-blend-screen {
+    --bg-image-blend: screen;
+  }
+  .bg-image-blend-overlay {
+    --bg-image-blend: overlay;
+  }
+  .bg-image-blend-darken {
+    --bg-image-blend: darken;
+  }
+  .bg-image-blend-lighten {
+    --bg-image-blend: lighten;
+  }
+  .bg-image-blend-color-dodge {
+    --bg-image-blend: color-dodge;
+  }
+  .bg-image-blend-color-burn {
+    --bg-image-blend: color-burn;
+  }
+  .bg-image-blend-hard-light {
+    --bg-image-blend: hard-light;
+  }
+  .bg-image-blend-soft-light {
+    --bg-image-blend: soft-light;
+  }
+  .bg-image-blend-difference {
+    --bg-image-blend: difference;
+  }
+  .bg-image-blend-exclusion {
+    --bg-image-blend: exclusion;
+  }
+  .bg-image-blend-hue {
+    --bg-image-blend: hue;
+  }
+  .bg-image-blend-saturation {
+    --bg-image-blend: saturation;
+  }
+  .bg-image-blend-color {
+    --bg-image-blend: color;
+  }
+  .bg-image-blend-luminosity {
+    --bg-image-blend: luminosity;
+  }
+}
+
+/* Apply fonts globally */
+html,
+body {
+  font-family: var(--font-family-base);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Auto-fill input styling resets - fixes border-radius issues with auto-populated inputs */
+@layer base {
+  /* Webkit browsers (Chrome, Safari, Edge) */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    border-radius: var(--form-radius) !important;
+  }
+
+  /* Firefox - handle auto-fill styling */
+  input:-moz-autofill {
+    border-radius: var(--form-radius) !important;
+  }
+
+  /* Ensure form controls maintain their styling when auto-filled */
+  input[type="text"]:-webkit-autofill,
+  input[type="email"]:-webkit-autofill,
+  input[type="password"]:-webkit-autofill,
+  input[type="tel"]:-webkit-autofill,
+  input[type="url"]:-webkit-autofill,
+  input[type="search"]:-webkit-autofill {
+    border-radius: var(--form-radius) !important;
+  }
+
+  /* Hide native number input spinners */
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+}
+
+/* Heatmap flicker animation */
+@keyframes flicker {
+  0% {
+    opacity: 0;
+    transform: scale(1.05);
+  }
+  20% {
+    opacity: 0.3;
+    transform: scale(1.02);
+  }
+  40% {
+    opacity: 0.1;
+    transform: scale(1.03);
+  }
+  60% {
+    opacity: 0.7;
+    transform: scale(1.01);
+  }
+  80% {
+    opacity: 0.4;
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+    /* No opacity at 100% - let inline styles control final opacity */
+  }
+}
+
+/* Loader shimmer animation for indeterminate linear progress */
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(300%);
+  }
+}
+
+/* Progress bar indeterminate animation */
+@keyframes progress-indeterminate {
+  0% {
+    left: -33%;
+    width: 33%;
+  }
+  50% {
+    left: 40%;
+    width: 45%;
+  }
+  100% {
+    left: 100%;
+    width: 33%;
+  }
+}