@glinui/tokens 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,381 @@
+export type ThemeMode = "light" | "dark";
+export declare const colorTokens: {
+    readonly light: {
+        readonly background: "oklch(0.985 0.002 240)";
+        readonly foreground: "oklch(0.23 0.01 248)";
+        readonly surface: "oklch(0.997 0.002 245)";
+        readonly border: "oklch(0.89 0.01 246)";
+        readonly accent: "oklch(0.20 0.005 250)";
+        readonly accentForeground: "oklch(0.98 0.003 250)";
+    };
+    readonly dark: {
+        readonly background: "oklch(0.18 0.01 250)";
+        readonly foreground: "oklch(0.95 0.01 247)";
+        readonly surface: "oklch(0.23 0.01 250)";
+        readonly border: "oklch(0.34 0.01 250)";
+        readonly accent: "oklch(0.92 0.005 250)";
+        readonly accentForeground: "oklch(0.15 0.005 250)";
+    };
+};
+/**
+ * Glass tokens — Apple Liquid Glass spec (WWDC 2025).
+ *
+ * Key principles:
+ * - saturate(180%) always paired with blur
+ * - Higher surface opacity than old glassmorphism (Apple Beta 3+)
+ * - Dark mode significantly MORE opaque than light mode
+ * - Top border brighter than sides (light refraction edge)
+ * - 4.5:1 contrast ratio for text on glass (WCAG AA)
+ */
+export declare const glassTokens: {
+    readonly blur: {
+        readonly sm: "8px";
+        readonly md: "16px";
+        readonly lg: "24px";
+        readonly xl: "40px";
+    };
+    readonly saturate: {
+        readonly default: "180%";
+        readonly subtle: "130%";
+    };
+    readonly surface: {
+        readonly light: "rgba(255, 255, 255, 0.18)";
+        readonly dark: "rgba(0, 0, 0, 0.40)";
+    };
+    readonly border: {
+        readonly light: "rgba(255, 255, 255, 0.20)";
+        readonly dark: "rgba(255, 255, 255, 0.10)";
+    };
+    readonly borderStrong: {
+        readonly light: "rgba(255, 255, 255, 0.35)";
+        readonly dark: "rgba(255, 255, 255, 0.18)";
+    };
+    readonly refractionTop: {
+        readonly light: "rgba(255, 255, 255, 0.40)";
+        readonly dark: "rgba(255, 255, 255, 0.15)";
+    };
+};
+export declare const radiusTokens: {
+    readonly sm: "0.5rem";
+    readonly md: "0.75rem";
+    readonly lg: "1rem";
+    readonly xl: "1.25rem";
+    readonly "2xl": "1.75rem";
+};
+export declare const spacingTokens: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "0.75rem";
+    readonly lg: "1rem";
+    readonly xl: "1.5rem";
+    readonly "2xl": "2rem";
+};
+export declare const shadowTokens: {
+    readonly "glass-sm": "0 2px 8px rgba(0, 0, 0, 0.08)";
+    readonly "glass-md": "0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08)";
+    readonly "glass-lg": "0 16px 48px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.08)";
+    readonly "glass-inset": "inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.05)";
+};
+/**
+ * Composed glass elevation levels.
+ * Each bundles blur + surface opacity + shadow.
+ * CSS classes also apply saturate(180%) and refraction top border.
+ */
+export declare const glassLevelTokens: {
+    readonly "glass-1": {
+        readonly blur: "8px";
+        readonly opacity: {
+            readonly light: "0.08";
+            readonly dark: "0.20";
+        };
+        readonly shadow: "glass-sm";
+    };
+    readonly "glass-2": {
+        readonly blur: "12px";
+        readonly opacity: {
+            readonly light: "0.12";
+            readonly dark: "0.30";
+        };
+        readonly shadow: "glass-sm";
+    };
+    readonly "glass-3": {
+        readonly blur: "16px";
+        readonly opacity: {
+            readonly light: "0.18";
+            readonly dark: "0.40";
+        };
+        readonly shadow: "glass-md";
+    };
+    readonly "glass-4": {
+        readonly blur: "24px";
+        readonly opacity: {
+            readonly light: "0.25";
+            readonly dark: "0.55";
+        };
+        readonly shadow: "glass-lg";
+    };
+    readonly "glass-5": {
+        readonly blur: "40px";
+        readonly opacity: {
+            readonly light: "0.35";
+            readonly dark: "0.70";
+        };
+        readonly shadow: "glass-lg";
+    };
+};
+export declare const glassOpacityScaleTokens: {
+    readonly light: {
+        readonly 1: "0.06";
+        readonly 2: "0.08";
+        readonly 3: "0.10";
+        readonly 4: "0.12";
+        readonly 5: "0.16";
+        readonly 6: "0.18";
+        readonly 7: "0.22";
+        readonly 8: "0.25";
+        readonly 9: "0.30";
+        readonly 10: "0.35";
+    };
+    readonly dark: {
+        readonly 1: "0.16";
+        readonly 2: "0.20";
+        readonly 3: "0.25";
+        readonly 4: "0.30";
+        readonly 5: "0.35";
+        readonly 6: "0.40";
+        readonly 7: "0.48";
+        readonly 8: "0.55";
+        readonly 9: "0.62";
+        readonly 10: "0.70";
+    };
+};
+export declare const glassPerformanceTokens: {
+    readonly gpuHint: {
+        readonly transform: "translateZ(0)";
+        readonly backfaceVisibility: "hidden";
+        readonly willChange: "transform, opacity";
+    };
+    readonly heavySurface: {
+        readonly transform: "translateZ(0)";
+        readonly backfaceVisibility: "hidden";
+        readonly willChange: "backdrop-filter, transform, opacity";
+        readonly contain: "paint";
+    };
+};
+export declare const glassLuminanceTokens: {
+    readonly neutral: {
+        readonly surfaceMultiplier: 1;
+        readonly borderMultiplier: 1;
+        readonly refractionMultiplier: 1;
+        readonly saturateMultiplier: 1;
+    };
+    readonly bright: {
+        readonly surfaceMultiplier: 1.16;
+        readonly borderMultiplier: 1.08;
+        readonly refractionMultiplier: 1.14;
+        readonly saturateMultiplier: 1.04;
+    };
+    readonly dim: {
+        readonly surfaceMultiplier: 0.9;
+        readonly borderMultiplier: 1.15;
+        readonly refractionMultiplier: 1.22;
+        readonly saturateMultiplier: 0.96;
+    };
+};
+export declare const motionTokens: {
+    readonly duration: {
+        readonly fast: "150ms";
+        readonly normal: "250ms";
+        readonly slow: "400ms";
+        readonly spring: "500ms";
+    };
+    readonly easing: {
+        readonly standard: "cubic-bezier(0.2, 0.0, 0.0, 1.0)";
+        readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+        readonly glass: "cubic-bezier(0.4, 0.0, 0.2, 1.0)";
+    };
+};
+export declare const tokenContract: {
+    readonly colorTokens: {
+        readonly light: {
+            readonly background: "oklch(0.985 0.002 240)";
+            readonly foreground: "oklch(0.23 0.01 248)";
+            readonly surface: "oklch(0.997 0.002 245)";
+            readonly border: "oklch(0.89 0.01 246)";
+            readonly accent: "oklch(0.20 0.005 250)";
+            readonly accentForeground: "oklch(0.98 0.003 250)";
+        };
+        readonly dark: {
+            readonly background: "oklch(0.18 0.01 250)";
+            readonly foreground: "oklch(0.95 0.01 247)";
+            readonly surface: "oklch(0.23 0.01 250)";
+            readonly border: "oklch(0.34 0.01 250)";
+            readonly accent: "oklch(0.92 0.005 250)";
+            readonly accentForeground: "oklch(0.15 0.005 250)";
+        };
+    };
+    readonly glassTokens: {
+        readonly blur: {
+            readonly sm: "8px";
+            readonly md: "16px";
+            readonly lg: "24px";
+            readonly xl: "40px";
+        };
+        readonly saturate: {
+            readonly default: "180%";
+            readonly subtle: "130%";
+        };
+        readonly surface: {
+            readonly light: "rgba(255, 255, 255, 0.18)";
+            readonly dark: "rgba(0, 0, 0, 0.40)";
+        };
+        readonly border: {
+            readonly light: "rgba(255, 255, 255, 0.20)";
+            readonly dark: "rgba(255, 255, 255, 0.10)";
+        };
+        readonly borderStrong: {
+            readonly light: "rgba(255, 255, 255, 0.35)";
+            readonly dark: "rgba(255, 255, 255, 0.18)";
+        };
+        readonly refractionTop: {
+            readonly light: "rgba(255, 255, 255, 0.40)";
+            readonly dark: "rgba(255, 255, 255, 0.15)";
+        };
+    };
+    readonly glassLevelTokens: {
+        readonly "glass-1": {
+            readonly blur: "8px";
+            readonly opacity: {
+                readonly light: "0.08";
+                readonly dark: "0.20";
+            };
+            readonly shadow: "glass-sm";
+        };
+        readonly "glass-2": {
+            readonly blur: "12px";
+            readonly opacity: {
+                readonly light: "0.12";
+                readonly dark: "0.30";
+            };
+            readonly shadow: "glass-sm";
+        };
+        readonly "glass-3": {
+            readonly blur: "16px";
+            readonly opacity: {
+                readonly light: "0.18";
+                readonly dark: "0.40";
+            };
+            readonly shadow: "glass-md";
+        };
+        readonly "glass-4": {
+            readonly blur: "24px";
+            readonly opacity: {
+                readonly light: "0.25";
+                readonly dark: "0.55";
+            };
+            readonly shadow: "glass-lg";
+        };
+        readonly "glass-5": {
+            readonly blur: "40px";
+            readonly opacity: {
+                readonly light: "0.35";
+                readonly dark: "0.70";
+            };
+            readonly shadow: "glass-lg";
+        };
+    };
+    readonly glassOpacityScaleTokens: {
+        readonly light: {
+            readonly 1: "0.06";
+            readonly 2: "0.08";
+            readonly 3: "0.10";
+            readonly 4: "0.12";
+            readonly 5: "0.16";
+            readonly 6: "0.18";
+            readonly 7: "0.22";
+            readonly 8: "0.25";
+            readonly 9: "0.30";
+            readonly 10: "0.35";
+        };
+        readonly dark: {
+            readonly 1: "0.16";
+            readonly 2: "0.20";
+            readonly 3: "0.25";
+            readonly 4: "0.30";
+            readonly 5: "0.35";
+            readonly 6: "0.40";
+            readonly 7: "0.48";
+            readonly 8: "0.55";
+            readonly 9: "0.62";
+            readonly 10: "0.70";
+        };
+    };
+    readonly glassPerformanceTokens: {
+        readonly gpuHint: {
+            readonly transform: "translateZ(0)";
+            readonly backfaceVisibility: "hidden";
+            readonly willChange: "transform, opacity";
+        };
+        readonly heavySurface: {
+            readonly transform: "translateZ(0)";
+            readonly backfaceVisibility: "hidden";
+            readonly willChange: "backdrop-filter, transform, opacity";
+            readonly contain: "paint";
+        };
+    };
+    readonly glassLuminanceTokens: {
+        readonly neutral: {
+            readonly surfaceMultiplier: 1;
+            readonly borderMultiplier: 1;
+            readonly refractionMultiplier: 1;
+            readonly saturateMultiplier: 1;
+        };
+        readonly bright: {
+            readonly surfaceMultiplier: 1.16;
+            readonly borderMultiplier: 1.08;
+            readonly refractionMultiplier: 1.14;
+            readonly saturateMultiplier: 1.04;
+        };
+        readonly dim: {
+            readonly surfaceMultiplier: 0.9;
+            readonly borderMultiplier: 1.15;
+            readonly refractionMultiplier: 1.22;
+            readonly saturateMultiplier: 0.96;
+        };
+    };
+    readonly radiusTokens: {
+        readonly sm: "0.5rem";
+        readonly md: "0.75rem";
+        readonly lg: "1rem";
+        readonly xl: "1.25rem";
+        readonly "2xl": "1.75rem";
+    };
+    readonly spacingTokens: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "0.75rem";
+        readonly lg: "1rem";
+        readonly xl: "1.5rem";
+        readonly "2xl": "2rem";
+    };
+    readonly shadowTokens: {
+        readonly "glass-sm": "0 2px 8px rgba(0, 0, 0, 0.08)";
+        readonly "glass-md": "0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08)";
+        readonly "glass-lg": "0 16px 48px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.08)";
+        readonly "glass-inset": "inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.05)";
+    };
+    readonly motionTokens: {
+        readonly duration: {
+            readonly fast: "150ms";
+            readonly normal: "250ms";
+            readonly slow: "400ms";
+            readonly spring: "500ms";
+        };
+        readonly easing: {
+            readonly standard: "cubic-bezier(0.2, 0.0, 0.0, 1.0)";
+            readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+            readonly glass: "cubic-bezier(0.4, 0.0, 0.2, 1.0)";
+        };
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;CAiBd,CAAA;AAEV;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Bd,CAAA;AAEV,eAAO,MAAM,YAAY;;;;;;CAMf,CAAA;AAEV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAEV,eAAO,MAAM,YAAY;;;;;CAQf,CAAA;AAEV;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BnB,CAAA;AAEV,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;CAyB1B,CAAA;AAEV,eAAO,MAAM,sBAAsB;;;;;;;;;;;;CAYzB,CAAA;AAEV,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;CAmBvB,CAAA;AAEV,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAA;AAEV,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWhB,CAAA"}

package/dist/index.js

@@ -0,0 +1,193 @@
+export const colorTokens = {
+    light: {
+        background: "oklch(0.985 0.002 240)",
+        foreground: "oklch(0.23 0.01 248)",
+        surface: "oklch(0.997 0.002 245)",
+        border: "oklch(0.89 0.01 246)",
+        accent: "oklch(0.20 0.005 250)",
+        accentForeground: "oklch(0.98 0.003 250)"
+    },
+    dark: {
+        background: "oklch(0.18 0.01 250)",
+        foreground: "oklch(0.95 0.01 247)",
+        surface: "oklch(0.23 0.01 250)",
+        border: "oklch(0.34 0.01 250)",
+        accent: "oklch(0.92 0.005 250)",
+        accentForeground: "oklch(0.15 0.005 250)"
+    }
+};
+/**
+ * Glass tokens — Apple Liquid Glass spec (WWDC 2025).
+ *
+ * Key principles:
+ * - saturate(180%) always paired with blur
+ * - Higher surface opacity than old glassmorphism (Apple Beta 3+)
+ * - Dark mode significantly MORE opaque than light mode
+ * - Top border brighter than sides (light refraction edge)
+ * - 4.5:1 contrast ratio for text on glass (WCAG AA)
+ */
+export const glassTokens = {
+    blur: {
+        sm: "8px",
+        md: "16px",
+        lg: "24px",
+        xl: "40px"
+    },
+    saturate: {
+        default: "180%",
+        subtle: "130%"
+    },
+    surface: {
+        light: "rgba(255, 255, 255, 0.18)",
+        dark: "rgba(0, 0, 0, 0.40)"
+    },
+    border: {
+        light: "rgba(255, 255, 255, 0.20)",
+        dark: "rgba(255, 255, 255, 0.10)"
+    },
+    borderStrong: {
+        light: "rgba(255, 255, 255, 0.35)",
+        dark: "rgba(255, 255, 255, 0.18)"
+    },
+    refractionTop: {
+        light: "rgba(255, 255, 255, 0.40)",
+        dark: "rgba(255, 255, 255, 0.15)"
+    }
+};
+export const radiusTokens = {
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.25rem",
+    "2xl": "1.75rem"
+};
+export const spacingTokens = {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.5rem",
+    "2xl": "2rem"
+};
+export const shadowTokens = {
+    "glass-sm": "0 2px 8px rgba(0, 0, 0, 0.08)",
+    "glass-md": "0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08)",
+    "glass-lg": "0 16px 48px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.08)",
+    "glass-inset": "inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.05)"
+};
+/**
+ * Composed glass elevation levels.
+ * Each bundles blur + surface opacity + shadow.
+ * CSS classes also apply saturate(180%) and refraction top border.
+ */
+export const glassLevelTokens = {
+    "glass-1": {
+        blur: "8px",
+        opacity: { light: "0.08", dark: "0.20" },
+        shadow: "glass-sm"
+    },
+    "glass-2": {
+        blur: "12px",
+        opacity: { light: "0.12", dark: "0.30" },
+        shadow: "glass-sm"
+    },
+    "glass-3": {
+        blur: "16px",
+        opacity: { light: "0.18", dark: "0.40" },
+        shadow: "glass-md"
+    },
+    "glass-4": {
+        blur: "24px",
+        opacity: { light: "0.25", dark: "0.55" },
+        shadow: "glass-lg"
+    },
+    "glass-5": {
+        blur: "40px",
+        opacity: { light: "0.35", dark: "0.70" },
+        shadow: "glass-lg"
+    }
+};
+export const glassOpacityScaleTokens = {
+    light: {
+        1: "0.06",
+        2: "0.08",
+        3: "0.10",
+        4: "0.12",
+        5: "0.16",
+        6: "0.18",
+        7: "0.22",
+        8: "0.25",
+        9: "0.30",
+        10: "0.35"
+    },
+    dark: {
+        1: "0.16",
+        2: "0.20",
+        3: "0.25",
+        4: "0.30",
+        5: "0.35",
+        6: "0.40",
+        7: "0.48",
+        8: "0.55",
+        9: "0.62",
+        10: "0.70"
+    }
+};
+export const glassPerformanceTokens = {
+    gpuHint: {
+        transform: "translateZ(0)",
+        backfaceVisibility: "hidden",
+        willChange: "transform, opacity"
+    },
+    heavySurface: {
+        transform: "translateZ(0)",
+        backfaceVisibility: "hidden",
+        willChange: "backdrop-filter, transform, opacity",
+        contain: "paint"
+    }
+};
+export const glassLuminanceTokens = {
+    neutral: {
+        surfaceMultiplier: 1,
+        borderMultiplier: 1,
+        refractionMultiplier: 1,
+        saturateMultiplier: 1
+    },
+    bright: {
+        surfaceMultiplier: 1.16,
+        borderMultiplier: 1.08,
+        refractionMultiplier: 1.14,
+        saturateMultiplier: 1.04
+    },
+    dim: {
+        surfaceMultiplier: 0.9,
+        borderMultiplier: 1.15,
+        refractionMultiplier: 1.22,
+        saturateMultiplier: 0.96
+    }
+};
+export const motionTokens = {
+    duration: {
+        fast: "150ms",
+        normal: "250ms",
+        slow: "400ms",
+        spring: "500ms"
+    },
+    easing: {
+        standard: "cubic-bezier(0.2, 0.0, 0.0, 1.0)",
+        spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+        glass: "cubic-bezier(0.4, 0.0, 0.2, 1.0)"
+    }
+};
+export const tokenContract = {
+    colorTokens,
+    glassTokens,
+    glassLevelTokens,
+    glassOpacityScaleTokens,
+    glassPerformanceTokens,
+    glassLuminanceTokens,
+    radiusTokens,
+    spacingTokens,
+    shadowTokens,
+    motionTokens
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@glinui/tokens",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./theme.css": "./theme.css"
+  },
+  "files": ["dist", "theme.css"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GLINCKER/glinui",
+    "directory": "packages/tokens"
+  },
+  "homepage": "https://glinui.com",
+  "bugs": "https://github.com/GLINCKER/glinui/issues",
+  "keywords": ["glinui", "glassmorphism", "liquid-glass", "react", "tailwindcss", "ui", "design-system"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "echo 'lint: @glinui/tokens (todo)'",
+    "test": "echo 'test: @glinui/tokens (todo)'"
+  }
+}

