@hilum/ui 0.1.1

package/dist/tokens.css

@@ -0,0 +1,265 @@
+/* Hilum UI tokens — generated by scripts/build-tokens.mjs. Do not edit by hand. */
+
+@theme {
+  --color-taupe-50: #f9f7f5;
+  --color-taupe-100: #f2eeea;
+  --color-taupe-200: #e3dcd4;
+  --color-taupe-300: #c9beb3;
+  --color-taupe-400: #a8978a;
+  --color-taupe-500: #7d6960;
+  --color-taupe-600: #5d4e47;
+  --color-taupe-700: #4a3d38;
+  --color-taupe-800: #332924;
+  --color-taupe-900: #26181a;
+  --color-taupe-950: #160e0a;
+  --color-purple-50: #fdf0ff;
+  --color-purple-100: #f5d6ff;
+  --color-purple-200: #e8a8ff;
+  --color-purple-300: #d870f9;
+  --color-purple-400: #c840f6;
+  --color-purple-500: #c100f1;
+  --color-purple-600: #9c00c0;
+  --color-purple-700: #740092;
+  --color-purple-800: #4e0062;
+  --color-purple-900: #330040;
+  --color-purple-950: #200028;
+  --color-brand-primary: #C100F1;
+  --color-brand-secondary: #FFF5BF;
+  --color-butter-50: #ffffe8;
+  --color-butter-100: #fffad0;
+  --color-butter-200: #fff5bf;
+  --color-butter-300: #fde870;
+  --color-butter-400: #f6d42a;
+  --color-butter-500: #dab010;
+  --color-butter-600: #a88008;
+  --color-butter-700: #7c5c04;
+  --color-butter-800: #543e02;
+  --color-butter-900: #382801;
+  --color-butter-950: #221600;
+  --color-destructive: #dc2626;
+
+  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
+  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
+
+  --radius-base: 0.5rem;
+  --radius-sm: calc(0.5rem - 4px);
+  --radius-md: calc(0.5rem - 2px);
+  --radius-lg: 0.5rem;
+  --radius-xl: calc(0.5rem + 4px);
+  --radius-full: 9999px;
+
+  --shadow-natural: 0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06);
+  --shadow-elevated: 0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.1);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-ring: var(--ring);
+}
+
+:root {
+  --background: #ffffff;
+  --foreground: #26181a;
+  --card: #ffffff;
+  --card-foreground: #26181a;
+  --surface: #f9f7f5;
+  --surface-foreground: #332924;
+  --border: #f2eeea;
+  --input: #f2eeea;
+  --muted: #f9f7f5;
+  --muted-foreground: #7d6960;
+  --accent: #fdf0ff;
+  --accent-foreground: #740092;
+  --primary: #c100f1;
+  --primary-foreground: #ffffff;
+  --secondary: #f9f7f5;
+  --secondary-foreground: #4a3d38;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #CDEA19;
+  --success-foreground: #26181a;
+  --warning: #fff5bf;
+  --warning-foreground: #26181a;
+  --ring: #c100f1;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --background: #160e0a;
+    --foreground: #f9f7f5;
+    --card: #26181a;
+    --card-foreground: #f9f7f5;
+    --surface: #26181a;
+    --surface-foreground: #f2eeea;
+    --border: #332924;
+    --input: #332924;
+    --muted: #26181a;
+    --muted-foreground: #a8978a;
+    --accent: #330040;
+    --accent-foreground: #f5d6ff;
+    --primary: #c100f1;
+    --primary-foreground: #ffffff;
+    --secondary: #26181a;
+    --secondary-foreground: #f2eeea;
+    --destructive: #ef4444;
+    --destructive-foreground: #ffffff;
+    --success: #CDEA19;
+    --success-foreground: #160e0a;
+    --warning: #221600;
+    --warning-foreground: #fffad0;
+    --ring: #c100f1;
+  }
+}
+
+[data-theme="dark"] {
+  --background: #160e0a;
+  --foreground: #f9f7f5;
+  --card: #26181a;
+  --card-foreground: #f9f7f5;
+  --surface: #26181a;
+  --surface-foreground: #f2eeea;
+  --border: #332924;
+  --input: #332924;
+  --muted: #26181a;
+  --muted-foreground: #a8978a;
+  --accent: #330040;
+  --accent-foreground: #f5d6ff;
+  --primary: #c100f1;
+  --primary-foreground: #ffffff;
+  --secondary: #26181a;
+  --secondary-foreground: #f2eeea;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --success: #CDEA19;
+  --success-foreground: #160e0a;
+  --warning: #221600;
+  --warning-foreground: #fffad0;
+  --ring: #c100f1;
+}
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));
+
+@utility display-xl {
+  font-family: var(--font-serif);
+  font-size: 3rem;
+  font-weight: 400;
+  line-height: 1.15;
+}
+
+@utility display {
+  font-family: var(--font-serif);
+  font-size: 2.25rem;
+  font-weight: 400;
+  line-height: 1.15;
+}
+
+@utility heading-xl {
+  font-family: var(--font-serif);
+  font-size: 1.875rem;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+@utility heading {
+  font-family: var(--font-serif);
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+@utility subheading {
+  font-family: var(--font-serif);
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+@utility body-lg {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.625;
+}
+
+@utility body {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.625;
+}
+
+@utility caption {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.625;
+}
+
+@utility caption-xs {
+  font-family: var(--font-sans);
+  font-size: 0.625rem;
+  font-weight: 400;
+  line-height: 1.625;
+}
+
+@utility label {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+@keyframes caret-blink {
+  0%, 70%, 100% { opacity: 1; }
+  20%, 50% { opacity: 0; }
+}
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-color: var(--border);
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/dist/tokens.d.ts

@@ -0,0 +1,189 @@
+declare const tokens: {
+    readonly taupe: {
+        readonly 50: "#f9f7f5";
+        readonly 100: "#f2eeea";
+        readonly 200: "#e3dcd4";
+        readonly 300: "#c9beb3";
+        readonly 400: "#a8978a";
+        readonly 500: "#7d6960";
+        readonly 600: "#5d4e47";
+        readonly 700: "#4a3d38";
+        readonly 800: "#332924";
+        readonly 900: "#26181a";
+        readonly 950: "#160e0a";
+    };
+    readonly butter: {
+        readonly 50: "#ffffe8";
+        readonly 100: "#fffad0";
+        readonly 200: "#fff5bf";
+        readonly 300: "#fde870";
+        readonly 400: "#f6d42a";
+        readonly 500: "#dab010";
+        readonly 600: "#a88008";
+        readonly 700: "#7c5c04";
+        readonly 800: "#543e02";
+        readonly 900: "#382801";
+        readonly 950: "#221600";
+    };
+    readonly purple: {
+        readonly 50: "#fdf0ff";
+        readonly 100: "#f5d6ff";
+        readonly 200: "#e8a8ff";
+        readonly 300: "#d870f9";
+        readonly 400: "#c840f6";
+        readonly 500: "#c100f1";
+        readonly 600: "#9c00c0";
+        readonly 700: "#740092";
+        readonly 800: "#4e0062";
+        readonly 900: "#330040";
+        readonly 950: "#200028";
+    };
+    readonly brand: {
+        readonly primary: "#C100F1";
+        readonly secondary: "#FFF5BF";
+    };
+    readonly destructive: "#dc2626";
+    readonly semantic: {
+        readonly light: {
+            readonly background: "#ffffff";
+            readonly foreground: "#26181a";
+            readonly card: "#ffffff";
+            readonly cardForeground: "#26181a";
+            readonly surface: "#f9f7f5";
+            readonly surfaceForeground: "#332924";
+            readonly border: "#f2eeea";
+            readonly input: "#f2eeea";
+            readonly muted: "#f9f7f5";
+            readonly mutedForeground: "#7d6960";
+            readonly accent: "#fdf0ff";
+            readonly accentForeground: "#740092";
+            readonly primary: "#c100f1";
+            readonly primaryForeground: "#ffffff";
+            readonly secondary: "#f9f7f5";
+            readonly secondaryForeground: "#4a3d38";
+            readonly destructive: "#dc2626";
+            readonly destructiveForeground: "#ffffff";
+            readonly success: "#CDEA19";
+            readonly successForeground: "#26181a";
+            readonly warning: "#fff5bf";
+            readonly warningForeground: "#26181a";
+            readonly ring: "#c100f1";
+        };
+        readonly dark: {
+            readonly background: "#160e0a";
+            readonly foreground: "#f9f7f5";
+            readonly card: "#26181a";
+            readonly cardForeground: "#f9f7f5";
+            readonly surface: "#26181a";
+            readonly surfaceForeground: "#f2eeea";
+            readonly border: "#332924";
+            readonly input: "#332924";
+            readonly muted: "#26181a";
+            readonly mutedForeground: "#a8978a";
+            readonly accent: "#330040";
+            readonly accentForeground: "#f5d6ff";
+            readonly primary: "#c100f1";
+            readonly primaryForeground: "#ffffff";
+            readonly secondary: "#26181a";
+            readonly secondaryForeground: "#f2eeea";
+            readonly destructive: "#ef4444";
+            readonly destructiveForeground: "#ffffff";
+            readonly success: "#CDEA19";
+            readonly successForeground: "#160e0a";
+            readonly warning: "#221600";
+            readonly warningForeground: "#fffad0";
+            readonly ring: "#c100f1";
+        };
+    };
+    readonly fontFamily: {
+        readonly sans: "Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+        readonly serif: "\"Instrument Serif\", ui-serif, Georgia, serif";
+        readonly mono: "ui-monospace, \"SFMono-Regular\", \"Menlo\", \"Consolas\", monospace";
+    };
+    /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */
+    readonly typeScale: {
+        readonly "display-xl": {
+            readonly family: "serif";
+            readonly size: "3rem";
+            readonly weight: 400;
+            readonly lineHeight: "1.15";
+        };
+        readonly display: {
+            readonly family: "serif";
+            readonly size: "2.25rem";
+            readonly weight: 400;
+            readonly lineHeight: "1.15";
+        };
+        readonly "heading-xl": {
+            readonly family: "serif";
+            readonly size: "1.875rem";
+            readonly weight: 400;
+            readonly lineHeight: "1.2";
+        };
+        readonly heading: {
+            readonly family: "serif";
+            readonly size: "1.5rem";
+            readonly weight: 400;
+            readonly lineHeight: "1.2";
+        };
+        readonly subheading: {
+            readonly family: "serif";
+            readonly size: "1.25rem";
+            readonly weight: 400;
+            readonly lineHeight: "1.4";
+        };
+        readonly "body-lg": {
+            readonly family: "sans";
+            readonly size: "1rem";
+            readonly weight: 400;
+            readonly lineHeight: "1.625";
+        };
+        readonly body: {
+            readonly family: "sans";
+            readonly size: "0.875rem";
+            readonly weight: 400;
+            readonly lineHeight: "1.625";
+        };
+        readonly caption: {
+            readonly family: "sans";
+            readonly size: "0.75rem";
+            readonly weight: 400;
+            readonly lineHeight: "1.625";
+        };
+        readonly "caption-xs": {
+            readonly family: "sans";
+            readonly size: "0.625rem";
+            readonly weight: 400;
+            readonly lineHeight: "1.625";
+        };
+        readonly label: {
+            readonly family: "sans";
+            readonly size: "0.75rem";
+            readonly weight: 600;
+            readonly lineHeight: "1";
+            readonly letterSpacing: "0.1em";
+            readonly textTransform: "uppercase";
+        };
+    };
+    readonly radius: {
+        readonly base: "0.5rem";
+        readonly sm: "calc(0.5rem - 4px)";
+        readonly md: "calc(0.5rem - 2px)";
+        readonly lg: "0.5rem";
+        readonly xl: "calc(0.5rem + 4px)";
+        readonly full: "9999px";
+    };
+    readonly shadow: {
+        readonly natural: "0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06)";
+        readonly elevated: "0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.1)";
+    };
+    readonly animation: {
+        readonly "accordion-down": "accordion-down 0.2s ease-out";
+        readonly "accordion-up": "accordion-up 0.2s ease-out";
+        readonly "caret-blink": "caret-blink 1.25s ease-out infinite";
+    };
+};
+type Tokens = typeof tokens;
+type SemanticTokens = typeof tokens.semantic.light;
+
+export { type SemanticTokens, type Tokens, tokens };

package/dist/tokens.js

@@ -0,0 +1,193 @@
+// src/tokens/tokens.ts
+var tokens = {
+  /* ============================================================== *
+   *  PALETTE — concrete colors                                      *
+   * ============================================================== */
+  taupe: {
+    50: "#f9f7f5",
+    100: "#f2eeea",
+    200: "#e3dcd4",
+    300: "#c9beb3",
+    400: "#a8978a",
+    500: "#7d6960",
+    600: "#5d4e47",
+    700: "#4a3d38",
+    800: "#332924",
+    900: "#26181a",
+    950: "#160e0a"
+  },
+  // Pale lemon — anchor: butter-200 = #FFF5BF
+  butter: {
+    50: "#ffffe8",
+    100: "#fffad0",
+    200: "#fff5bf",
+    300: "#fde870",
+    400: "#f6d42a",
+    500: "#dab010",
+    600: "#a88008",
+    700: "#7c5c04",
+    800: "#543e02",
+    900: "#382801",
+    950: "#221600"
+  },
+  // Vivid purple — anchor: purple-500 = #C100F1 (brand.primary)
+  purple: {
+    50: "#fdf0ff",
+    100: "#f5d6ff",
+    200: "#e8a8ff",
+    300: "#d870f9",
+    400: "#c840f6",
+    500: "#c100f1",
+    600: "#9c00c0",
+    700: "#740092",
+    800: "#4e0062",
+    900: "#330040",
+    950: "#200028"
+  },
+  // Legacy functional colors — used by components not yet migrated to the new palette.
+  brand: {
+    primary: "#C100F1",
+    // purple-500
+    secondary: "#FFF5BF"
+    // butter-200
+  },
+  destructive: "#dc2626",
+  // red-600
+  /* ============================================================== *
+   *  SEMANTIC — what components reference                           *
+   * ============================================================== */
+  semantic: {
+    light: {
+      background: "#ffffff",
+      foreground: "#26181a",
+      // taupe-900
+      card: "#ffffff",
+      cardForeground: "#26181a",
+      surface: "#f9f7f5",
+      // taupe-50
+      surfaceForeground: "#332924",
+      // taupe-800
+      border: "#f2eeea",
+      // taupe-100
+      input: "#f2eeea",
+      muted: "#f9f7f5",
+      mutedForeground: "#7d6960",
+      // taupe-500
+      accent: "#fdf0ff",
+      // purple-50
+      accentForeground: "#740092",
+      // purple-700
+      primary: "#c100f1",
+      // purple-500 = brand.primary
+      primaryForeground: "#ffffff",
+      secondary: "#f9f7f5",
+      // taupe-50
+      secondaryForeground: "#4a3d38",
+      // taupe-700
+      destructive: "#dc2626",
+      destructiveForeground: "#ffffff",
+      success: "#CDEA19",
+      // lime — functional semantic only
+      successForeground: "#26181a",
+      warning: "#fff5bf",
+      // butter-200 = brand.secondary
+      warningForeground: "#26181a",
+      // taupe-900
+      ring: "#c100f1"
+      // purple-500 = brand.primary
+    },
+    dark: {
+      background: "#160e0a",
+      // taupe-950
+      foreground: "#f9f7f5",
+      // taupe-50
+      card: "#26181a",
+      // taupe-900
+      cardForeground: "#f9f7f5",
+      surface: "#26181a",
+      surfaceForeground: "#f2eeea",
+      border: "#332924",
+      // taupe-800
+      input: "#332924",
+      muted: "#26181a",
+      mutedForeground: "#a8978a",
+      // taupe-400
+      accent: "#330040",
+      // purple-900
+      accentForeground: "#f5d6ff",
+      // purple-100
+      primary: "#c100f1",
+      // purple-500 — brand stays consistent (D8)
+      primaryForeground: "#ffffff",
+      secondary: "#26181a",
+      secondaryForeground: "#f2eeea",
+      destructive: "#ef4444",
+      // red-500 (slightly lighter for dark)
+      destructiveForeground: "#ffffff",
+      success: "#CDEA19",
+      // lime — functional semantic only
+      successForeground: "#160e0a",
+      warning: "#221600",
+      // butter-950 surface
+      warningForeground: "#fffad0",
+      // butter-100
+      ring: "#c100f1"
+      // purple-500 = brand.primary
+    }
+  },
+  /* ============================================================== *
+   *  TYPOGRAPHY                                                      *
+   * ============================================================== */
+  fontFamily: {
+    sans: 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    serif: '"Instrument Serif", ui-serif, Georgia, serif',
+    mono: 'ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace'
+  },
+  /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */
+  typeScale: {
+    "display-xl": { family: "serif", size: "3rem", weight: 400, lineHeight: "1.15" },
+    display: { family: "serif", size: "2.25rem", weight: 400, lineHeight: "1.15" },
+    "heading-xl": { family: "serif", size: "1.875rem", weight: 400, lineHeight: "1.2" },
+    heading: { family: "serif", size: "1.5rem", weight: 400, lineHeight: "1.2" },
+    subheading: { family: "serif", size: "1.25rem", weight: 400, lineHeight: "1.4" },
+    "body-lg": { family: "sans", size: "1rem", weight: 400, lineHeight: "1.625" },
+    body: { family: "sans", size: "0.875rem", weight: 400, lineHeight: "1.625" },
+    caption: { family: "sans", size: "0.75rem", weight: 400, lineHeight: "1.625" },
+    "caption-xs": { family: "sans", size: "0.625rem", weight: 400, lineHeight: "1.625" },
+    label: {
+      family: "sans",
+      size: "0.75rem",
+      weight: 600,
+      lineHeight: "1",
+      letterSpacing: "0.1em",
+      textTransform: "uppercase"
+    }
+  },
+  /* ============================================================== *
+   *  GEOMETRY                                                        *
+   * ============================================================== */
+  radius: {
+    base: "0.5rem",
+    sm: "calc(0.5rem - 4px)",
+    md: "calc(0.5rem - 2px)",
+    lg: "0.5rem",
+    xl: "calc(0.5rem + 4px)",
+    full: "9999px"
+  },
+  shadow: {
+    natural: "0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06)",
+    elevated: "0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.1)"
+  },
+  /* ============================================================== *
+   *  ANIMATION                                                       *
+   * ============================================================== */
+  animation: {
+    "accordion-down": "accordion-down 0.2s ease-out",
+    "accordion-up": "accordion-up 0.2s ease-out",
+    "caret-blink": "caret-blink 1.25s ease-out infinite"
+  }
+};
+
+export { tokens };
+//# sourceMappingURL=tokens.js.map
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/tokens.ts"],"names":[],"mappings":"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","file":"tokens.js","sourcesContent":["// @hilum/ui/tokens — JS-first design tokens (D6).\n//\n// This module is the single source of truth for the Hilum visual identity.\n// A build step (scripts/build-tokens.mjs) reads the compiled output of this\n// file and emits dist/tokens.css for consumers to `@import`.\n//\n// Brand model: D8 — fully fixed. No per-app overrides.\n// Color modes:  D7 — light + dark, both auto (`prefers-color-scheme`) and\n//                    explicit via `[data-theme]`.\n//\n// Core brand colors:\n//   brand.primary   #C100F1 — vivid purple — purple-500 on the scale below\n//   brand.secondary #FFF5BF — pale lemon   — butter-200 on the scale below\n//\n// taupe — neutral spine for text, borders, and structure (unchanged)\n\nexport const tokens = {\n  /* ============================================================== *\n   *  PALETTE — concrete colors                                      *\n   * ============================================================== */\n\n  taupe: {\n    50: \"#f9f7f5\",\n    100: \"#f2eeea\",\n    200: \"#e3dcd4\",\n    300: \"#c9beb3\",\n    400: \"#a8978a\",\n    500: \"#7d6960\",\n    600: \"#5d4e47\",\n    700: \"#4a3d38\",\n    800: \"#332924\",\n    900: \"#26181a\",\n    950: \"#160e0a\",\n  },\n\n  // Pale lemon — anchor: butter-200 = #FFF5BF\n  butter: {\n    50: \"#ffffe8\",\n    100: \"#fffad0\",\n    200: \"#fff5bf\",\n    300: \"#fde870\",\n    400: \"#f6d42a\",\n    500: \"#dab010\",\n    600: \"#a88008\",\n    700: \"#7c5c04\",\n    800: \"#543e02\",\n    900: \"#382801\",\n    950: \"#221600\",\n  },\n\n  // Vivid purple — anchor: purple-500 = #C100F1 (brand.primary)\n  purple: {\n    50: \"#fdf0ff\",\n    100: \"#f5d6ff\",\n    200: \"#e8a8ff\",\n    300: \"#d870f9\",\n    400: \"#c840f6\",\n    500: \"#c100f1\",\n    600: \"#9c00c0\",\n    700: \"#740092\",\n    800: \"#4e0062\",\n    900: \"#330040\",\n    950: \"#200028\",\n  },\n\n  // Legacy functional colors — used by components not yet migrated to the new palette.\n  brand: {\n    primary: \"#C100F1\", // purple-500\n    secondary: \"#FFF5BF\", // butter-200\n  },\n\n  destructive: \"#dc2626\", // red-600\n\n  /* ============================================================== *\n   *  SEMANTIC — what components reference                           *\n   * ============================================================== */\n\n  semantic: {\n    light: {\n      background: \"#ffffff\",\n      foreground: \"#26181a\", // taupe-900\n      card: \"#ffffff\",\n      cardForeground: \"#26181a\",\n      surface: \"#f9f7f5\", // taupe-50\n      surfaceForeground: \"#332924\", // taupe-800\n      border: \"#f2eeea\", // taupe-100\n      input: \"#f2eeea\",\n      muted: \"#f9f7f5\",\n      mutedForeground: \"#7d6960\", // taupe-500\n      accent: \"#fdf0ff\", // purple-50\n      accentForeground: \"#740092\", // purple-700\n      primary: \"#c100f1\", // purple-500 = brand.primary\n      primaryForeground: \"#ffffff\",\n      secondary: \"#f9f7f5\", // taupe-50\n      secondaryForeground: \"#4a3d38\", // taupe-700\n      destructive: \"#dc2626\",\n      destructiveForeground: \"#ffffff\",\n      success: \"#CDEA19\", // lime — functional semantic only\n      successForeground: \"#26181a\",\n      warning: \"#fff5bf\", // butter-200 = brand.secondary\n      warningForeground: \"#26181a\", // taupe-900\n      ring: \"#c100f1\", // purple-500 = brand.primary\n    },\n    dark: {\n      background: \"#160e0a\", // taupe-950\n      foreground: \"#f9f7f5\", // taupe-50\n      card: \"#26181a\", // taupe-900\n      cardForeground: \"#f9f7f5\",\n      surface: \"#26181a\",\n      surfaceForeground: \"#f2eeea\",\n      border: \"#332924\", // taupe-800\n      input: \"#332924\",\n      muted: \"#26181a\",\n      mutedForeground: \"#a8978a\", // taupe-400\n      accent: \"#330040\", // purple-900\n      accentForeground: \"#f5d6ff\", // purple-100\n      primary: \"#c100f1\", // purple-500 — brand stays consistent (D8)\n      primaryForeground: \"#ffffff\",\n      secondary: \"#26181a\",\n      secondaryForeground: \"#f2eeea\",\n      destructive: \"#ef4444\", // red-500 (slightly lighter for dark)\n      destructiveForeground: \"#ffffff\",\n      success: \"#CDEA19\", // lime — functional semantic only\n      successForeground: \"#160e0a\",\n      warning: \"#221600\", // butter-950 surface\n      warningForeground: \"#fffad0\", // butter-100\n      ring: \"#c100f1\", // purple-500 = brand.primary\n    },\n  },\n\n  /* ============================================================== *\n   *  TYPOGRAPHY                                                      *\n   * ============================================================== */\n\n  fontFamily: {\n    sans: 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    serif: '\"Instrument Serif\", ui-serif, Georgia, serif',\n    mono: 'ui-monospace, \"SFMono-Regular\", \"Menlo\", \"Consolas\", monospace',\n  },\n\n  /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */\n  typeScale: {\n    \"display-xl\": { family: \"serif\", size: \"3rem\", weight: 400, lineHeight: \"1.15\" },\n    display: { family: \"serif\", size: \"2.25rem\", weight: 400, lineHeight: \"1.15\" },\n    \"heading-xl\": { family: \"serif\", size: \"1.875rem\", weight: 400, lineHeight: \"1.2\" },\n    heading: { family: \"serif\", size: \"1.5rem\", weight: 400, lineHeight: \"1.2\" },\n    subheading: { family: \"serif\", size: \"1.25rem\", weight: 400, lineHeight: \"1.4\" },\n    \"body-lg\": { family: \"sans\", size: \"1rem\", weight: 400, lineHeight: \"1.625\" },\n    body: { family: \"sans\", size: \"0.875rem\", weight: 400, lineHeight: \"1.625\" },\n    caption: { family: \"sans\", size: \"0.75rem\", weight: 400, lineHeight: \"1.625\" },\n    \"caption-xs\": { family: \"sans\", size: \"0.625rem\", weight: 400, lineHeight: \"1.625\" },\n    label: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n  },\n\n  /* ============================================================== *\n   *  GEOMETRY                                                        *\n   * ============================================================== */\n\n  radius: {\n    base: \"0.5rem\",\n    sm: \"calc(0.5rem - 4px)\",\n    md: \"calc(0.5rem - 2px)\",\n    lg: \"0.5rem\",\n    xl: \"calc(0.5rem + 4px)\",\n    full: \"9999px\",\n  },\n\n  shadow: {\n    natural:\n      \"0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06)\",\n    elevated:\n      \"0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.1)\",\n  },\n\n  /* ============================================================== *\n   *  ANIMATION                                                       *\n   * ============================================================== */\n\n  animation: {\n    \"accordion-down\": \"accordion-down 0.2s ease-out\",\n    \"accordion-up\": \"accordion-up 0.2s ease-out\",\n    \"caret-blink\": \"caret-blink 1.25s ease-out infinite\",\n  },\n} as const;\n\nexport type Tokens = typeof tokens;\nexport type SemanticTokens = typeof tokens.semantic.light;\n"]}