@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/src/global.scss

@@ -0,0 +1,1025 @@
+/* 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 {
+  /* Scrollbar token defaults (light + .dark) live in styles/theme.css under
+     @layer theme so the dark override actually wins the cascade. See the note
+     there. The webkit/Firefox rules below just consume those vars. */
+
+  * {
+    /* 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;
+  }
+}
+
+/* Shadow elevation utilities.
+   Registered as Tailwind @utility (NOT plain `@layer utilities` classes) so that
+   variant prefixes — hover:, group-hover:, focus:, dark: etc. — generate. In
+   Tailwind v4 a hand-written class inside `@layer utilities` is emitted as-is and
+   does NOT receive variant generation, so `hover:shadow-real-lg` produced no rule
+   (the base class worked, the hover variant silently didn't). @utility fixes that.
+   @utility must live at the top level — it cannot be nested inside @layer.
+
+   Values are tokenized as --elevation-real-* / --elevation-inner-real-* in
+   styles/theme.css (light source-of-truth + `.dark` overrides), so a single
+   class renders the right elevation in BOTH modes: light = faint multi-layer
+   black; dark = stronger black depth-pool + a 1px white top rim (faint black is
+   invisible on the near-black floor). Tokens are --elevation-* (NOT --shadow-*)
+   to avoid Tailwind v4 auto-generating a colliding shadow-* utility. The utility
+   stays single-class specificity, so `shadow-none` still cancels it in any mode. */
+@utility shadow-real-sm  { box-shadow: var(--elevation-real-sm); }
+@utility shadow-real-md  { box-shadow: var(--elevation-real-md); }
+@utility shadow-real-lg  { box-shadow: var(--elevation-real-lg); }
+@utility shadow-real-xl  { box-shadow: var(--elevation-real-xl); }
+@utility shadow-real-2xl { box-shadow: var(--elevation-real-2xl); }
+@utility shadow-real-3xl { box-shadow: var(--elevation-real-3xl); }
+
+/* Per-rung elevation shadows for the relative-elevation engine (src/theme/SurfaceContext).
+   shadow-surface-N pairs with bg-[var(--surface-N)] so a nested surface gets BOTH the lighter
+   rung (dark) and the deeper shadow (light) at the same level. Same --elevation-* (not --shadow-*)
+   naming + single-class specificity as shadow-real-*, so shadow-none still cancels them. */
+@utility shadow-surface-1 { box-shadow: var(--elevation-surface-1); }
+@utility shadow-surface-2 { box-shadow: var(--elevation-surface-2); }
+@utility shadow-surface-3 { box-shadow: var(--elevation-surface-3); }
+@utility shadow-surface-4 { box-shadow: var(--elevation-surface-4); }
+@utility shadow-surface-5 { box-shadow: var(--elevation-surface-5); }
+@utility shadow-surface-6 { box-shadow: var(--elevation-surface-6); }
+@utility shadow-surface-7 { box-shadow: var(--elevation-surface-7); }
+@utility shadow-surface-8 { box-shadow: var(--elevation-surface-8); }
+
+/* Inset counterparts — recessed/sunken surfaces (input wells, code blocks, sunken
+   panels, pressed states). Light: top-down "well" (X zeroed, rim-hugging negative
+   spreads). Dark: stronger black inset + a 1px bottom-inner white lip. */
+@utility shadow-inner-real-sm  { box-shadow: var(--elevation-inner-real-sm); }
+@utility shadow-inner-real-md  { box-shadow: var(--elevation-inner-real-md); }
+@utility shadow-inner-real-lg  { box-shadow: var(--elevation-inner-real-lg); }
+@utility shadow-inner-real-xl  { box-shadow: var(--elevation-inner-real-xl); }
+@utility shadow-inner-real-2xl { box-shadow: var(--elevation-inner-real-2xl); }
+@utility shadow-inner-real-3xl { box-shadow: var(--elevation-inner-real-3xl); }
+
+@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-mono-300\)\] {
+    --ui-scrollbar-thumb-active: var(--color-mono-300);
+  }
+
+  .scrollbar-track-\[var\(--color-mono-100\)\] {
+    --ui-scrollbar-track-active: var(--color-mono-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.webp");
+  }
+  .bg-image-2 {
+    --bg-image: url("/bg/2.webp");
+  }
+  .bg-image-3 {
+    --bg-image: url("/bg/3.webp");
+  }
+  .bg-image-4 {
+    --bg-image: url("/bg/4.webp");
+  }
+  .bg-image-5 {
+    --bg-image: url("/bg/5.webp");
+  }
+  .bg-image-6 {
+    --bg-image: url("/bg/6.webp");
+  }
+  .bg-image-7 {
+    --bg-image: url("/bg/7.webp");
+  }
+  .bg-image-8 {
+    --bg-image: url("/bg/8.webp");
+  }
+  .bg-image-9 {
+    --bg-image: url("/bg/9.webp");
+  }
+  .bg-image-10 {
+    --bg-image: url("/bg/10.webp");
+  }
+  .bg-image-11 {
+    --bg-image: url("/bg/11.webp");
+  }
+  .bg-image-12 {
+    --bg-image: url("/bg/12.webp");
+  }
+  .bg-image-13 {
+    --bg-image: url("/bg/13.webp");
+  }
+  .bg-image-14 {
+    --bg-image: url("/bg/14.webp");
+  }
+  .bg-image-15 {
+    --bg-image: url("/bg/15.webp");
+  }
+  .bg-image-16 {
+    --bg-image: url("/bg/16.webp");
+  }
+  .bg-image-17 {
+    --bg-image: url("/bg/17.webp");
+  }
+  .bg-image-18 {
+    --bg-image: url("/bg/18.webp");
+  }
+  .bg-image-19 {
+    --bg-image: url("/bg/19.webp");
+  }
+  .bg-image-20 {
+    --bg-image: url("/bg/20.webp");
+  }
+  .bg-image-21 {
+    --bg-image: url("/bg/21.webp");
+  }
+  .bg-image-22 {
+    --bg-image: url("/bg/22.webp");
+  }
+
+  /* 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);
+
+  -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;
+  }
+
+  /* Style the native search clear (×) button to match the Tag dismiss icon —
+     muted by default, darkens on hover. Webkit only (Chrome/Safari/Edge);
+     Firefox doesn't render this pseudo-element. */
+  input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 0.875rem;
+    width: 0.875rem;
+    margin-left: 0.25rem;
+    background-color: var(--color-text-muted);
+    cursor: pointer;
+    transition: background-color 200ms ease;
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18 18 6M6 6l12 12'/></svg>");
+            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18 18 6M6 6l12 12'/></svg>");
+    -webkit-mask-size: contain;
+            mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+  }
+
+  input[type="search"]::-webkit-search-cancel-button:hover {
+    background-color: var(--color-text-primary);
+  }
+}
+
+/* InputOTP caret blink — CSS so the blink costs zero per-frame JS
+   (a motion keyframe loop would tick rAF the whole time the field is focused) */
+@keyframes flik-caret-blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+/* 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%);
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Shimmer effect (effects/Shimmer) — the "AI thinking" text shimmer + a
+   surface sweep for loading placeholders. Pure CSS, GPU-friendly. Tokens
+   (--shimmer-*) and their .dark overrides live in styles/theme.css @layer theme.
+   Distinct keyframe names from the `shimmer` loader above (left untouched).
+--------------------------------------------------------------------------- */
+@keyframes shimmer-text {
+  to {
+    background-position: -200% center;
+  }
+}
+
+@keyframes shimmer-sweep {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Text shimmer: muted glyphs with a brighter highlight band sweeping across,
+   via background-clip:text + animated background-position. */
+.flikk-shimmer-text {
+  background: linear-gradient(
+    90deg,
+    var(--shimmer-color) 0%,
+    var(--shimmer-color) calc(50% - var(--shimmer-spread)),
+    var(--shimmer-highlight) 50%,
+    var(--shimmer-color) calc(50% + var(--shimmer-spread)),
+    var(--shimmer-color) 100%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer-text var(--shimmer-duration) linear infinite;
+}
+
+/* Surface sweep: a highlight band travels across any box. The consumer supplies
+   the placeholder background via className; the sweep rides on a ::after layer. */
+.flikk-shimmer-surface {
+  position: relative;
+  overflow: hidden;
+}
+
+.flikk-shimmer-surface::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--shimmer-surface-highlight) 50%,
+    transparent 100%
+  );
+  animation: shimmer-sweep var(--shimmer-duration) linear infinite;
+}
+
+/* Accessibility: cancel motion and render text in a plain, readable base color. */
+@media (prefers-reduced-motion: reduce) {
+  .flikk-shimmer-text {
+    animation: none;
+    background: none;
+    color: var(--shimmer-color);
+    -webkit-text-fill-color: currentColor;
+  }
+
+  .flikk-shimmer-surface::after {
+    animation: none;
+  }
+}
+
+/* Progress bar indeterminate animation */
+@keyframes progress-indeterminate {
+  0% {
+    left: -33%;
+    width: 33%;
+  }
+  50% {
+    left: 40%;
+    width: 45%;
+  }
+  100% {
+    left: 100%;
+    width: 33%;
+  }
+}