@tailor-platform/app-shell 1.4.1 → 1.6.0

package/dist/theme.css

@@ -1,78 +1,38 @@
-@custom-variant dark (&:where(.dark, .dark *));
-
-:root {
-  --background: rgba(250, 250, 250, 1);
-  --foreground: rgba(10, 10, 10, 1);
-  --card: rgba(255, 255, 255, 1);
-  --card-foreground: rgba(10, 10, 10, 1);
-  --popover: rgba(255, 255, 255, 1);
-  --popover-foreground: rgba(10, 10, 10, 1);
-  --primary: rgba(23, 23, 23, 1);
-  --primary-foreground: rgba(250, 250, 250, 1);
-  --secondary: rgba(245, 245, 245, 1);
-  --secondary-foreground: rgba(23, 23, 23, 1);
-  --muted: rgba(245, 245, 245, 1);
-  --muted-foreground: rgba(115, 115, 115, 1);
-  --accent: rgba(245, 245, 245, 1);
-  --accent-foreground: rgba(23, 23, 23, 1);
-  --destructive: rgba(220, 38, 38, 1);
-  --destructive-foreground: rgba(254, 242, 242, 1);
-  --border: rgba(229, 229, 229, 1);
-  --input: rgba(229, 229, 229, 1);
-  --ring: rgba(163, 163, 163, 1);
-  --chart-1: rgba(234, 88, 12, 1);
-  --chart-2: rgba(13, 148, 136, 1);
-  --chart-3: rgba(22, 78, 99, 1);
-  --chart-4: rgba(251, 191, 36, 1);
-  --chart-5: rgba(245, 158, 11, 1);
-  --radius: 0.625rem;
-  --sidebar: rgba(250, 250, 250, 1);
-  --sidebar-foreground: rgba(10, 10, 10, 1);
-  --sidebar-primary: rgba(23, 23, 23, 1);
-  --sidebar-primary-foreground: rgba(250, 250, 250, 1);
-  --sidebar-accent: rgba(245, 245, 245, 1);
-  --sidebar-accent-foreground: rgba(23, 23, 23, 1);
-  --sidebar-border: rgba(229, 229, 229, 1);
-  --sidebar-ring: rgba(163, 163, 163, 1);
-}
+/**
+ * Theme system
+ *
+ * `@tailor-platform/app-shell/styles` includes the default palette.
+ * Import exactly one optional override from `./themes/*.css` after styles
+ * (for example `@tailor-platform/app-shell/themes/cream`).
+ *
+ * Palette tiers:
+ *
+ *   1. BRAND          — required per mode (light + dark):
+ *                       primary, secondary, accent (+ foregrounds each).
+ *                       Tune accent by eye for menu/sidebar selection.
+ *   2. SHELL GRADIENT — optional; branded palettes only (bloom, cream).
+ *   3. SYSTEM         — surfaces & chrome; copy default or tune for brand tint
+ *                       (foreground, muted, popover, card, borders).
+ *   4. PALETTE        — optional: radius, charts, shadows, destructive.
+ *
+ * Inherited from default.css — do not duplicate in new palettes:
+ *   --ring, --sidebar-*, --status-*, --alert-*.
+ *
+ * Light/dark mode is controlled separately via `.dark` on <html>.
+ * Palette selection is by CSS import; there is no runtime palette prop.
+ */
+@import "./themes/default.css" layer(theme.defaults);
 
