fix(web): add sr-only utility + prefers-color-scheme light mode to globals.css

web/src/app/globals.css

@@ -1,36 +1,115 @@
 @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 {
-  /* ChronoMind Dark Theme */
   --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);
+}
+
+/* === END design tokens === */
+
+/* ── App-only vars (aliases, opacity variants, layout) ── */
+:root {
   --cm-border: #1E293B;
   --cm-border-subtle: #151D2E;
-
-  /* Urgency colors */
   --cm-critical: #FF4757;
   --cm-important: #FF9F43;
   --cm-standard: #FECA57;
   --cm-gentle: #2ED573;
   --cm-passive: #A5B1C7;
-
-  /* Accent */
   --cm-accent: #5A8CFF;
-  --cm-accent-secondary: #2EE6D6;
-
-  /* Semantic */
-  --cm-success: #34D399;
-  --cm-warning: #F59E0B;
-  --cm-danger: #FF6E6E;
   --cm-white: #FFFFFF;
   --cm-black: #000000;
-
-  /* Opacity variants for rgba() values */
   --cm-critical-15: rgba(255, 71, 87, 0.15);
   --cm-critical-20: rgba(255, 71, 87, 0.2);
   --cm-critical-40: rgba(255, 71, 87, 0.4);
@@ -56,7 +135,6 @@
   --cm-bg-canvas-85: rgba(6, 7, 10, 0.85);
   --cm-black-80: rgba(0, 0, 0, 0.8);
   --cm-black-90: rgba(0, 0, 0, 0.9);
-
   --background: var(--cm-bg-canvas);
   --foreground: var(--cm-text-primary);
 }
@@ -107,3 +185,29 @@ body {
   outline: 2px solid var(--cm-accent);
   outline-offset: 2px;
 }
+
+/* Screen-reader only utility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Respect OS dark/light preference */
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    --cm-bg-canvas: #F8FAFC;
+    --cm-bg-elevated: #FFFFFF;
+    --cm-surface-card: #FFFFFF;
+    --cm-surface-muted: #F1F5F9;
+    --cm-text-primary: #0F172A;
+    --cm-text-secondary: #475569;
+    --cm-text-tertiary: #94A3B8;
+  }
+}