From f5dc7332cbb7462181f3a2c5f0283516f821d75a Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Sun, 29 Mar 2026 01:23:57 -0700
Subject: [PATCH] =?UTF-8?q?fix(tokens):=20import=20@bytelyst/design-tokens?=
 =?UTF-8?q?/css/chronomind=20=E2=80=94=20remove=20hand-written=20token=20b?=
 =?UTF-8?q?lock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package.json        |  1 +
 web/src/app/globals.css | 97 +----------------------------------------
 web/src/app/layout.tsx  |  1 +
 3 files changed, 3 insertions(+), 96 deletions(-)

diff --git a/web/package.json b/web/package.json
index 39ab0ff..86d5774 100644
--- a/web/package.json
+++ b/web/package.json
@@ -15,6 +15,7 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
+    "@bytelyst/design-tokens": "^0.1.0",
     "@bytelyst/ui": "^0.1.0",
     "@bytelyst/api-client": "^0.1.0",
     "@bytelyst/sync": "^0.1.0",
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 15d89b0..cc4d0df 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -1,101 +1,6 @@
 @import "tailwindcss";
 
-/* ============================================================
-   Design tokens — auto-generated from @bytelyst/design-tokens
-   Source: packages/design-tokens/generated/chronomind.css
-   DO NOT EDIT — regenerate with: npx tsx packages/design-tokens/scripts/generate.ts
-   ============================================================ */
-
-/* Auto-generated chronomind tokens from bytelyst.tokens.json — do not edit manually */
-
-:root {
-  --cm-bg-canvas: #06070A;
-  --cm-bg-elevated: #0E1118;
-  --cm-surface-card: #121725;
-  --cm-surface-muted: #1A2335;
-  --cm-border-default: rgba(255,255,255,0.12);
-  --cm-border-strong: rgba(255,255,255,0.22);
-  --cm-text-primary: #EFF4FF;
-  --cm-text-secondary: #A5B1C7;
-  --cm-text-tertiary: #6C7C98;
-  --cm-accent-primary: #5A8CFF;
-  --cm-accent-secondary: #2EE6D6;
-  --cm-success: #34D399;
-  --cm-warning: #F59E0B;
-  --cm-danger: #FF6E6E;
-  --cm-focus-ring: rgba(90,140,255,0.45);
-  --cm-overlay-scrim: rgba(5,8,18,0.72);
-
-  /* chronomind product colors */
-  --cm-urgency-critical: #FF6E6E;
-  --cm-urgency-important: #FFD166;
-  --cm-urgency-standard: #5A8CFF;
-  --cm-urgency-gentle: #34D399;
-  --cm-urgency-passive: #A5B1C7;
-  --cm-focus-mode: #7C6BFF;
-  --cm-pomodoro-work: #34D399;
-  --cm-pomodoro-break: #5A8CFF;
-  --cm-cascade-warning: #FF9F43;
-  --cm-timer-complete: #34D399;
-
-  --cm-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
-  --cm-font-body: "DM Sans", "SF Pro Text", sans-serif;
-  --cm-font-mono: "IBM Plex Mono", "SF Mono", monospace;
-
-  --cm-fs-xs: 12px;
-  --cm-fs-sm: 14px;
-  --cm-fs-md: 16px;
-  --cm-fs-lg: 18px;
-  --cm-fs-xl: 22px;
-  --cm-fs-2xl: 28px;
-  --cm-fs-3xl: 36px;
-
-  --cm-space-0: 0;
-  --cm-space-1: 4px;
-  --cm-space-2: 8px;
-  --cm-space-3: 12px;
-  --cm-space-4: 16px;
-  --cm-space-5: 20px;
-  --cm-space-6: 24px;
-  --cm-space-7: 28px;
-  --cm-space-8: 32px;
-  --cm-space-10: 40px;
-  --cm-space-12: 48px;
-  --cm-space-16: 64px;
-
-  --cm-radius-xs: 8px;
-  --cm-radius-sm: 12px;
-  --cm-radius-md: 16px;
-  --cm-radius-lg: 20px;
-  --cm-radius-xl: 24px;
-  --cm-radius-pill: 999px;
-
-  --cm-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
-  --cm-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
-  --cm-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
-
-  --cm-motion-fast: 140ms;
-  --cm-motion-base: 220ms;
-  --cm-motion-slow: 320ms;
-  --cm-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
-}
-
-[data-theme="light"] {
-  --cm-bg-canvas: #F6F8FC;
-  --cm-bg-elevated: #EEF2FA;
-  --cm-surface-card: #FFFFFF;
-  --cm-surface-muted: #F3F5FA;
-  --cm-border-default: rgba(14,19,32,0.12);
-  --cm-border-strong: rgba(14,19,32,0.24);
-  --cm-text-primary: #0E1320;
-  --cm-text-secondary: #55637A;
-  --cm-success: #13956A;
-  --cm-warning: #B87504;
-  --cm-danger: #D24242;
-  --cm-focus-ring: rgba(90,140,255,0.35);
-  --cm-overlay-scrim: rgba(10,13,23,0.5);
-}
-
+/* Design tokens imported via @bytelyst/design-tokens/css/chronomind in layout.tsx */
 /* === END design tokens === */
 
 /* ── App-only vars (aliases, opacity variants, layout) ── */
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 948d8e4..0691491 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata, Viewport } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
+import "@bytelyst/design-tokens/css/chronomind";
 import "./globals.css";
 import { ToastContainer } from "@/components/Toast";
 import { Providers } from "./providers";