-.dark {
-  color-scheme: dark;
-  --background: rgba(10, 10, 10, 1);
-  --foreground: rgba(250, 250, 250, 1);
-  --card: rgba(23, 23, 23, 1);
-  --card-foreground: rgba(250, 250, 250, 1);
-  --popover: rgba(38, 38, 38, 1);
-  --popover-foreground: rgba(250, 250, 250, 1);
-  --primary: rgba(229, 229, 229, 1);
-  --primary-foreground: rgba(23, 23, 23, 1);
-  --secondary: rgba(38, 38, 38, 1);
-  --secondary-foreground: rgba(250, 250, 250, 1);
-  --muted: rgba(38, 38, 38, 1);
-  --muted-foreground: rgba(163, 163, 163, 1);
-  --accent: rgba(64, 64, 64, 1);
-  --accent-foreground: rgba(250, 250, 250, 1);
-  --destructive: rgba(248, 113, 113, 1);
-  --destructive-foreground: rgba(254, 242, 242, 1);
-  --border: rgba(255, 255, 255, 0.10000000149011612);
-  --input: rgba(255, 255, 255, 0.15000000596046448);
-  --ring: rgba(115, 115, 115, 1);
-  --chart-1: rgba(29, 78, 216, 1);
-  --chart-2: rgba(16, 185, 129, 1);
-  --chart-3: rgba(245, 158, 11, 1);
-  --chart-4: rgba(168, 85, 247, 1);
-  --chart-5: rgba(244, 63, 94, 1);
-  --sidebar: rgba(23, 23, 23, 1);
-  --sidebar-foreground: rgba(250, 250, 250, 1);
-  --sidebar-primary: rgba(29, 78, 216, 1);
-  --sidebar-primary-foreground: rgba(250, 250, 250, 1);
-  --sidebar-accent: rgba(38, 38, 38, 1);
-  --sidebar-accent-foreground: rgba(250, 250, 250, 1);
-  --sidebar-border: rgba(255, 255, 255, 0.10000000149011612);
-  --sidebar-ring: rgba(82, 82, 82, 1);
-}
+@custom-variant dark (&:where(.dark, .dark *));
 
+/**
+ * Tailwind v4 theme bridge — maps raw CSS custom properties to Tailwind's
+ * design token namespace so utilities like `bg-background`, `text-primary`,
+ * `shadow-sm` resolve correctly regardless of the active palette.
+ */
 @theme inline {
+  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -110,10 +70,14 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  /* Statuses */
-  --color-status-default: #737373;
-  --color-status-neutral: #0ea5e9;
-  --color-status-completed: #22c55e;
-  --color-status-attention: #f59e0b;
-  --color-status-danger: #ef4444;
+  --color-status-default: var(--status-default);
+  --color-status-neutral: var(--status-neutral);
+  --color-status-completed: var(--status-completed);
+  --color-status-attention: var(--status-attention);
+  --color-status-danger: var(--status-danger);
+
+  --shadow-xs: var(--semantic-shadow-xs);
+  --shadow-sm: var(--semantic-shadow-sm);
+  --shadow-md: var(--semantic-shadow-md);
+  --shadow-lg: var(--semantic-shadow-lg);
 }

package/dist/theme.shims.css

@@ -0,0 +1,7 @@
+/*
+ * Deprecated compatibility shim.
+ *
+ * `@tailor-platform/app-shell/styles` now includes the default theme tokens,
+ * so this file intentionally does nothing. Keep exporting it so older apps
+ * that still import `@tailor-platform/app-shell/theme.css` keep building.
+ */

package/dist/themes/_template.css

