trackops 2.0.4 → 2.0.6

package/ui/css/tokens.css

@@ -1,284 +1,284 @@
-/* ═══════════════════════════════════════════════════════
-   PROJECT-OPS DESIGN TOKENS
-   Grayscale + Glassmorphism Design System
-   ═══════════════════════════════════════════════════════ */
-
-:root {
-
-  /* ── Grayscale Foundation ── */
-  --gray-950: #0C0C0E;
-  --gray-900: #141416;
-  --gray-850: #1A1A1E;
-  --gray-800: #222228;
-  --gray-700: #2E2E36;
-  --gray-600: #3E3E48;
-  --gray-500: #5A5A66;
-  --gray-400: #8A8A96;
-  --gray-300: #B0B0BC;
-  --gray-200: #D0D0D8;
-  --gray-100: #E8E8EE;
-  --gray-50:  #F4F4F8;
-
-  /* ── Data Accent Colors ── */
-  --accent-blue:    #60A5FA;
-  --accent-cyan:    #22D3EE;
-  --accent-green:   #4ADE80;
-  --accent-yellow:  #FACC15;
-  --accent-red:     #F87171;
-  --accent-purple:  #A78BFA;
-  --accent-orange:  #FB923C;
-
-  /* ── Surfaces ── */
-  --surface-0:  var(--gray-900);
-  --surface-1:  rgba(26, 26, 30, 0.85);
-  --surface-2:  rgba(34, 34, 40, 0.55);
-  --surface-3:  rgba(46, 46, 54, 0.65);
-  --surface-4:  rgba(255, 255, 255, 0.03);
-
-  /* ── Text ── */
-  --text-primary:   var(--gray-50);
-  --text-secondary: var(--gray-400);
-  --text-muted:     var(--gray-500);
-  --text-accent:    var(--accent-blue);
-
-  /* ── Borders ── */
-  --border:        rgba(255, 255, 255, 0.06);
-  --border-strong: rgba(255, 255, 255, 0.12);
-  --border-glass:  rgba(255, 255, 255, 0.08);
-  --border-accent: rgba(96, 165, 250, 0.35);
-
-  /* ── Accent ── */
-  --accent:        var(--accent-blue);
-  --accent-light:  rgba(96, 165, 250, 0.12);
-  --accent-glow:   rgba(96, 165, 250, 0.20);
-  --accent-hover:  #93C5FD;
-
-  /* ── Status ── */
-  --success:       var(--accent-green);
-  --success-light: rgba(74, 222, 128, 0.12);
-  --warning:       var(--accent-yellow);
-  --warning-light: rgba(250, 204, 21, 0.12);
-  --danger:        var(--accent-red);
-  --danger-light:  rgba(248, 113, 113, 0.12);
-  --info:          var(--accent-cyan);
-  --info-light:    rgba(34, 211, 238, 0.12);
-
-  /* ── Priorities ── */
-  --p0: var(--accent-red);
-  --p1: var(--accent-yellow);
-  --p2: var(--accent-blue);
-  --p3: var(--gray-500);
-
-  /* ── Glass Token System ── */
-  --glass-blur:      20px;
-  --glass-blur-lg:   40px;
-  --glass-blur-sm:   12px;
-  --glass-bg:        rgba(34, 34, 40, 0.55);
-  --glass-bg-strong: rgba(34, 34, 40, 0.72);
-  --glass-bg-subtle: rgba(34, 34, 40, 0.35);
-  --glass-border:    rgba(255, 255, 255, 0.08);
-  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.30);
-  --glass-inner:     inset 0 1px 0 rgba(255, 255, 255, 0.05);
-
-  --glass-border-hover: rgba(255, 255, 255, 0.14);
-
-  --bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(90, 90, 120, 0.15), transparent 50%),
-                 radial-gradient(ellipse 60% 40% at 80% 80%, rgba(60, 60, 80, 0.12), transparent 50%),
-                 var(--gray-950);
-
-  /* ── Fonts ── */
-  --font-ui:       'Outfit', system-ui, -apple-system, sans-serif;
-  --font-heading:  'Plus Jakarta Sans', 'Outfit', sans-serif;
-  --font-mono:     'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
-
-  /* ── Typography Scale (modular 1.25) ── */
-  --text-xs:   0.75rem;    /* 12px */
-  --text-sm:   0.875rem;   /* 14px */
-  --text-base: 1rem;       /* 16px */
-  --text-md:   1.125rem;   /* 18px */
-  --text-lg:   1.25rem;    /* 20px */
-  --text-xl:   1.5rem;     /* 24px */
-  --text-2xl:  1.875rem;   /* 30px */
-  --text-3xl:  2.25rem;    /* 36px */
-
-  /* ── Border Radius ── */
-  --radius-xs:    0.375rem;   /* 6px */
-  --radius-sm:    0.625rem;   /* 10px */
-  --radius-md:    0.875rem;   /* 14px */
-  --radius-lg:    1.25rem;    /* 20px */
-  --radius-xl:    1.75rem;    /* 28px */
-  --radius-2xl:   2rem;       /* 32px */
-  --radius-super: 3rem;       /* 48px */
-  --radius-full:  9999px;
-
-  /* ── Shadows ── */
-  --shadow-sm:      0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
-  --shadow-md:      0 4px 20px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
-  --shadow-lg:      0 12px 40px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
-  --shadow-xl:      0 24px 60px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
-  --shadow-accent:  0 8px 24px rgba(96,165,250,0.25);
-  --shadow-glow:    0 0 40px rgba(96,165,250,0.15);
-
-  /* ── Spacing ── */
-  --space-1:  0.25rem;   /* 4px */
-  --space-2:  0.5rem;    /* 8px */
-  --space-3:  0.75rem;   /* 12px */
-  --space-4:  1rem;      /* 16px */
-  --space-5:  1.25rem;   /* 20px */
-  --space-6:  1.5rem;    /* 24px */
-  --space-8:  2rem;      /* 32px */
-  --space-10: 2.5rem;    /* 40px */
-  --space-12: 3rem;      /* 48px */
-  --space-16: 4rem;      /* 64px */
-
-  /* ── Layout ── */
-  --sidebar-width:           68px;
-  --sidebar-width-collapsed: 68px;
-  --sidebar-width-expanded:  240px;
-  --topbar-height:           48px;
-  --content-pad:             24px;
-
-  /* ── Transitions ── */
-  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
-  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
-  --duration-fast:   120ms;
-  --duration-base:   200ms;
-  --duration-slow:   350ms;
-  --duration-slower: 600ms;
-
-  /* ── Z-index ── */
-  --z-base:    1;
-  --z-panel:   10;
-  --z-topbar:  20;
-  --z-sidebar: 30;
-  --z-modal:   40;
-  --z-toast:   50;
-  --z-onboard: 60;
-}
-
-/* ═══════════════════════════════════════════════════════
-   LIGHT THEME
-   Active with: html[data-theme="light"]
-   ═══════════════════════════════════════════════════════ */
-[data-theme="light"] {
-
-  /* ── Surfaces ── */
-  --surface-0:  #EDEDF3;
-  --surface-1:  rgba(255, 255, 255, 0.70);
-  --surface-2:  rgba(255, 255, 255, 0.50);
-  --surface-3:  rgba(255, 255, 255, 0.65);
-  --surface-4:  rgba(0, 0, 0, 0.03);
-
-  /* ── Text ── */
-  --text-primary:   #111118;
-  --text-secondary: #55556A;
-  --text-muted:     #8888A0;
-  --text-accent:    #3B82F6;
-
-  /* ── Borders ── */
-  --border:        rgba(0, 0, 0, 0.06);
-  --border-strong: rgba(0, 0, 0, 0.14);
-  --border-glass:  rgba(0, 0, 0, 0.08);
-  --border-accent: rgba(59, 130, 246, 0.3);
-
-  /* ── Accent ── */
-  --accent:       #3B82F6;
-  --accent-hover: #60A5FA;
-  --accent-light: rgba(59, 130, 246, 0.10);
-  --accent-glow:  rgba(59, 130, 246, 0.20);
-
-  /* ── Glass ── */
-  --glass-bg:        rgba(255, 255, 255, 0.50);
-  --glass-bg-strong: rgba(255, 255, 255, 0.70);
-  --glass-bg-subtle: rgba(255, 255, 255, 0.35);
-  --glass-border:    rgba(0, 0, 0, 0.08);
-  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.10);
-  --glass-inner:     inset 0 1px 0 rgba(255, 255, 255, 0.80);
-
-  --glass-border-hover: rgba(0, 0, 0, 0.14);
-
-  --bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(180, 180, 200, 0.15), transparent 50%),
-                 radial-gradient(ellipse 60% 40% at 80% 80%, rgba(160, 160, 180, 0.10), transparent 50%),
-                 #EDEDF3;
-
-  /* ── Shadows (reduced opacity for light backgrounds) ── */
-  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
-  --shadow-md:     0 4px 20px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
-  --shadow-lg:     0 12px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
-  --shadow-xl:     0 24px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.10);
-  --shadow-accent: 0 8px 24px rgba(59,130,246,0.20);
-
-  /* ── Status (light overrides) ── */
-  --success-light: rgba(74,222,128,0.10);
-  --warning-light: rgba(250,204,21,0.10);
-  --danger-light:  rgba(248,113,113,0.10);
-  --info-light:    rgba(34,211,238,0.10);
-}
-
-/* ═══════════════════════════════════════════════════════
-   LIGHT THEME – Component Overrides
-   ═══════════════════════════════════════════════════════ */
-
-/* Topbar */
-[data-theme="light"] .topbar {
-  background: rgba(248,249,252,0.88);
-}
-
-/* Terminal always dark */
-[data-theme="light"] .terminal-surface,
-[data-theme="light"] .terminal-output,
-[data-theme="light"] .console-panel {
-  background: #1a1f2e;
-  color: #94D4BC;
-}
-[data-theme="light"] .terminal-header {
-  background: rgba(255,255,255,0.04);
-  border-bottom-color: rgba(255,255,255,0.04);
-}
-[data-theme="light"] .console-panel-header {
-  background: rgba(255,255,255,0.02);
-}
-
-/* Time tracker card */
-[data-theme="light"] .time-tracker-card {
-  background: linear-gradient(135deg, #f0f2fb 0%, #ffffff 100%);
-  border-color: rgba(96,165,250,0.2);
-}
-
-/* Onboarding backdrop */
-[data-theme="light"] .onboarding-backdrop {
-  background: rgba(0,0,0,0.45);
-}
-
-/* Sidebar logo icon */
-[data-theme="light"] .sidebar-logo-icon {
-  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
-}
-
-/* Topbar timer */
-[data-theme="light"] .topbar-timer {
-  background: #EDEDF3;
-  border-color: rgba(0,0,0,0.10);
-}
-
-/* Modal */
-[data-theme="light"] .modal {
-  background: #FFFFFF;
-  border-color: rgba(0,0,0,0.10);
-}
-
-/* Flash toast */
-[data-theme="light"] .flash {
-  background: #FFFFFF;
-  border-color: rgba(0,0,0,0.10);
-}
-
-/* ═══════════════════════════════════════════════════════
-   Theme Transition
-   ═══════════════════════════════════════════════════════ */
-html {
-  transition:
-    background-color var(--duration-slow) var(--ease-out),
-    color var(--duration-slow) var(--ease-out);
-}
+/* ═══════════════════════════════════════════════════════
+   PROJECT-OPS DESIGN TOKENS
+   Grayscale + Glassmorphism Design System
+   ═══════════════════════════════════════════════════════ */
+
+:root {
+
+  /* ── Grayscale Foundation ── */
+  --gray-950: #0C0C0E;
+  --gray-900: #141416;
+  --gray-850: #1A1A1E;
+  --gray-800: #222228;
+  --gray-700: #2E2E36;
+  --gray-600: #3E3E48;
+  --gray-500: #5A5A66;
+  --gray-400: #8A8A96;
+  --gray-300: #B0B0BC;
+  --gray-200: #D0D0D8;
+  --gray-100: #E8E8EE;
+  --gray-50:  #F4F4F8;
+
+  /* ── Data Accent Colors ── */
+  --accent-blue:    #60A5FA;
+  --accent-cyan:    #22D3EE;
+  --accent-green:   #4ADE80;
+  --accent-yellow:  #FACC15;
+  --accent-red:     #F87171;
+  --accent-purple:  #A78BFA;
+  --accent-orange:  #FB923C;
+
+  /* ── Surfaces ── */
+  --surface-0:  var(--gray-900);
+  --surface-1:  rgba(26, 26, 30, 0.85);
+  --surface-2:  rgba(34, 34, 40, 0.55);
+  --surface-3:  rgba(46, 46, 54, 0.65);
+  --surface-4:  rgba(255, 255, 255, 0.03);
+
+  /* ── Text ── */
+  --text-primary:   var(--gray-50);
+  --text-secondary: var(--gray-400);
+  --text-muted:     var(--gray-500);
+  --text-accent:    var(--accent-blue);
+
+  /* ── Borders ── */
+  --border:        rgba(255, 255, 255, 0.06);
+  --border-strong: rgba(255, 255, 255, 0.12);
+  --border-glass:  rgba(255, 255, 255, 0.08);
+  --border-accent: rgba(96, 165, 250, 0.35);
+
+  /* ── Accent ── */
+  --accent:        var(--accent-blue);
+  --accent-light:  rgba(96, 165, 250, 0.12);
+  --accent-glow:   rgba(96, 165, 250, 0.20);
+  --accent-hover:  #93C5FD;
+
+  /* ── Status ── */
+  --success:       var(--accent-green);
+  --success-light: rgba(74, 222, 128, 0.12);
+  --warning:       var(--accent-yellow);
+  --warning-light: rgba(250, 204, 21, 0.12);
+  --danger:        var(--accent-red);
+  --danger-light:  rgba(248, 113, 113, 0.12);
+  --info:          var(--accent-cyan);
+  --info-light:    rgba(34, 211, 238, 0.12);
+
+  /* ── Priorities ── */
+  --p0: var(--accent-red);
+  --p1: var(--accent-yellow);
+  --p2: var(--accent-blue);
+  --p3: var(--gray-500);
+
+  /* ── Glass Token System ── */
+  --glass-blur:      20px;
+  --glass-blur-lg:   40px;
+  --glass-blur-sm:   12px;
+  --glass-bg:        rgba(34, 34, 40, 0.55);
+  --glass-bg-strong: rgba(34, 34, 40, 0.72);
+  --glass-bg-subtle: rgba(34, 34, 40, 0.35);
+  --glass-border:    rgba(255, 255, 255, 0.08);
+  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.30);
+  --glass-inner:     inset 0 1px 0 rgba(255, 255, 255, 0.05);
+
+  --glass-border-hover: rgba(255, 255, 255, 0.14);
+
+  --bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(90, 90, 120, 0.15), transparent 50%),
+                 radial-gradient(ellipse 60% 40% at 80% 80%, rgba(60, 60, 80, 0.12), transparent 50%),
+                 var(--gray-950);
+
+  /* ── Fonts ── */
+  --font-ui:       'Outfit', system-ui, -apple-system, sans-serif;
+  --font-heading:  'Plus Jakarta Sans', 'Outfit', sans-serif;
+  --font-mono:     'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+
+  /* ── Typography Scale (modular 1.25) ── */
+  --text-xs:   0.75rem;    /* 12px */
+  --text-sm:   0.875rem;   /* 14px */
+  --text-base: 1rem;       /* 16px */
+  --text-md:   1.125rem;   /* 18px */
+  --text-lg:   1.25rem;    /* 20px */
+  --text-xl:   1.5rem;     /* 24px */
+  --text-2xl:  1.875rem;   /* 30px */
+  --text-3xl:  2.25rem;    /* 36px */
+
+  /* ── Border Radius ── */
+  --radius-xs:    0.375rem;   /* 6px */
+  --radius-sm:    0.625rem;   /* 10px */
+  --radius-md:    0.875rem;   /* 14px */
+  --radius-lg:    1.25rem;    /* 20px */
+  --radius-xl:    1.75rem;    /* 28px */
+  --radius-2xl:   2rem;       /* 32px */
+  --radius-super: 3rem;       /* 48px */
+  --radius-full:  9999px;
+
+  /* ── Shadows ── */
+  --shadow-sm:      0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
+  --shadow-md:      0 4px 20px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
+  --shadow-lg:      0 12px 40px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
+  --shadow-xl:      0 24px 60px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
+  --shadow-accent:  0 8px 24px rgba(96,165,250,0.25);
+  --shadow-glow:    0 0 40px rgba(96,165,250,0.15);
+
+  /* ── Spacing ── */
+  --space-1:  0.25rem;   /* 4px */
+  --space-2:  0.5rem;    /* 8px */
+  --space-3:  0.75rem;   /* 12px */
+  --space-4:  1rem;      /* 16px */
+  --space-5:  1.25rem;   /* 20px */
+  --space-6:  1.5rem;    /* 24px */
+  --space-8:  2rem;      /* 32px */
+  --space-10: 2.5rem;    /* 40px */
+  --space-12: 3rem;      /* 48px */
+  --space-16: 4rem;      /* 64px */
+
+  /* ── Layout ── */
+  --sidebar-width:           68px;
+  --sidebar-width-collapsed: 68px;
+  --sidebar-width-expanded:  240px;
+  --topbar-height:           48px;
+  --content-pad:             24px;
+
+  /* ── Transitions ── */
+  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
+  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-fast:   120ms;
+  --duration-base:   200ms;
+  --duration-slow:   350ms;
+  --duration-slower: 600ms;
+
+  /* ── Z-index ── */
+  --z-base:    1;
+  --z-panel:   10;
+  --z-topbar:  20;
+  --z-sidebar: 30;
+  --z-modal:   40;
+  --z-toast:   50;
+  --z-onboard: 60;
+}
+
+/* ═══════════════════════════════════════════════════════
+   LIGHT THEME
+   Active with: html[data-theme="light"]
+   ═══════════════════════════════════════════════════════ */
+[data-theme="light"] {
+
+  /* ── Surfaces ── */
+  --surface-0:  #EDEDF3;
+  --surface-1:  rgba(255, 255, 255, 0.70);
+  --surface-2:  rgba(255, 255, 255, 0.50);
+  --surface-3:  rgba(255, 255, 255, 0.65);
+  --surface-4:  rgba(0, 0, 0, 0.03);
+
+  /* ── Text ── */
+  --text-primary:   #111118;
+  --text-secondary: #55556A;
+  --text-muted:     #8888A0;
+  --text-accent:    #3B82F6;
+
+  /* ── Borders ── */
+  --border:        rgba(0, 0, 0, 0.06);
+  --border-strong: rgba(0, 0, 0, 0.14);
+  --border-glass:  rgba(0, 0, 0, 0.08);
+  --border-accent: rgba(59, 130, 246, 0.3);
+
+  /* ── Accent ── */
+  --accent:       #3B82F6;
+  --accent-hover: #60A5FA;
+  --accent-light: rgba(59, 130, 246, 0.10);
+  --accent-glow:  rgba(59, 130, 246, 0.20);
+
+  /* ── Glass ── */
+  --glass-bg:        rgba(255, 255, 255, 0.50);
+  --glass-bg-strong: rgba(255, 255, 255, 0.70);
+  --glass-bg-subtle: rgba(255, 255, 255, 0.35);
+  --glass-border:    rgba(0, 0, 0, 0.08);
+  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.10);
+  --glass-inner:     inset 0 1px 0 rgba(255, 255, 255, 0.80);
+
+  --glass-border-hover: rgba(0, 0, 0, 0.14);
+
+  --bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(180, 180, 200, 0.15), transparent 50%),
+                 radial-gradient(ellipse 60% 40% at 80% 80%, rgba(160, 160, 180, 0.10), transparent 50%),
+                 #EDEDF3;
+
+  /* ── Shadows (reduced opacity for light backgrounds) ── */
+  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-md:     0 4px 20px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
+  --shadow-lg:     0 12px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
+  --shadow-xl:     0 24px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.10);
+  --shadow-accent: 0 8px 24px rgba(59,130,246,0.20);
+
+  /* ── Status (light overrides) ── */
+  --success-light: rgba(74,222,128,0.10);
+  --warning-light: rgba(250,204,21,0.10);
+  --danger-light:  rgba(248,113,113,0.10);
+  --info-light:    rgba(34,211,238,0.10);
+}
+
+/* ═══════════════════════════════════════════════════════
+   LIGHT THEME – Component Overrides
+   ═══════════════════════════════════════════════════════ */
+
+/* Topbar */
+[data-theme="light"] .topbar {
+  background: rgba(248,249,252,0.88);
+}
+
+/* Terminal always dark */
+[data-theme="light"] .terminal-surface,
+[data-theme="light"] .terminal-output,
+[data-theme="light"] .console-panel {
+  background: #1a1f2e;
+  color: #94D4BC;
+}
+[data-theme="light"] .terminal-header {
+  background: rgba(255,255,255,0.04);
+  border-bottom-color: rgba(255,255,255,0.04);
+}
+[data-theme="light"] .console-panel-header {
+  background: rgba(255,255,255,0.02);
+}
+
+/* Time tracker card */
+[data-theme="light"] .time-tracker-card {
+  background: linear-gradient(135deg, #f0f2fb 0%, #ffffff 100%);
+  border-color: rgba(96,165,250,0.2);
+}
+
+/* Onboarding backdrop */
+[data-theme="light"] .onboarding-backdrop {
+  background: rgba(0,0,0,0.45);
+}
+
+/* Sidebar logo icon */
+[data-theme="light"] .sidebar-logo-icon {
+  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
+}
+
+/* Topbar timer */
+[data-theme="light"] .topbar-timer {
+  background: #EDEDF3;
+  border-color: rgba(0,0,0,0.10);
+}
+
+/* Modal */
+[data-theme="light"] .modal {
+  background: #FFFFFF;
+  border-color: rgba(0,0,0,0.10);
+}
+
+/* Flash toast */
+[data-theme="light"] .flash {
+  background: #FFFFFF;
+  border-color: rgba(0,0,0,0.10);
+}
+
+/* ═══════════════════════════════════════════════════════
+   Theme Transition
+   ═══════════════════════════════════════════════════════ */
+html {
+  transition:
+    background-color var(--duration-slow) var(--ease-out),
+    color var(--duration-slow) var(--ease-out);
+}

package/ui/favicon.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="8" fill="#0F1117"/>
-  <path d="M16 16c-2.5-3.5-5-6-8-6a6 6 0 0 0 0 12c3 0 5.5-2.5 8-6z" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round"/>
-  <path d="M16 16c2.5 3.5 5 6 8 6a6 6 0 0 0 0-12c-3 0-5.5 2.5-8 6z" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#0F1117"/>
+  <path d="M16 16c-2.5-3.5-5-6-8-6a6 6 0 0 0 0 12c3 0 5.5-2.5 8-6z" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M16 16c2.5 3.5 5 6 8 6a6 6 0 0 0 0-12c-3 0-5.5 2.5-8 6z" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round"/>
+</svg>