@thangnqdev/ui 0.1.0

package/README.md

@@ -0,0 +1,196 @@
+# @my-brand/ui
+
+> **AETHER** — Spatial Optics & Editorial Bento System for React & Tailwind CSS.
+
+An AI-native, visionOS-inspired, architectural UI component system designed for high-end digital products, luxury hardware interfaces, and editorial spatial layouts.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @my-brand/ui
+# or
+pnpm add @my-brand/ui
+# or
+yarn add @my-brand/ui
+```
+
+### Peer Dependencies
+Ensure `react` and `react-dom` (>= 18.0.0 or 19.0.0) are installed in your project:
+```bash
+npm install react react-dom
+```
+
+---
+
+## ⚙️ Tailwind CSS Integration (Crucial Step)
+
+Because `@my-brand/ui` components use utility classes inside pre-compiled JS chunks, you must configure Tailwind to scan the package files in your `node_modules`.
+
+### A. Tailwind CSS v4
+
+Add the `@source` directive and token stylesheet import in your main CSS file (e.g., `src/index.css`):
+
+```css
+@import "tailwindcss";
+
+/* 1. Tell Tailwind v4 to scan @my-brand/ui bundle */
+@source "../node_modules/@my-brand/ui/dist";
+
+/* 2. Import design tokens */
+@import "@my-brand/ui/styles.css";
+```
+
+### B. Tailwind CSS v3
+
+Add the package path to `content` in `tailwind.config.js`:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@my-brand/ui/dist/**/*.{js,cjs}',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+And import the tokens in your CSS:
+```css
+@import "@my-brand/ui/styles.css";
+```
+
+---
+
+## 🚀 Quickstart Usage
+
+### 1. Refractive Optical Glass (`@my-brand/ui/glass`)
+
+```tsx
+import React from 'react';
+import { GlassCard, GlassButton, GlassBadge } from '@my-brand/ui/glass';
+import '@my-brand/ui/glass/styles.css'; // Or use root @my-brand/ui/styles.css
+
+export function HeroGlassSpecimen() {
+  return (
+    <GlassCard intensity="acrylic" glow="white" radius="xl" padding="lg">
+      <div className="flex items-center justify-between">
+        <GlassBadge variant="emerald" dot>
+          QUANTUM COHERENT
+        </GlassBadge>
+        <span className="font-mono text-xs text-zinc-400">η = 1.517</span>
+      </div>
+
+      <div className="mt-4 space-y-2">
+        <h3 className="text-2xl font-bold tracking-tight text-white">
+          Optical Surface Refraction
+        </h3>
+        <p className="text-sm text-zinc-400">
+          Physical frosted acrylic with layered depth and 1px specular top highlight.
+        </p>
+      </div>
+
+      <div className="mt-6 flex gap-3">
+        <GlassButton variant="primary" size="md">
+          Engage Optics
+        </GlassButton>
+        <GlassButton variant="ghost" size="md">
+          Inspect Telemetry
+        </GlassButton>
+      </div>
+    </GlassCard>
+  );
+}
+```
+
+### 2. Editorial Bento Grid (`@my-brand/ui/bento`)
+
+```tsx
+import React from 'react';
+import { BentoGrid, BentoCard } from '@my-brand/ui/bento';
+import '@my-brand/ui/bento/styles.css';
+
+export function TelemetryMatrix() {
+  return (
+    <BentoGrid cols={3} gap="md" flow="dense">
+      {/* Hero 2-Column Block */}
+      <BentoCard
+        colSpan={2}
+        variant="spotlight"
+        tag="TELEMETRY BUS"
+        title="Monolithic Spatial Synthesis"
+        description="Asymmetrical architectural layout with auto-dense responsive flow."
+      />
+
+      {/* 1-Column Stat Block */}
+      <BentoCard
+        colSpan={1}
+        variant="default"
+        tag="CLOCK"
+        title="4.80 GHz"
+        description="Zero-drift synchronized quantum phase lock."
+      />
+    </BentoGrid>
+  );
+}
+```
+
+---
+
+## 🎨 Component Directory & Props
+
+### `<GlassCard>`
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `intensity` | `'subtle' \| 'standard' \| 'frosted' \| 'acrylic'` | `'standard'` | Optical blur and refractive depth |
+| `glow` | `'none' \| 'cyan' \| 'purple' \| 'white'` | `'none'` | Subtle ambient radiation on hover |
+| `radius` | `'md' \| 'lg' \| 'xl'` | `'lg'` | Corner curvature (`rounded-xl` to `rounded-3xl`) |
+| `padding` | `'sm' \| 'md' \| 'lg'` | `'md'` | Internal spacing |
+| `specularLight` | `boolean` | `true` | 1px reflective top hairline beam |
+
+### `<GlassButton>`
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'default' \| 'primary' \| 'luminescent' \| 'ghost'` | `'default'` | Tactile button finish |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'icon'` | `'md'` | Button dimension and typography scale |
+| `shimmer` | `boolean` | `true` | 45° micro-lens sweep reflection on hover |
+
+### `<GlassBadge>`
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'default' \| 'emerald' \| 'cyan' \| 'purple' \| 'amber'` | `'default'` | Telemetry status color |
+| `size` | `'sm' \| 'md'` | `'md'` | Monospace label scale |
+| `dot` | `boolean` | `false` | Pulsing hardware LED beacon |
+
+### `<BentoGrid>`
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `cols` | `1 \| 2 \| 3 \| 4` | `3` | Number of grid columns |
+| `gap` | `'sm' \| 'md' \| 'lg'` | `'md'` | Inter-card spacing (`gap-4` to `gap-8`) |
+| `flow` | `'row' \| 'col' \| 'dense' \| 'row-dense' \| 'col-dense'` | `'row'` | Grid packing algorithm |
+
+### `<BentoCard>`
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `colSpan` | `1 \| 2 \| 3` | `1` | Responsive column span |
+| `rowSpan` | `1 \| 2 \| 3` | `1` | Responsive row span |
+| `variant` | `'default' \| 'spotlight' \| 'elevated'` | `'default'` | Surface elevation & hover glow |
+| `backgroundGraphic` | `ReactNode` | `undefined` | Non-interactive background vector/graphic |
+
+---
+
+## 🤖 AI Machine Context Manifests
+
+This library includes formal AI agent manifests for automated coding assistants (Cursor, Antigravity, Claude Code, Qwen):
+- `llms.txt`: Canonical specification of tokens, component APIs, and spatial design philosophy.
+- `ui-contract.json`: Strict JSON schema for zero-drift code generation.
+
+---
+
+## 📄 License
+MIT © 2026 AETHER Spatial UI