@@ -0,0 +1,116 @@
+/**
+ * Palette template — copy to `themes/{name}.css` when adding a new theme.
+ *
+ * ═══════════════════════════════════════════════════════════════════════════
+ * NEW PALETTE CHECKLIST
+ * ═══════════════════════════════════════════════════════════════════════════
+ *
+ * 1. Copy this file → `themes/{name}.css`.
+ * 2. Set section 1 (BRAND) for light AND dark — 6 tokens per mode.
+ * 3. Optional: set section 2 (SHELL GRADIENT) and copy the structural block
+ *    from `bloom.css` / `cream.css` if this palette uses a shell gradient.
+ * 4. Tune section 3 (SYSTEM) if the brand needs warm/cool surfaces — copy
+ *    from `default.css` for neutral palettes, or from `bloom.css` / `cream.css`
+ *    as a starting point for branded shells. Set both modes.
+ * 5. Optional: section 4 (PALETTE) — radius, chart hues, shadow tint.
+ * 6. Import `@tailor-platform/app-shell/themes/{name}` after
+ *    `@tailor-platform/app-shell/styles` in the consuming app.
+ *
+ * DO NOT SET (inherited from `:root` in default.css):
+ *   --ring, --sidebar-*, --status-*, --alert-*
+ *
+ * PREVIEW: `/custom-page/color` in the Next.js example app.
+ * ═══════════════════════════════════════════════════════════════════════════
+ */
+
+:root {
+  color-scheme: light;
+
+  /* ── 1. BRAND — required; set explicitly for light and dark ─────────── */
+  --primary: /* brand action color */;
+  --primary-foreground: /* contrast text on primary */;
+  --secondary: /* filled secondary actions, badges */;
+  --secondary-foreground: /* contrast text on secondary */;
+  --accent: /* menu/sidebar hover & selection — tune by eye */;
+  --accent-foreground: /* contrast text on accent */;
+
+  /* ── 2. SHELL GRADIENT — optional; omit for flat palettes like default ── */
+  --shell-gradient-base: /* page backdrop bottom / dark anchor */;
+  --shell-gradient-tint: /* page backdrop top / light lift */;
+
+  /* ── 3. SYSTEM — surfaces & chrome; tune for brand tint or copy default ─ */
+  --background: rgba(250, 250, 250, 1);
+  --foreground: rgba(10, 10, 10, 1);
+  --card: rgba(255, 255, 255, 1);
+  --card-foreground: rgba(10, 10, 10, 1);
+  --popover: rgba(255, 255, 255, 1);
+  --popover-foreground: rgba(10, 10, 10, 1);
+  --muted: rgba(245, 245, 245, 1);
+  --muted-foreground: rgba(115, 115, 115, 1);
+  --border: rgba(229, 229, 229, 1);
+  --input: rgba(229, 229, 229, 1);
+  --sidebar: rgba(250, 250, 250, 1);
+  --sidebar-foreground: rgba(10, 10, 10, 1);
+  --sidebar-border: rgba(229, 229, 229, 1);
+
+  /* ── 4. PALETTE — optional overrides (else inherited from :root) ──────── */
+  --destructive: rgba(220, 38, 38, 1);
+  --radius: 0.625rem;
+  --chart-1: /* brand-adjacent */;
+  --chart-2: /* ... */;
+  --chart-3: /* ... */;
+  --chart-4: /* ... */;
+  --chart-5: /* ... */;
+  --semantic-shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.06);
+  --semantic-shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08);
+  --semantic-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.09), 0 2px 4px -2px rgb(15 23 42 / 0.06);
+  --semantic-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.12), 0 4px 6px -4px rgb(15 23 42 / 0.09);
+}
+
+:root.dark {
+  color-scheme: dark;
+
+  /* ── 1. BRAND (dark) ─────────────────────────────────────────────────── */
+  --primary: /* lighter/desaturated for dark surfaces */;
+  --primary-foreground: /* dark text on light primary */;
+  --secondary: /* dark secondary fill */;
+  --secondary-foreground: /* light text on secondary */;
+  --accent: /* sidebar/menu selection on dark — tune by eye */;
+  --accent-foreground: /* light text on accent */;
+
+  /* ── 2. SHELL GRADIENT (dark) ────────────────────────────────────────── */
+  --shell-gradient-base: /* dark anchor */;
+  --shell-gradient-tint: /* slightly lifted dark top */;
+
+  /* ── 3. SYSTEM (dark) ────────────────────────────────────────────────── */
+  --background: rgba(10, 10, 10, 1);
+  --foreground: rgba(250, 250, 250, 1);
+  --card: rgba(23, 23, 23, 1);
+  --card-foreground: rgba(250, 250, 250, 1);
+  --popover: rgba(38, 38, 38, 1);
+  --popover-foreground: rgba(250, 250, 250, 1);
+  --muted: rgba(38, 38, 38, 1);
+  --muted-foreground: rgba(163, 163, 163, 1);
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.15);
+  --sidebar: rgba(10, 10, 10, 1);
+  --sidebar-foreground: rgba(250, 250, 250, 1);
+  --sidebar-border: rgba(255, 255, 255, 0.1);
+
+  /* ── 4. PALETTE (dark overrides) ─────────────────────────────────────── */
+  --destructive: rgba(248, 113, 113, 1);
+  --chart-1: /* ... */;
+  --chart-2: /* ... */;
+  --chart-3: /* ... */;
+  --chart-4: /* ... */;
+  --chart-5: /* ... */;
+  --semantic-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
+  --semantic-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.38), 0 1px 2px -1px rgb(0 0 0 / 0.32);
+  --semantic-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.28);
+  --semantic-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.42), 0 4px 6px -4px rgb(0 0 0 / 0.35);
+}
+
+/*
+ * Optional: copy the structural override block from bloom.css or cream.css
+ * when using a shell gradient (transparent sidebar, squircle, etc.).
+ */