package/theme.css

@@ -0,0 +1,290 @@
+/**
+ * Glin UI — Glass Design Tokens (Apple Liquid Glass spec)
+ *
+ * Key principles:
+ * - saturate(180%) always paired with blur in backdrop-filter
+ * - Higher surface opacity than old glassmorphism (Apple Beta 3+)
+ * - Dark mode significantly MORE opaque for readability
+ * - Top border brighter than sides (light refraction edge)
+ * - 4.5:1 contrast ratio for text on glass (WCAG AA)
+ */
+
+:root {
+  /* ── Semantic colour ─────────────────────────────── */
+  --color-background: oklch(0.985 0.002 240);
+  --color-foreground: oklch(0.23 0.01 248);
+  --color-surface: oklch(0.997 0.002 245);
+  --color-border: oklch(0.89 0.01 246);
+  --color-accent: oklch(0.63 0.19 254);
+  --color-accent-foreground: oklch(0.99 0.003 240);
+
+  /* ── Glass primitives ────────────────────────────── */
+  --glass-blur-sm: 8px;
+  --glass-blur-md: 16px;
+  --glass-blur-lg: 24px;
+  --glass-blur-xl: 40px;
+
+  --glass-adapt-surface-multiplier: 1;
+  --glass-adapt-border-multiplier: 1;
+  --glass-adapt-refraction-multiplier: 1;
+  --glass-adapt-saturate-multiplier: 1;
+
+  --glass-base-rgb: 255 255 255;
+  --glass-saturate-base: 180%;
+  --glass-saturate-subtle-base: 130%;
+  --glass-saturate: calc(var(--glass-saturate-base) * var(--glass-adapt-saturate-multiplier));
+  --glass-saturate-subtle: calc(var(--glass-saturate-subtle-base) * var(--glass-adapt-saturate-multiplier));
+
+  --glass-border-alpha: 0.20;
+  --glass-border-strong-alpha: 0.35;
+  --glass-refraction-top-alpha: 0.40;
+  --glass-surface: rgb(var(--glass-base-rgb) / calc(0.18 * var(--glass-adapt-surface-multiplier)));
+  --glass-border: rgb(255 255 255 / calc(var(--glass-border-alpha) * var(--glass-adapt-border-multiplier)));
+  --glass-border-strong: rgb(255 255 255 / calc(var(--glass-border-strong-alpha) * var(--glass-adapt-border-multiplier)));
+  --glass-refraction-top: rgb(255 255 255 / calc(var(--glass-refraction-top-alpha) * var(--glass-adapt-refraction-multiplier)));
+
+  /* ── Glass opacity scale (crystal -> frosted) ───── */
+  --glass-opacity-1: 0.06;
+  --glass-opacity-2: 0.08;
+  --glass-opacity-3: 0.10;
+  --glass-opacity-4: 0.12;
+  --glass-opacity-5: 0.16;
+  --glass-opacity-6: 0.18;
+  --glass-opacity-7: 0.22;
+  --glass-opacity-8: 0.25;
+  --glass-opacity-9: 0.30;
+  --glass-opacity-10: 0.35;
+
+  /* ── Glass performance hints ─────────────────────── */
+  --glass-gpu-transform: translateZ(0);
+  --glass-gpu-backface-visibility: hidden;
+  --glass-gpu-will-change: transform, opacity;
+  --glass-heavy-will-change: backdrop-filter, transform, opacity;
+  --glass-heavy-contain: paint;
+
+  /* ── Glass levels (blur + surface + shadow) ──────── */
+  --glass-1-blur: 8px;
+  --glass-1-opacity: var(--glass-opacity-2);
+  --glass-1-surface: rgb(var(--glass-base-rgb) / calc(var(--glass-1-opacity) * var(--glass-adapt-surface-multiplier)));
+  --glass-1-shadow: var(--shadow-glass-sm);
+
+  --glass-2-blur: 12px;
+  --glass-2-opacity: var(--glass-opacity-4);
+  --glass-2-surface: rgb(var(--glass-base-rgb) / calc(var(--glass-2-opacity) * var(--glass-adapt-surface-multiplier)));
+  --glass-2-shadow: var(--shadow-glass-sm);
+
+  --glass-3-blur: 16px;
+  --glass-3-opacity: var(--glass-opacity-6);
+  --glass-3-surface: rgb(var(--glass-base-rgb) / calc(var(--glass-3-opacity) * var(--glass-adapt-surface-multiplier)));
+  --glass-3-shadow: var(--shadow-glass-md);
+
+  --glass-4-blur: 24px;
+  --glass-4-opacity: var(--glass-opacity-8);
+  --glass-4-surface: rgb(var(--glass-base-rgb) / calc(var(--glass-4-opacity) * var(--glass-adapt-surface-multiplier)));
+  --glass-4-shadow: var(--shadow-glass-lg);
+
+  --glass-5-blur: 40px;
+  --glass-5-opacity: var(--glass-opacity-10);
+  --glass-5-surface: rgb(var(--glass-base-rgb) / calc(var(--glass-5-opacity) * var(--glass-adapt-surface-multiplier)));
+  --glass-5-shadow: var(--shadow-glass-lg);
+
+  /* ── Radius ──────────────────────────────────────── */
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.25rem;
+  --radius-2xl: 1.75rem;
+
+  /* ── Spacing ─────────────────────────────────────── */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 0.75rem;
+  --space-lg: 1rem;
+  --space-xl: 1.5rem;
+  --space-2xl: 2rem;
+
+  /* ── Shadows ─────────────────────────────────────── */
+  --shadow-glass-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
+  --shadow-glass-md: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
+  --shadow-glass-lg: 0 16px 48px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.08);
+  --shadow-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
+
+  /* ── Motion ──────────────────────────────────────── */
+  --motion-fast: 150ms;
+  --motion-normal: 250ms;
+  --motion-slow: 400ms;
+  --motion-spring: 500ms;
+  --easing-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
+  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --easing-glass: cubic-bezier(0.4, 0.0, 0.2, 1.0);
+
+  color-scheme: light;
+}
+
+.dark {
+  --color-background: oklch(0.18 0.01 250);
+  --color-foreground: oklch(0.95 0.01 247);
+  --color-surface: oklch(0.23 0.01 250);
+  --color-border: oklch(0.34 0.01 250);
+  --color-accent: oklch(0.74 0.19 252);
+  --color-accent-foreground: oklch(0.15 0.01 252);
+
+  --glass-base-rgb: 0 0 0;
+  --glass-border-alpha: 0.10;
+  --glass-border-strong-alpha: 0.18;
+  --glass-refraction-top-alpha: 0.15;
+  --glass-surface: rgb(var(--glass-base-rgb) / calc(0.40 * var(--glass-adapt-surface-multiplier)));
+
+  --glass-opacity-1: 0.16;
+  --glass-opacity-2: 0.20;
+  --glass-opacity-3: 0.25;
+  --glass-opacity-4: 0.30;
+  --glass-opacity-5: 0.35;
+  --glass-opacity-6: 0.40;
+  --glass-opacity-7: 0.48;
+  --glass-opacity-8: 0.55;
+  --glass-opacity-9: 0.62;
+  --glass-opacity-10: 0.70;
+
+  --glass-1-opacity: var(--glass-opacity-2);
+  --glass-1-surface: rgb(var(--glass-base-rgb) / calc(var(--glass-1-opacity) * var(--glass-adapt-surface-multiplier)));
+
+  --glass-2-opacity: var(--glass-opacity-4);
+  --glass-2-surface: rgb(var(--glass-base-rgb) / calc(var(--glass-2-opacity) * var(--glass-adapt-surface-multiplier)));
+
+  --glass-3-opacity: var(--glass-opacity-6);
+  --glass-3-surface: rgb(var(--glass-base-rgb) / calc(var(--glass-3-opacity) * var(--glass-adapt-surface-multiplier)));
+
+  --glass-4-opacity: var(--glass-opacity-8);
+  --glass-4-surface: rgb(var(--glass-base-rgb) / calc(var(--glass-4-opacity) * var(--glass-adapt-surface-multiplier)));
+
+  --glass-5-opacity: var(--glass-opacity-10);
+  --glass-5-surface: rgb(var(--glass-base-rgb) / calc(var(--glass-5-opacity) * var(--glass-adapt-surface-multiplier)));
+
+  color-scheme: dark;
+}
+
+/* ── Glass utility classes ─────────────────────────── */
+.glass-surface,
+.glass-1,
+.glass-2,
+.glass-3,
+.glass-4,
+.glass-5 {
+  border: 1px solid var(--glass-border);
+  border-top-color: var(--glass-refraction-top);
+  background-clip: padding-box;
+}
+
+.glass-surface,
+.glass-3 {
+  background: var(--glass-3-surface);
+  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-3-blur));
+  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-3-blur));
+  box-shadow: var(--glass-3-shadow);
+}
+
+.glass-1 {
+  background: var(--glass-1-surface);
+  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-1-blur));
+  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-1-blur));
+  box-shadow: var(--glass-1-shadow);
+}
+
+.glass-2 {
+  background: var(--glass-2-surface);
+  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-2-blur));
+  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-2-blur));
+  box-shadow: var(--glass-2-shadow);
+}
+
+.glass-4 {
+  background: var(--glass-4-surface);
+  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-4-blur));
+  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-4-blur));
+  box-shadow: var(--glass-4-shadow);
+}
+
+.glass-5 {
+  background: var(--glass-5-surface);
+  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-5-blur));
+  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-5-blur));
+  box-shadow: var(--glass-5-shadow);
+}
+
+.glass-gpu-hint {
+  transform: var(--glass-gpu-transform);
+  backface-visibility: var(--glass-gpu-backface-visibility);
+  will-change: var(--glass-gpu-will-change);
+}
+
+.glass-heavy {
+  transform: var(--glass-gpu-transform);
+  backface-visibility: var(--glass-gpu-backface-visibility);
+  will-change: var(--glass-heavy-will-change);
+  contain: var(--glass-heavy-contain);
+}
+
+/* ── Background luminance adaptation ──────────────── */
+.glass-adapt-neutral,
+[data-glass-luminance="neutral"] {
+  --glass-adapt-surface-multiplier: 1;
+  --glass-adapt-border-multiplier: 1;
+  --glass-adapt-refraction-multiplier: 1;
+  --glass-adapt-saturate-multiplier: 1;
+}
+
+.glass-adapt-bright,
+[data-glass-luminance="bright"] {
+  --glass-adapt-surface-multiplier: 1.16;
+  --glass-adapt-border-multiplier: 1.08;
+  --glass-adapt-refraction-multiplier: 1.14;
+  --glass-adapt-saturate-multiplier: 1.04;
+}
+
+.glass-adapt-dim,
+[data-glass-luminance="dim"] {
+  --glass-adapt-surface-multiplier: 0.9;
+  --glass-adapt-border-multiplier: 1.15;
+  --glass-adapt-refraction-multiplier: 1.22;
+  --glass-adapt-saturate-multiplier: 0.96;
+}
+
+/* ── Reduced transparency ──────────────────────────── */
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --glass-1-surface: rgba(255, 255, 255, 0.92);
+    --glass-2-surface: rgba(255, 255, 255, 0.94);
+    --glass-3-surface: rgba(255, 255, 255, 0.95);
+    --glass-4-surface: rgba(255, 255, 255, 0.96);
+    --glass-5-surface: rgba(255, 255, 255, 0.98);
+  }
+
+  .dark {
+    --glass-1-surface: rgba(0, 0, 0, 0.88);
+    --glass-2-surface: rgba(0, 0, 0, 0.90);
+    --glass-3-surface: rgba(0, 0, 0, 0.92);
+    --glass-4-surface: rgba(0, 0, 0, 0.94);
+    --glass-5-surface: rgba(0, 0, 0, 0.96);
+  }
+
+  .glass-surface,
+  .glass-1,
+  .glass-2,
+  .glass-3,
+  .glass-4,
+  .glass-5 {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+/* ── Reduced motion ────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-fast: 1ms;
+    --motion-normal: 1ms;
+    --motion-slow: 1ms;
+    --motion-spring: 1ms;
+  }
+}