@refine-studio/ui 0.0.0 → 0.1.0

package/dist/styles.css

@@ -0,0 +1,697 @@
+@source './';
+
+/*
+ * Refine UI design tokens.
+ *
+ * One brand: refine.studio's teal gem, zinc neutrals and the website's radii.
+ * Scoped knobs are raw primitives that a class or data attribute overrides on
+ * any subtree. The `@theme inline` block composes them inside each utility,
+ * so a subtree that changes mode or `--density` restyles itself without
+ * redefining a single semantic token.
+ *
+ *   .light / .dark / .on-gem           colour mode
+ *   data-density="compact|comfortable|spacious"
+ *   --heading-weight                   weight of every display and headline step
+ */
+
+@import "tw-animate-css";
+/* geist-cyrillic-ext-wght-normal */
+@font-face {
+  font-family: 'Geist Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/geist-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* geist-cyrillic-wght-normal */
+@font-face {
+  font-family: 'Geist Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/geist-cyrillic-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* geist-vietnamese-wght-normal */
+@font-face {
+  font-family: 'Geist Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/geist-vietnamese-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* geist-latin-ext-wght-normal */
+@font-face {
+  font-family: 'Geist Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* geist-latin-wght-normal */
+@font-face {
+  font-family: 'Geist Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+/* geist-mono-cyrillic-ext-wght-normal */
+@font-face {
+  font-family: 'Geist Mono Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/geist-mono-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* geist-mono-cyrillic-wght-normal */
+@font-face {
+  font-family: 'Geist Mono Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/geist-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* geist-mono-symbols2-wght-normal */
+@font-face {
+  font-family: 'Geist Mono Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/geist-mono-symbols2-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F;
+}
+
+/* geist-mono-vietnamese-wght-normal */
+@font-face {
+  font-family: 'Geist Mono Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/geist-mono-vietnamese-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* geist-mono-latin-ext-wght-normal */
+@font-face {
+  font-family: 'Geist Mono Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/geist-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* geist-mono-latin-wght-normal */
+@font-face {
+  font-family: 'Geist Mono Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant light (&:where(.light, .light *));
+
+/* Primitives: the refine teal and density. */
+
+:root {
+  --gem-h: 182;
+  --gem-c: 0.14;
+}
+
+:root,
+[data-density="comfortable"] {
+  --density: 1;
+}
+
+[data-density="compact"] {
+  --density: 0.85;
+}
+
+[data-density="spacious"] {
+  --density: 1.15;
+}
+
+/* The weight of every display and headline step. An app overrides it in one place. */
+
+:root {
+  --heading-weight: 700;
+}
+
+/* Colour modes. Neutrals are zinc, as on refine.studio. */
+
+:root,
+.light {
+  color-scheme: light;
+
+  --canvas: oklch(0.985 0.001 286);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 286);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 286);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 286);
+  --muted: oklch(0.967 0.001 286);
+  --muted-foreground: oklch(0.48 0.014 286);
+  --subtle: oklch(0.6 0.012 286);
+  --disabled: oklch(0.75 0.008 286);
+  --border: oklch(0.905 0.004 286);
+  --input: oklch(0.87 0.006 286);
+  --primary: oklch(0.21 0.006 286);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.955 0.002 286);
+  --secondary-foreground: oklch(0.21 0.006 286);
+  --hover: oklch(0.141 0.005 286 / 0.05);
+  --pressed: oklch(0.141 0.005 286 / 0.09);
+  --scrim: oklch(0.141 0.005 286 / 0.35);
+
+  --gem-l: 0.7;
+  --gem-ink-l: 0.5;
+  --gem-soft-l: 0.965;
+  --gem-soft-cf: 0.22;
+
+  --success: oklch(0.63 0.17 152);
+  --success-soft: oklch(0.962 0.044 157);
+  --success-ink: oklch(0.45 0.12 152);
+  --success-foreground: oklch(0.2 0.05 152);
+  --warning: oklch(0.77 0.165 70);
+  --warning-soft: oklch(0.973 0.071 103);
+  --warning-ink: oklch(0.5 0.12 55);
+  --warning-foreground: oklch(0.2 0.05 60);
+  --orange: oklch(0.68 0.18 47);
+  --orange-soft: oklch(0.968 0.035 55);
+  --orange-ink: oklch(0.5 0.15 42);
+  --orange-foreground: oklch(0.2 0.05 47);
+  --danger: oklch(0.58 0.22 25);
+  --danger-soft: oklch(0.966 0.018 18);
+  --danger-ink: oklch(0.5 0.19 25);
+  --danger-foreground: oklch(0.985 0.01 25);
+  --info: oklch(0.6 0.18 250);
+  --info-soft: oklch(0.962 0.025 240);
+  --info-ink: oklch(0.47 0.16 255);
+  --info-foreground: oklch(0.18 0.05 250);
+  --violet: oklch(0.56 0.2 295);
+  --violet-soft: oklch(0.962 0.03 300);
+  --violet-ink: oklch(0.48 0.18 295);
+  --violet-foreground: oklch(0.985 0.01 295);
+
+  --shadow-color: oklch(0.141 0.005 286);
+  --shadow-strength: 1;
+}
+
+.dark {
+  color-scheme: dark;
+
+  --canvas: oklch(0.11 0.004 286);
+  --background: oklch(0.141 0.005 286);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.17 0.006 286);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.19 0.006 286);
+  --popover-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.225 0.006 286);
+  --muted-foreground: oklch(0.72 0.012 286);
+  --subtle: oklch(0.58 0.012 286);
+  --disabled: oklch(0.42 0.008 286);
+  --border: oklch(0.29 0.006 286);
+  --input: oklch(0.34 0.008 286);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.21 0.006 286);
+  --secondary: oklch(0.25 0.006 286);
+  --secondary-foreground: oklch(0.985 0 0);
+  --hover: oklch(1 0 0 / 0.06);
+  --pressed: oklch(1 0 0 / 0.1);
+  --scrim: oklch(0 0 0 / 0.6);
+
+  --gem-l: 0.78;
+  --gem-ink-l: 0.82;
+  --gem-soft-l: 0.28;
+  --gem-soft-cf: 0.35;
+
+  --success: oklch(0.72 0.17 152);
+  --success-soft: oklch(0.27 0.05 157);
+  --success-ink: oklch(0.82 0.14 155);
+  --success-foreground: oklch(0.2 0.05 152);
+  --warning: oklch(0.8 0.16 75);
+  --warning-soft: oklch(0.29 0.05 75);
+  --warning-ink: oklch(0.86 0.13 85);
+  --warning-foreground: oklch(0.2 0.05 60);
+  --orange: oklch(0.74 0.16 50);
+  --orange-soft: oklch(0.28 0.055 48);
+  --orange-ink: oklch(0.83 0.11 58);
+  --orange-foreground: oklch(0.2 0.05 47);
+  --danger: oklch(0.68 0.2 22);
+  --danger-soft: oklch(0.27 0.06 20);
+  --danger-ink: oklch(0.8 0.12 20);
+  --danger-foreground: oklch(0.18 0.05 25);
+  --info: oklch(0.7 0.15 245);
+  --info-soft: oklch(0.27 0.05 245);
+  --info-ink: oklch(0.82 0.1 240);
+  --info-foreground: oklch(0.18 0.05 250);
+  --violet: oklch(0.72 0.15 295);
+  --violet-soft: oklch(0.27 0.06 295);
+  --violet-ink: oklch(0.83 0.1 300);
+  --violet-foreground: oklch(0.18 0.05 295);
+
+  --shadow-color: oklch(0 0 0);
+  --shadow-strength: 4;
+}
+
+/*
+ * The website's "overlay" register: white ink straight on a gem gradient.
+ * Pair it with `bg-gem-gradient` for a full-bleed brand moment.
+ */
+.on-gem {
+  --foreground: oklch(0.99 0.01 var(--gem-h));
+  --muted-foreground: oklch(0.99 0.01 var(--gem-h) / 0.8);
+  --border: oklch(1 0 0 / 0.35);
+  --input: oklch(1 0 0 / 0.5);
+  --hover: oklch(1 0 0 / 0.12);
+  --pressed: oklch(1 0 0 / 0.2);
+  --primary: oklch(0.99 0 0);
+  --primary-foreground: oklch(0.25 calc(var(--gem-c) * 0.5) var(--gem-h));
+
+  color: var(--foreground);
+}
+
+@theme inline {
+  --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono Variable", ui-monospace, "SFMono-Regular", monospace;
+  --font-display: var(--font-sans);
+
+  --color-canvas: var(--canvas);
+  --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-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-subtle: var(--subtle);
+  --color-disabled: var(--disabled);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: oklch(var(--gem-l) var(--gem-c) var(--gem-h));
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-hover: var(--hover);
+  --color-pressed: var(--pressed);
+  --color-scrim: var(--scrim);
+
+  --color-gem: oklch(var(--gem-l) var(--gem-c) var(--gem-h));
+  --color-gem-foreground: oklch(0.2 calc(var(--gem-c) * 0.35) var(--gem-h));
+  --color-gem-soft: oklch(
+    var(--gem-soft-l) calc(var(--gem-c) * var(--gem-soft-cf)) var(--gem-h)
+  );
+  --color-gem-ink: oklch(var(--gem-ink-l) var(--gem-c) var(--gem-h));
+  --color-gem-50: oklch(0.975 calc(var(--gem-c) * 0.15) var(--gem-h));
+  --color-gem-100: oklch(0.945 calc(var(--gem-c) * 0.3) var(--gem-h));
+  --color-gem-200: oklch(0.895 calc(var(--gem-c) * 0.55) var(--gem-h));
+  --color-gem-300: oklch(0.835 calc(var(--gem-c) * 0.8) var(--gem-h));
+  --color-gem-400: oklch(0.775 var(--gem-c) var(--gem-h));
+  --color-gem-500: oklch(0.705 var(--gem-c) var(--gem-h));
+  --color-gem-600: oklch(0.6 calc(var(--gem-c) * 0.9) var(--gem-h));
+  --color-gem-700: oklch(0.51 calc(var(--gem-c) * 0.8) var(--gem-h));
+  --color-gem-800: oklch(0.44 calc(var(--gem-c) * 0.65) var(--gem-h));
+  --color-gem-900: oklch(0.38 calc(var(--gem-c) * 0.55) var(--gem-h));
+  --color-gem-950: oklch(0.27 calc(var(--gem-c) * 0.45) var(--gem-h));
+
+  --color-success: var(--success);
+  --color-success-soft: var(--success-soft);
+  --color-success-ink: var(--success-ink);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-soft: var(--warning-soft);
+  --color-warning-ink: var(--warning-ink);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-orange: var(--orange);
+  --color-orange-soft: var(--orange-soft);
+  --color-orange-ink: var(--orange-ink);
+  --color-orange-foreground: var(--orange-foreground);
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-danger-ink: var(--danger-ink);
+  --color-danger-foreground: var(--danger-foreground);
+  --color-info: var(--info);
+  --color-info-soft: var(--info-soft);
+  --color-info-ink: var(--info-ink);
+  --color-info-foreground: var(--info-foreground);
+  --color-violet: var(--violet);
+  --color-violet-soft: var(--violet-soft);
+  --color-violet-ink: var(--violet-ink);
+  --color-violet-foreground: var(--violet-foreground);
+
+  --radius-inner: 0.3125rem;
+  --radius-control: 0.5rem;
+  --radius-card: 0.75rem;
+  --radius-panel: 1.25rem;
+
+  --spacing-control-xs: calc(1.5rem * var(--density));
+  --spacing-control-sm: calc(2rem * var(--density));
+  --spacing-control-md: calc(2.5rem * var(--density));
+  --spacing-control-lg: calc(3rem * var(--density));
+  --spacing-control-xl: calc(3.5rem * var(--density));
+
+  --shadow-soft: 0 24px 48px -12px
+    oklch(from var(--shadow-color) l c h / calc(0.06 * var(--shadow-strength)));
+  --shadow-float:
+    0 2px 6px -1px
+      oklch(
+        from var(--shadow-color) l c h / calc(0.06 * var(--shadow-strength))
+      ),
+    0 16px 40px -8px
+      oklch(
+        from var(--shadow-color) l c h / calc(0.14 * var(--shadow-strength))
+      );
+  --shadow-glow:
+    0 0 0 1px oklch(var(--gem-l) var(--gem-c) var(--gem-h) / 0.35),
+    0 8px 32px -4px oklch(var(--gem-l) var(--gem-c) var(--gem-h) / 0.45);
+
+  --text-display-2xl--font-weight: var(--heading-weight);
+  --text-display-xl--font-weight: var(--heading-weight);
+  --text-display-lg--font-weight: var(--heading-weight);
+  --text-display-md--font-weight: var(--heading-weight);
+  --text-display-sm--font-weight: var(--heading-weight);
+  --text-headline-lg--font-weight: var(--heading-weight);
+  --text-headline-md--font-weight: var(--heading-weight);
+  --text-headline-sm--font-weight: var(--heading-weight);
+}
+
+@theme {
+  --text-display-2xl: 6rem;
+  --text-display-2xl--line-height: 1;
+  --text-display-2xl--letter-spacing: -0.045em;
+  --text-display-xl: 4.5rem;
+  --text-display-xl--line-height: 1;
+  --text-display-xl--letter-spacing: -0.04em;
+  --text-display-lg: 3.5rem;
+  --text-display-lg--line-height: 1.05;
+  --text-display-lg--letter-spacing: -0.035em;
+  --text-display-md: 2.75rem;
+  --text-display-md--line-height: 1.1;
+  --text-display-md--letter-spacing: -0.03em;
+  --text-display-sm: 2.25rem;
+  --text-display-sm--line-height: 1.15;
+  --text-display-sm--letter-spacing: -0.025em;
+  --text-headline-lg: 1.75rem;
+  --text-headline-lg--line-height: 1.2;
+  --text-headline-lg--letter-spacing: -0.02em;
+  --text-headline-md: 1.375rem;
+  --text-headline-md--line-height: 1.3;
+  --text-headline-md--letter-spacing: -0.015em;
+  --text-headline-sm: 1.125rem;
+  --text-headline-sm--line-height: 1.4;
+  --text-headline-sm--letter-spacing: -0.01em;
+  --text-body-lg: 1.125rem;
+  --text-body-lg--line-height: 1.65;
+  --text-body: 0.9375rem;
+  --text-body--line-height: 1.6;
+  --text-body-sm: 0.8125rem;
+  --text-body-sm--line-height: 1.5;
+  --text-caption: 0.75rem;
+  --text-caption--line-height: 1.4;
+  --text-micro: 0.625rem;
+  --text-micro--line-height: 1.4;
+
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  --animate-shimmer: shimmer 1.8s linear infinite;
+  --animate-facet-spin: facet-spin 1.1s var(--ease-spring) infinite;
+  --animate-twinkle: twinkle 4s ease-in-out infinite;
+  --animate-hex-wave: hex-wave 6s ease-in-out infinite;
+  --animate-marquee: marquee var(--marquee-duration, 30s) linear infinite;
+  --animate-rise: rise 0.5s var(--ease-out-expo) both;
+  --animate-indeterminate: indeterminate 1.4s var(--ease-out-expo) infinite;
+
+  @keyframes shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes facet-spin {
+    0% {
+      transform: rotate(0deg) scale(1);
+    }
+    50% {
+      transform: rotate(180deg) scale(0.82);
+    }
+    100% {
+      transform: rotate(360deg) scale(1);
+    }
+  }
+
+  @keyframes twinkle {
+    0%,
+    100% {
+      opacity: 0.25;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes hex-wave {
+    0%,
+    100% {
+      opacity: 0.15;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes marquee {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-50%);
+    }
+  }
+
+  @keyframes indeterminate {
+    from {
+      transform: translateX(-100%) scaleX(0.4);
+    }
+    to {
+      transform: translateX(250%) scaleX(0.4);
+    }
+  }
+
+  @keyframes rise {
+    from {
+      opacity: 0;
+      transform: translateY(1.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+/*
+ * Chart colours: categorical series, used in order from chart-1.
+ * Tailwind's 500 step, the same in light and dark. Neighbours in the order
+ * stay apart under protanopia, deuteranopia and tritanopia. The fills reach
+ * 2:1 on white, not 3:1, so every chart carries a legend or direct labels.
+ */
+
+:root {
+  --chart-1: oklch(0.704 0.14 182.503);
+  --chart-2: oklch(0.667 0.295 322.15);
+  --chart-3: oklch(0.723 0.219 149.579);
+  --chart-4: oklch(0.606 0.25 292.717);
+  --chart-5: oklch(0.637 0.237 25.331);
+  --chart-6: oklch(0.685 0.169 237.323);
+  --chart-7: oklch(0.656 0.241 354.308);
+  --chart-8: oklch(0.769 0.188 70.08);
+}
+
+@theme inline {
+  --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-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+}
+
+/* Utilities that carry the brand. */
+
+@utility focus-ring {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition-property: outline-color, outline-offset;
+  transition-duration: 120ms;
+
+  &:focus-visible {
+    outline-color: var(--color-ring);
+  }
+}
+
+@utility font-display {
+  font-family: var(--font-display);
+}
+
+@utility eyebrow {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+@utility card-surface {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  background-color: var(--color-card);
+  color: var(--color-card-foreground);
+  box-shadow: var(--shadow-soft);
+}
+
+@utility glass {
+  background-color: oklch(from var(--background) l c h / 0.72);
+  backdrop-filter: blur(16px) saturate(1.4);
+}
+
+@utility bg-gem-gradient {
+  background-image: linear-gradient(
+    to right,
+    oklch(0.775 var(--gem-c) var(--gem-h)),
+    oklch(0.705 var(--gem-c) var(--gem-h))
+  );
+}
+
+@utility bg-gem-radiance {
+  background-image:
+    radial-gradient(
+      60% 80% at 15% 0%,
+      oklch(0.775 var(--gem-c) var(--gem-h) / 0.35),
+      transparent 70%
+    ),
+    radial-gradient(
+      50% 70% at 100% 100%,
+      oklch(0.6 var(--gem-c) calc(var(--gem-h) + 40) / 0.25),
+      transparent 70%
+    );
+}
+
+@utility text-gem-gradient {
+  background-image: linear-gradient(
+    120deg,
+    oklch(0.84 calc(var(--gem-c) * 0.8) calc(var(--gem-h) - 20)),
+    oklch(0.7 var(--gem-c) var(--gem-h)) 50%,
+    oklch(0.58 var(--gem-c) calc(var(--gem-h) + 30))
+  );
+  background-clip: text;
+  color: transparent;
+}
+
+@utility pattern-hex {
+  background-color: currentColor;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath fill='none' stroke='black' stroke-width='1' d='M14 0.5 27.5 8.3v15.6L14 31.7 0.5 23.9V8.3zM14 31.7v16.8M0.5 8.3 0.5 0M27.5 8.3V0'/%3E%3C/svg%3E");
+  mask-size: 28px 48.5px;
+}
+
+@utility pattern-grid {
+  background-color: currentColor;
+  mask-image:
+    linear-gradient(to right, black 1px, transparent 1px),
+    linear-gradient(to bottom, black 1px, transparent 1px);
+  mask-size: 32px 32px;
+  mask-composite: add;
+}
+
+@utility pattern-dots {
+  background-color: currentColor;
+  mask-image: radial-gradient(circle at center, black 1px, transparent 1.5px);
+  mask-size: 16px 16px;
+}
+
+@utility mask-fade-b {
+  mask-image: linear-gradient(to bottom, black 40%, transparent);
+}
+
+@utility mask-fade-x {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 12%,
+    black 88%,
+    transparent
+  );
+}
+
+@utility skeleton-shimmer {
+  background-image: linear-gradient(
+    90deg,
+    var(--color-muted) 0%,
+    oklch(from var(--muted) calc(l + 0.04) c h) 50%,
+    var(--color-muted) 100%
+  );
+  background-size: 200% 100%;
+}
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--color-border);
+  }
+
+  html {
+    scrollbar-color: var(--color-input) transparent;
+    scrollbar-width: thin;
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    font-feature-settings: "ss01", "cv11";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  ::selection {
+    background-color: oklch(var(--gem-l) var(--gem-c) var(--gem-h) / 0.3);
+  }
+
+  @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;
+    }
+  }
+}