package/dist/themes/bloom.css

@@ -0,0 +1,159 @@
+/**
+ * Bloom — lavender shell + indigo brand.
+ * Branded palette: overrides brand/system/palette tokens; shared aliases +
+ * semantic tokens inherit from default.css.
+ */
+:root {
+  color-scheme: light;
+
+  /* ── 1. BRAND ─────────────────────────────────────────────────────────── */
+  --primary: rgba(83, 90, 232, 1);
+  --primary-foreground: rgba(255, 255, 255, 1);
+  --secondary: rgb(216, 217, 244);
+  --secondary-foreground: rgba(23, 23, 23, 1);
+  --accent: rgb(233, 234, 248);
+  --accent-foreground: rgba(16, 18, 43, 1);
+
+  /* ── 2. SHELL GRADIENT ────────────────────────────────────────────────── */
+  --shell-gradient-base: rgba(239, 232, 255, 1);
+  --shell-gradient-tint: rgb(255, 255, 255);
+
+  /* ── 3. SYSTEM — brand-tinted surfaces ────────────────────────────────── */
+  --background: rgba(250, 250, 250, 1);
+  --foreground: rgba(16, 18, 43, 1);
+  --card: rgba(255, 255, 255, 1);
+  --card-foreground: rgba(16, 18, 43, 1);
+  --popover: rgba(255, 255, 255, 1);
+  --popover-foreground: rgba(16, 18, 43, 1);
+  --muted: rgba(246, 242, 255, 1);
+  --muted-foreground: rgba(16, 18, 43, 0.72);
+  --border: rgba(0, 0, 0, 0.08);
+  --input: rgba(0, 0, 0, 0.08);
+  --sidebar: rgba(250, 250, 250, 1);
+  --sidebar-foreground: rgba(16, 18, 43, 1);
+  --sidebar-border: rgba(0, 0, 0, 0.08);
+
+  /* ── 4. PALETTE ───────────────────────────────────────────────────────── */
+  --destructive: rgba(220, 38, 38, 1);
+  --radius: 1rem;
+  --chart-1: rgba(83, 90, 232, 1);
+  --chart-2: rgba(0, 151, 156, 1);
+  --chart-3: rgba(1, 55, 66, 1);
+  --chart-4: rgba(110, 95, 195, 1);
+  --chart-5: rgba(217, 119, 6, 1);
+  --semantic-shadow-xs: 0 1px 2px 0 rgb(16 18 43 / 0.07);
+  --semantic-shadow-sm: 0 1px 3px 0 rgb(16 18 43 / 0.08), 0 1px 2px -1px rgb(16 18 43 / 0.06);
+  --semantic-shadow-md: 0 4px 6px -1px rgb(16 18 43 / 0.1), 0 2px 4px -2px rgb(16 18 43 / 0.08);
+  --semantic-shadow-lg: 0 10px 15px -3px rgb(16 18 43 / 0.12), 0 4px 6px -4px rgb(83 90 232 / 0.1);
+}
+
+:root.dark {
+  color-scheme: dark;
+
+  /* ── 1. BRAND (dark) ─────────────────────────────────────────────────── */
+  --primary: rgba(131, 138, 247, 1);
+  --primary-foreground: rgba(16, 18, 43, 1);
+  --secondary: rgb(45, 48, 72);
+  --secondary-foreground: rgba(248, 249, 252, 1);
+  --accent: rgb(50, 53, 72);
+  --accent-foreground: rgba(248, 249, 252, 1);
+
+  /* ── 2. SHELL GRADIENT (dark) ─────────────────────────────────────────── */
+  --shell-gradient-base: rgba(9, 10, 17, 1);
+  --shell-gradient-tint: rgb(16, 17, 26);
+
+  /* ── 3. SYSTEM (dark) ─────────────────────────────────────────────────── */
+  --background: rgba(10, 10, 10, 1);
+  --foreground: rgba(248, 249, 252, 1);
+  --card: rgba(26, 28, 42, 1);
+  --card-foreground: rgba(248, 249, 252, 1);
+  --popover: rgba(34, 37, 54, 1);
+  --popover-foreground: rgba(248, 249, 252, 1);
+  --muted: rgba(36, 39, 58, 1);
+  --muted-foreground: rgba(180, 183, 200, 1);
+  --border: rgba(255, 255, 255, 0.08);
+  --input: rgba(255, 255, 255, 0.12);
+  --sidebar: rgba(10, 10, 10, 1);
+  --sidebar-foreground: rgba(248, 249, 252, 1);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+
+  /* ── 4. PALETTE (dark) ────────────────────────────────────────────────── */
+  --destructive: rgba(248, 113, 113, 1);
+  --chart-1: rgba(131, 138, 247, 1);
+  --chart-2: rgba(45, 191, 196, 1);
+  --chart-3: rgba(94, 234, 212, 1);
+  --chart-4: rgba(167, 139, 250, 1);
+  --chart-5: rgba(251, 191, 36, 1);
+  --semantic-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
+  --semantic-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.38), 0 1px 2px -1px rgb(0 0 0 / 0.32);
+  --semantic-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.28);
+  --semantic-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.42), 0 4px 6px -4px rgb(0 0 0 / 0.35);
+}
+
+/*
+ * Structural overrides — shell gradient, transparent chrome, squircle corners,
+ * tighter heading rhythm. Apply in both modes (gradient reads `--shell-gradient-base`
+ * + the per-mode `--shell-gradient-tint`).
+ *
+ * These must NOT be in a @layer so they override Tailwind utilities (which are layered).
+ */
+
+html {
+  min-height: 100vh;
+  min-height: 100dvh;
+  background-color: var(--shell-gradient-base);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--shell-gradient-base) 55%, var(--shell-gradient-tint)) 0%,
+    color-mix(in srgb, var(--shell-gradient-base) 45%, var(--shell-gradient-tint)) 20%,
+    color-mix(in srgb, var(--shell-gradient-base) 30%, var(--shell-gradient-tint)) 40%,
+    color-mix(in srgb, var(--shell-gradient-base) 15%, var(--shell-gradient-tint)) 55%,
+    color-mix(in srgb, var(--shell-gradient-base) 6%, var(--shell-gradient-tint)) 65%,
+    var(--shell-gradient-tint) 70%,
+    var(--shell-gradient-tint) 100%
+  );
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+html :where(h1, h2, h3, h4, h5, h6) {
+  letter-spacing: -0.03em;
+  line-height: 1.2;
+}
+
+@supports (corner-shape: squircle) {
+  html * {
+    corner-shape: squircle;
+  }
+  html [class*="rounded-full"] {
+    corner-shape: round;
+  }
+}
+
+html body {
+  background-color: transparent;
+  background-image: none;
+}
+
+html [data-slot="sidebar-wrapper"],
+html [data-slot="sidebar-inner"],
+html main[data-slot="sidebar-inset"],
+html
+  [data-slot="sidebar"][class*="bg-sidebar"]:not([data-mobile="true"]):not(
+    [data-icon-mode="true"]
+  ) {
+  background-color: transparent;
+}
+
+html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"] {
+  background-color: transparent;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease;
+}
+
+html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"]:hover:not(:disabled) {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}