package/dist/Label-DWOlgSNW.d.cts

@@ -0,0 +1,14 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React__default from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const labelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface LabelProps extends React__default.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {
+    required?: boolean;
+}
+declare const Label: React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>;
+
+export { Label as L, type LabelProps as a, labelVariants as l };

package/dist/Label-DWOlgSNW.d.ts

@@ -0,0 +1,14 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React__default from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const labelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    error?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface LabelProps extends React__default.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {
+    required?: boolean;
+}
+declare const Label: React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>;
+
+export { Label as L, type LabelProps as a, labelVariants as l };

package/dist/bento/index.cjs

@@ -0,0 +1,140 @@
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+// src/bento/BentoGrid.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var bentoGridVariants = classVarianceAuthority.cva("grid w-full auto-rows-[minmax(240px,auto)]", {
+  variants: {
+    cols: {
+      1: "grid-cols-1",
+      2: "grid-cols-1 md:grid-cols-2",
+      3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+      4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+    },
+    gap: {
+      sm: "gap-4",
+      md: "gap-6",
+      lg: "gap-8"
+    },
+    flow: {
+      row: "grid-flow-row",
+      col: "grid-flow-col",
+      dense: "grid-flow-dense",
+      "row-dense": "grid-flow-row-dense",
+      "col-dense": "grid-flow-col-dense"
+    }
+  },
+  defaultVariants: {
+    cols: 3,
+    gap: "md",
+    flow: "row"
+  }
+});
+var BentoGrid = ({
+  className,
+  cols,
+  gap,
+  flow,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bentoGridVariants({ cols, gap, flow, className })), ...props, children });
+};
+var bentoCardVariants = classVarianceAuthority.cva(
+  "group relative flex flex-col justify-between overflow-hidden transition-all duration-500 ease-out border text-[var(--ui-bento-text-title)]",
+  {
+    variants: {
+      colSpan: {
+        1: "col-span-1",
+        2: "col-span-1 md:col-span-2",
+        3: "col-span-1 md:col-span-2 lg:col-span-3"
+      },
+      rowSpan: {
+        1: "row-span-1",
+        2: "row-span-1 md:row-span-2 md:min-h-[460px]",
+        3: "row-span-1 md:row-span-3 md:min-h-[680px]"
+      },
+      variant: {
+        default: "bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] hover:bg-[var(--ui-bento-bg-card-hover)] shadow-[var(--ui-bento-shadow)]",
+        spotlight: "bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-white/30 dark:hover:border-white/30 hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.12)]",
+        elevated: "bg-[image:var(--ui-bento-bg-elevated)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] shadow-[var(--ui-bento-shadow-elevated)]"
+      },
+      radius: {
+        md: "rounded-[var(--ui-bento-radius-md)]",
+        lg: "rounded-[var(--ui-bento-radius-lg)]"
+      },
+      padding: {
+        sm: "p-4 sm:p-5",
+        md: "p-5 sm:p-7",
+        lg: "p-6 sm:p-9"
+      }
+    },
+    defaultVariants: {
+      colSpan: 1,
+      rowSpan: 1,
+      variant: "default",
+      radius: "lg",
+      padding: "md"
+    }
+  }
+);
+var BentoCard = react.forwardRef(
+  ({
+    className,
+    colSpan,
+    rowSpan,
+    variant,
+    radius,
+    padding,
+    title,
+    description,
+    icon,
+    tag,
+    backgroundGraphic,
+    graphic,
+    children,
+    ...props
+  }, ref) => {
+    const bgGraphic = backgroundGraphic ?? graphic;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(bentoCardVariants({ colSpan, rowSpan, variant, radius, padding, className })),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-50",
+              "aria-hidden": "true"
+            }
+          ),
+          bgGraphic && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-0 overflow-hidden pointer-events-none opacity-70 transition-transform duration-700 ease-out motion-safe:group-hover:scale-105", children: bgGraphic }),
+          (icon || tag) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex items-start justify-between gap-4", children: [
+            icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--ui-bento-icon-bg)] border border-[var(--ui-bento-icon-border)] backdrop-blur-md shadow-inner transition-transform duration-300 group-hover:scale-105", children: icon }),
+            tag && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-[10px] font-semibold uppercase tracking-widest text-[var(--ui-bento-text-tag)] border border-[var(--ui-bento-icon-border)] bg-[var(--ui-bento-icon-bg)] px-2.5 py-1 rounded-md backdrop-blur-sm", children: tag })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 mt-auto pt-6", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold tracking-tight text-[var(--ui-bento-text-title)] transition-colors group-hover:text-[var(--ui-primary)] dark:group-hover:text-white", children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm leading-relaxed text-[var(--ui-bento-text-desc)] font-normal", children: description }),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+);
+BentoCard.displayName = "BentoCard";
+
+exports.BentoCard = BentoCard;
+exports.BentoGrid = BentoGrid;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/bento/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/bento/BentoGrid.tsx","../../src/bento/BentoCard.tsx"],"names":["twMerge","clsx","cva","jsx","forwardRef","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\r\nimport { twMerge } from 'tailwind-merge';\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","import React from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\n\r\nconst bentoGridVariants = cva('grid w-full auto-rows-[minmax(240px,auto)]', {\r\n  variants: {\r\n    cols: {\r\n      1: 'grid-cols-1',\r\n      2: 'grid-cols-1 md:grid-cols-2',\r\n      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\r\n      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',\r\n    },\r\n    gap: {\r\n      sm: 'gap-4',\r\n      md: 'gap-6',\r\n      lg: 'gap-8',\r\n    },\r\n    flow: {\r\n      row: 'grid-flow-row',\r\n      col: 'grid-flow-col',\r\n      dense: 'grid-flow-dense',\r\n      'row-dense': 'grid-flow-row-dense',\r\n      'col-dense': 'grid-flow-col-dense',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    cols: 3,\r\n    gap: 'md',\r\n    flow: 'row',\r\n  },\r\n});\r\n\r\nexport interface BentoGridProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof bentoGridVariants> {}\r\n\r\nexport const BentoGrid: React.FC<BentoGridProps> = ({\r\n  className,\r\n  cols,\r\n  gap,\r\n  flow,\r\n  children,\r\n  ...props\r\n}) => {\r\n  return (\r\n    <div className={cn(bentoGridVariants({ cols, gap, flow, className }))} {...props}>\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n","import React, { forwardRef } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\n\r\nconst bentoCardVariants = cva(\r\n  'group relative flex flex-col justify-between overflow-hidden transition-all duration-500 ease-out border text-[var(--ui-bento-text-title)]',\r\n  {\r\n    variants: {\r\n      colSpan: {\r\n        1: 'col-span-1',\r\n        2: 'col-span-1 md:col-span-2',\r\n        3: 'col-span-1 md:col-span-2 lg:col-span-3',\r\n      },\r\n      rowSpan: {\r\n        1: 'row-span-1',\r\n        2: 'row-span-1 md:row-span-2 md:min-h-[460px]',\r\n        3: 'row-span-1 md:row-span-3 md:min-h-[680px]',\r\n      },\r\n      variant: {\r\n        default:\r\n          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] hover:bg-[var(--ui-bento-bg-card-hover)] shadow-[var(--ui-bento-shadow)]',\r\n        spotlight:\r\n          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-white/30 dark:hover:border-white/30 hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.12)]',\r\n        elevated:\r\n          'bg-[image:var(--ui-bento-bg-elevated)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] shadow-[var(--ui-bento-shadow-elevated)]',\r\n      },\r\n      radius: {\r\n        md: 'rounded-[var(--ui-bento-radius-md)]',\r\n        lg: 'rounded-[var(--ui-bento-radius-lg)]',\r\n      },\r\n      padding: {\r\n        sm: 'p-4 sm:p-5',\r\n        md: 'p-5 sm:p-7',\r\n        lg: 'p-6 sm:p-9',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      colSpan: 1,\r\n      rowSpan: 1,\r\n      variant: 'default',\r\n      radius: 'lg',\r\n      padding: 'md',\r\n    },\r\n  }\r\n);\r\n\r\nexport interface BentoCardProps\r\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\r\n    VariantProps<typeof bentoCardVariants> {\r\n  title?: React.ReactNode;\r\n  description?: React.ReactNode;\r\n  icon?: React.ReactNode;\r\n  tag?: React.ReactNode;\r\n  /**\r\n   * Decorative background graphic. Non-interactive backdrop element.\r\n   */\r\n  backgroundGraphic?: React.ReactNode;\r\n  /**\r\n   * @deprecated Use `backgroundGraphic` instead.\r\n   */\r\n  graphic?: React.ReactNode;\r\n}\r\n\r\nexport const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>(\r\n  (\r\n    {\r\n      className,\r\n      colSpan,\r\n      rowSpan,\r\n      variant,\r\n      radius,\r\n      padding,\r\n      title,\r\n      description,\r\n      icon,\r\n      tag,\r\n      backgroundGraphic,\r\n      graphic,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const bgGraphic = backgroundGraphic ?? graphic;\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(bentoCardVariants({ colSpan, rowSpan, variant, radius, padding, className }))}\r\n        {...props}\r\n      >\r\n        {/* Subtle Specular Top Line */}\r\n        <div\r\n          className=\"pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-50\"\r\n          aria-hidden=\"true\"\r\n        />\r\n\r\n        {/* Background Visual Graphic Slot (Decorative) */}\r\n        {bgGraphic && (\r\n          <div className=\"absolute inset-0 z-0 overflow-hidden pointer-events-none opacity-70 transition-transform duration-700 ease-out motion-safe:group-hover:scale-105\">\r\n            {bgGraphic}\r\n          </div>\r\n        )}\r\n\r\n        {/* Top Header Section */}\r\n        {(icon || tag) && (\r\n          <div className=\"relative z-10 flex items-start justify-between gap-4\">\r\n            {icon && (\r\n              <div className=\"flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--ui-bento-icon-bg)] border border-[var(--ui-bento-icon-border)] backdrop-blur-md shadow-inner transition-transform duration-300 group-hover:scale-105\">\r\n                {icon}\r\n              </div>\r\n            )}\r\n            {tag && (\r\n              <div className=\"font-mono text-[10px] font-semibold uppercase tracking-widest text-[var(--ui-bento-text-tag)] border border-[var(--ui-bento-icon-border)] bg-[var(--ui-bento-icon-bg)] px-2.5 py-1 rounded-md backdrop-blur-sm\">\r\n                {tag}\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n\r\n        {/* Main Content Area */}\r\n        <div className=\"relative z-10 mt-auto pt-6\">\r\n          {title && (\r\n            <h3 className=\"text-xl font-bold tracking-tight text-[var(--ui-bento-text-title)] transition-colors group-hover:text-[var(--ui-primary)] dark:group-hover:text-white\">\r\n              {title}\r\n            </h3>\r\n          )}\r\n          {description && (\r\n            <p className=\"mt-2 text-sm leading-relaxed text-[var(--ui-bento-text-desc)] font-normal\">\r\n              {description}\r\n            </p>\r\n          )}\r\n          {children}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nBentoCard.displayName = 'BentoCard';\r\n"]}

package/dist/bento/index.d.cts

@@ -0,0 +1,4 @@
+export { B as BentoCard, a as BentoCardProps, b as BentoGrid, c as BentoGridProps } from '../index-BlPcGeW-.cjs';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';

package/dist/bento/index.d.ts

@@ -0,0 +1,4 @@
+export { B as BentoCard, a as BentoCardProps, b as BentoGrid, c as BentoGridProps } from '../index-BlPcGeW-.js';
+import 'class-variance-authority/types';
+import 'react';
+import 'class-variance-authority';

package/dist/bento/index.js

@@ -0,0 +1,4 @@
+export { BentoCard, BentoGrid } from '../chunk-C4SUXMI3.js';
+import '../chunk-4S6L5V7X.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/bento/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/bento/styles.css

@@ -0,0 +1,46 @@
+:root {
+  /* ==========================================================================
+     AETHER BENTO TOKENS — LIGHT MODE (ARCHITECTURAL ALABASTER)
+     ========================================================================== */
+  --ui-bento-bg-surface: #f6f8fb;
+  --ui-bento-bg-card: #ffffff;
+  --ui-bento-bg-card-hover: #f9fafc;
+  --ui-bento-bg-elevated: linear-gradient(180deg, #ffffff 0%, #f1f4f9 100%);
+
+  --ui-bento-border: rgba(15, 23, 42, 0.08);
+  --ui-bento-border-hover: rgba(15, 23, 42, 0.20);
+
+  --ui-bento-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 1);
+  --ui-bento-shadow-elevated: 0 16px 40px -6px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 1);
+
+  --ui-bento-text-title: #0a0c10;
+  --ui-bento-text-desc: #4b5563;
+  --ui-bento-text-tag: #6b7280;
+  --ui-bento-icon-bg: rgba(15, 23, 42, 0.04);
+  --ui-bento-icon-border: rgba(15, 23, 42, 0.08);
+
+  --ui-bento-radius-md: 1.25rem; /* 20px */
+  --ui-bento-radius-lg: 1.75rem; /* 28px */
+}
+
+.dark {
+  /* ==========================================================================
+     AETHER BENTO TOKENS — DARK MODE (OBSIDIAN & SMOKED QUARTZ)
+     ========================================================================== */
+  --ui-bento-bg-surface: #07080b;
+  --ui-bento-bg-card: #0d1017;
+  --ui-bento-bg-card-hover: #121620;
+  --ui-bento-bg-elevated: linear-gradient(180deg, #131722 0%, #0a0c11 100%);
+
+  --ui-bento-border: rgba(255, 255, 255, 0.07);
+  --ui-bento-border-hover: rgba(255, 255, 255, 0.20);
+
+  --ui-bento-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
+  --ui-bento-shadow-elevated: 0 24px 60px -8px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
+
+  --ui-bento-text-title: #f2f5f9;
+  --ui-bento-text-desc: #94a1b2;
+  --ui-bento-text-tag: #6b7a90;
+  --ui-bento-icon-bg: rgba(255, 255, 255, 0.05);
+  --ui-bento-icon-border: rgba(255, 255, 255, 0.10);
+}