package/dist/themes/cream.css

@@ -0,0 +1,159 @@
+/**
+ * Cream — warm Tailor brand shell + indigo actions.
+ * Branded palette: overrides brand/system/palette tokens; shared aliases +
+ * semantic tokens inherit from default.css.
+ */
+:root {
+  color-scheme: light;
+
+  /* ── 1. BRAND ─────────────────────────────────────────────────────────── */
+  --primary: rgba(83, 90, 232, 1);
+  --primary-foreground: rgba(255, 255, 255, 1);
+  --secondary: rgb(240, 230, 212);
+  --secondary-foreground: rgba(16, 18, 43, 1);
+  --accent: rgb(245, 238, 228);
+  --accent-foreground: rgba(16, 18, 43, 1);
+
+  /* ── 2. SHELL GRADIENT ────────────────────────────────────────────────── */
+  --shell-gradient-base: #fef6e3;
+  --shell-gradient-tint: #fffdfa;
+
+  /* ── 3. SYSTEM — brand-tinted surfaces ────────────────────────────────── */
+  --background: rgba(250, 250, 250, 1);
+  --foreground: rgba(16, 18, 43, 1);
+  --card: rgba(255, 255, 255, 1);
+  --card-foreground: rgba(16, 18, 43, 1);
+  --popover: rgba(255, 255, 255, 1);
+  --popover-foreground: rgba(16, 18, 43, 1);
+  --muted: rgba(251, 248, 240, 1);
+  --muted-foreground: rgba(16, 18, 43, 0.72);
+  --border: rgba(0, 0, 0, 0.08);
+  --input: rgba(0, 0, 0, 0.08);
+  --sidebar: rgba(250, 250, 250, 1);
+  --sidebar-foreground: rgba(16, 18, 43, 1);
+  --sidebar-border: rgba(0, 0, 0, 0.08);
+
+  /* ── 4. PALETTE ───────────────────────────────────────────────────────── */
+  --destructive: rgba(220, 38, 38, 1);
+  --radius: 1rem;
+  --chart-1: rgba(83, 90, 232, 1);
+  --chart-2: rgba(0, 151, 156, 1);
+  --chart-3: rgba(1, 55, 66, 1);
+  --chart-4: rgba(110, 95, 195, 1);
+  --chart-5: rgba(217, 119, 6, 1);
+  --semantic-shadow-xs: 0 1px 2px 0 rgb(16 18 43 / 0.07);
+  --semantic-shadow-sm: 0 1px 3px 0 rgb(16 18 43 / 0.08), 0 1px 2px -1px rgb(16 18 43 / 0.06);
+  --semantic-shadow-md: 0 4px 6px -1px rgb(16 18 43 / 0.1), 0 2px 4px -2px rgb(16 18 43 / 0.08);
+  --semantic-shadow-lg: 0 10px 15px -3px rgb(16 18 43 / 0.12), 0 4px 6px -4px rgb(83 90 232 / 0.1);
+}
+
+:root.dark {
+  color-scheme: dark;
+
+  /* ── 1. BRAND (dark) ─────────────────────────────────────────────────── */
+  --primary: rgba(131, 138, 247, 1);
+  --primary-foreground: rgba(16, 18, 43, 1);
+  --secondary: rgb(42, 36, 30);
+  --secondary-foreground: rgba(247, 244, 238, 1);
+  --accent: rgb(50, 44, 38);
+  --accent-foreground: rgba(247, 244, 238, 1);
+
+  /* ── 2. SHELL GRADIENT (dark) ─────────────────────────────────────────── */
+  --shell-gradient-base: rgb(8, 6, 5);
+  --shell-gradient-tint: rgb(17, 14, 10);
+
+  /* ── 3. SYSTEM (dark) ─────────────────────────────────────────────────── */
+  --background: rgba(10, 10, 10, 1);
+  --foreground: rgba(247, 244, 238, 1);
+  --card: rgb(22, 19, 17);
+  --card-foreground: rgba(247, 244, 238, 1);
+  --popover: rgb(37, 33, 28);
+  --popover-foreground: rgba(247, 244, 238, 1);
+  --muted: rgba(42, 37, 31, 1);
+  --muted-foreground: rgba(186, 180, 170, 1);
+  --border: rgba(255, 255, 255, 0.08);
+  --input: rgba(255, 255, 255, 0.12);
+  --sidebar: rgba(10, 10, 10, 1);
+  --sidebar-foreground: rgba(247, 244, 238, 1);
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+
+  /* ── 4. PALETTE (dark) ────────────────────────────────────────────────── */
+  --destructive: rgba(248, 113, 113, 1);
+  --chart-1: rgba(131, 138, 247, 1);
+  --chart-2: rgba(45, 191, 196, 1);
+  --chart-3: rgba(94, 234, 212, 1);
+  --chart-4: rgba(167, 139, 250, 1);
+  --chart-5: rgba(251, 191, 36, 1);
+  --semantic-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
+  --semantic-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.38), 0 1px 2px -1px rgb(0 0 0 / 0.32);
+  --semantic-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.28);
+  --semantic-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.42), 0 4px 6px -4px rgb(0 0 0 / 0.35);
+}
+
+/*
+ * Structural overrides — shell gradient, transparent chrome, squircle corners,
+ * tighter heading rhythm. Apply in both modes (gradient reads `--shell-gradient-base`
+ * + the per-mode `--shell-gradient-tint`).
+ *
+ * These must NOT be in a @layer so they override Tailwind utilities (which are layered).
+ */
+
+html {
+  min-height: 100vh;
+  min-height: 100dvh;
+  background-color: var(--shell-gradient-base);
+  background-image: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--shell-gradient-base) 55%, var(--shell-gradient-tint)) 0%,
+    color-mix(in srgb, var(--shell-gradient-base) 45%, var(--shell-gradient-tint)) 20%,
+    color-mix(in srgb, var(--shell-gradient-base) 30%, var(--shell-gradient-tint)) 40%,
+    color-mix(in srgb, var(--shell-gradient-base) 15%, var(--shell-gradient-tint)) 55%,
+    color-mix(in srgb, var(--shell-gradient-base) 6%, var(--shell-gradient-tint)) 65%,
+    var(--shell-gradient-tint) 70%,
+    var(--shell-gradient-tint) 100%
+  );
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+html :where(h1, h2, h3, h4, h5, h6) {
+  letter-spacing: -0.03em;
+  line-height: 1.2;
+}
+
+@supports (corner-shape: squircle) {
+  html * {
+    corner-shape: squircle;
+  }
+  html [class*="rounded-full"] {
+    corner-shape: round;
+  }
+}
+
+html body {
+  background-color: transparent;
+  background-image: none;
+}
+
+html [data-slot="sidebar-wrapper"],
+html [data-slot="sidebar-inner"],
+html main[data-slot="sidebar-inset"],
+html
+  [data-slot="sidebar"][class*="bg-sidebar"]:not([data-mobile="true"]):not(
+    [data-icon-mode="true"]
+  ) {
+  background-color: transparent;
+}
+
+html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"] {
+  background-color: transparent;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease;
+}
+
+html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"]:hover:not(:disabled) {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}